stackoom
  简体   繁体   中英

columns not resizing properly for mobile view

 原文  2019-04-02 09:52:32  6   4    javascript/ jquery/ html/ css/ css3

Question

When I resize the window for mobile view (below 550px width), I want the columns to stretch width according to the window size. Instead, the blue column is slightly smaller than the viewport width and yellow, red and green columns shrink way too much.

this is the result i'm getting: https://imgur.com/Hl60iiy

this is the result i want: https://imgur.com/cksNN7B 

 body{ margin:0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } p{ font-size: 10px; } .inBody{ height: 100vh; width: 100vw; display: flex; flex-direction: row-reverse; } .forAll{ height: inherit; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); white-space: nowrap; display: flex; align-items:center; } .verticalOption a{ text-decoration: none; color: white; font-size: 20px; width: 200px; line-height: 5px; } .content{ display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .opened{ display: none; } .close{ display: none; } @media (max-width: 550px){ .inBody{ height: 100vh; width: 100%; flex-direction: column-reverse; } .verticalOption { transform: rotate(0); } .forAll{ height: 100vh; width: 100%; } } 
 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="no-gutters"> <div class="fluid-container inBody"> <div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary"> <h2 class="verticalOption opened" id="menuHome"><a href="#" id="home">Sample</a></h2> <div class="container content allContent" id="homeContent"> <h1>HOME</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col-1 col2 forAll bg-warning"> <h2 class="verticalOption" id="menuAbout"><a href="#" id="about">Sample</a></h2> <div class="container content close allContent" id="aboutContent"> <h1>About</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col-1 col3 forAll bg-danger"> <h2 class="verticalOption" id="menuContact"><a href="#" id="contact">Contact Me</a></h2> <div class="container content allContent close" id="contactContent"> <h1>Sample</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm1 col-1 col4 forAll bg-success"> <h2 class="verticalOption" id="menuPortfolio"><a href="#" id="portfolio">Sample</a></h2> <div class="container content allContent close" id="portfolioContent"> <h1>Portfolio</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> </div> </div> </body> <script src="main.js"></script> </html>

4 answers

solution1
 1  2019-04-02 10:31:14

This seems to be caused by the col-1 which is means the default size of the columns is 1/12. You can solve the size by changing col-1 to col for 12/12 (100%) width as default (smallest breakpoint) to achieve the desired width. You might have to set an height though.

Codepen: https://codepen.io/jesprj/pen/xeGgpG

solution2
 1  2019-04-02 10:35:17

Try to add col-xs-12 bootstrap class to each container and remove col-1 

<div class="container col-xl-1 col-sm-1 col-xs-12 col2 forAll bg-warning">

Herre the js-fiddle : https://jsfiddle.net/bodybow/odtL97n1/1/

solution3
 1 ACCPTED  2019-04-02 10:43:13

Remove col-1 class, according to Bootstrap 4+ col-* is used to set the width in small devices source 

 body{ margin:0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } p{ font-size: 10px; } .inBody{ height: 100vh; width: 100vw; display: flex; flex-direction: row-reverse; } .forAll{ height: inherit; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); white-space: nowrap; display: flex; align-items:center; } .verticalOption a{ text-decoration: none; color: white; font-size: 20px; width: 200px; line-height: 5px; } .content{ display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .opened{ display: none; } .close{ display: none; } @media (max-width: 550px){ .inBody{ height: 100vh; width: 100%; flex-direction: column-reverse; } .verticalOption { transform: rotate(0); } .forAll{ height: 100vh; width: 100%; } } 
 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="no-gutters"> <div class="fluid-container inBody"> <div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary"> <h2 class="verticalOption opened" id="menuHome"><a href="#" id="home">Sample</a></h2> <div class="container content allContent" id="homeContent"> <h1>HOME</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col2 forAll bg-warning"> <h2 class="verticalOption" id="menuAbout"><a href="#" id="about">Sample</a></h2> <div class="container content close allContent" id="aboutContent"> <h1>About</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm-1 col3 forAll bg-danger"> <h2 class="verticalOption" id="menuContact"><a href="#" id="contact">Contact Me</a></h2> <div class="container content allContent close" id="contactContent"> <h1>Sample</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> <div class="container col-xl-1 col-sm1 col4 forAll bg-success"> <h2 class="verticalOption" id="menuPortfolio"><a href="#" id="portfolio">Sample</a></h2> <div class="container content allContent close" id="portfolioContent"> <h1>Portfolio</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p> </div> </div> </div> </div> </body> <script src="main.js"></script> </html>

solution4
 0  2019-04-02 10:33:06

Just change width:100% to max-width:100% for .forAll class in media query 

@media (max-width: 550px) {
    .inBody {
        height: 100vh;
        width: 100%;
        flex-direction: column-reverse;
    }
    .verticalOption {
        transform: rotate(0);
    }
    .forAll {
        height: 100vh;
        max-width: 100%;
    }
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 2 Columns the same height not resizing properly My mobile responsive website is not resizing properly Image override another div when resizing to mobile view in browser Resizing Elements For Mobile Devices Div not resizing properly How to align 3 equal grids in mobile view properly - bootstrap Angular2: touchStart and touchEnd are not responding properly in mobile view ExtJs 4 Grid panel not resizing properly on window resizing resizing columns after a reload Background resizing on scrolling in mobile browser
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM