Results 1 to 2 of 2

Thread: collapse column when on mobile phone (xs)

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    1

    collapse column when on mobile phone (xs)

    I have a 3 column layout, when the site is viewed on a phone, xs, the left column is hidden:

    <div class="col-md-2 column hidden-xs">

    how can I have this column collapse down instead of being totally hidden, so that only the header is viewable with a small icon to allow the users to toggle to view the associated content?


    thanks!

  2. #2
    Junior Member
    Join Date
    Mar 2015
    Location
    London
    Posts
    8

    Smile Hiding the 1st column (left column) on viewports for mobile

    Quote Originally Posted by FikseGTS View Post
    I have a 3 column layout, when the site is viewed on a phone, xs, the left column is hidden:

    <div class="col-md-2 column hidden-xs">

    how can I have this column collapse down instead of being totally hidden, so that only the header is viewable with a small icon to allow the users to toggle to view the associated content?


    thanks!
    Hello there, I'm fairly new to Bootstrap myself - and what I've found is that its tricky if you're trying to do things really quickly at a pace thats ahead of your learning pace. What I suggest is to just keep experimenting and executing the code and observing whats happening on the screen. Even the most smart mathematician/programmer will be reliant on this to fine tune what it is they are looking to achieve.


    With your case, I would need a link to your website first and if you could show me the code so I can take a look at it then I could get back to you on this one.


    What you really need to do my friend, is write a media query at that snapping point (when we enter the viewport ranges approching 480px and lower).

    You will need to use column-xs and column-sm too - depending what degree you're looking to tweak the ordering and layout of the columns as you hit a viewport.

    Heres an example of 4 individual blocks of items contained in a footer, for ease of understanding ive given them all the same backgroudn color so you can see what happens.


    What I want you to understand here is that bootstrap defines 4 types of columns which work for 4 main viewports:

    1) col-lg-x is for large devices screen-sizes/viewports 1200px,
    2) col-md-x is for medium devices screen-sizes/viewports 992px,
    3) col-sm-x is for small devices screen-sizes/viewports 768px, and
    4) col-xs-x is for extra small devices with screen-sizes/viewports 480px.



    Take a look at this example i've put together for you, where I've shown 4 columns of equal size inside a row (a footer) for viewports higher than or equal to 1200px (large device).

    Then I want hit the snapping-point that corresponds to viewports for medium devices, which are most desktop screen sizes and any absurdly large tablet screen .... I want to change how i show these columns to people. All I want to do here is keep things more or less same as before, but this time I want to make the first two columns occupy 30% of space each, and then the other two columns 20% space each. So basicaly still one row, 4 columns (for boxes).

    Now when viewers begin to view this layout on small devices such as tablets and mini tablets, I dont want them to see '4 columns' - i want to achieve a layout where I want to show 2 columns with 50% width, and then beneath those I want to show two columns that span the whole width of that viewport - so two big bars if you like one over the other.

    Finally, using the xs-hidden rule, I want to show the same layout on extra small devices such as mini-tablets and phones but hiding the last column.

    This is how its done.

    <footer class="row">

    <nav class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
    <ul id="footer-content" class="list-unstyled">
    <li>Info A</li>
    <li>Info B</li>
    <li>Info C</li>
    </ul>
    </nav>
    <nav class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
    <ul id="footer-content" class="list-unstyled">
    <li>Info D</li>
    <li>Info E</li>
    <li>Info F</li>
    </ul>
    </nav>
    <nav class="col-xs-12 col-sm-12 col-md-2 col-lg-3">
    <ul id="footer-content" class="list-unstyled">
    <li>Info G</li>
    <li>Info H</li>
    <li>Info I</li>
    </ul>
    </nav>
    <nav class="hidden-xs col-sm-12 col-md-2 col-lg-3">
    <ul id="footer-content" class="list-unstyled">
    <li>Info J</li>
    <li>Info K</li>
    <li>Info L</li>
    </ul>
    </nav>

    </footer>

    and the css for styling:

    #footer-content { background-color:#6F1322;
    margin-top:1em;
    padding:1em; height:8em;
    background-color:#D0D0D0;
    color:#6F1322;
    text-align:center;}


    JS FIDDLE EXAMPLE BELOW:

    http://jsfiddle.net/rxp10kLs/10/ (with full working code)

    https://jsfiddle.net/rxp10kLs/10/embedded/result/ ( FULL SCREEN TEST, make sure to resize your brwoser screen to see whats happening - or use firefox ,tools->web developer>responsive design view )

    incase the link(s) above dont work then try http://jsfiddle.net/MrKumar44/yjnqkzub/


    I hope this allows you to come closer in solving your own problem - and I hope you can figure out how to achieve your own goal. If not, get back to me.



    Kind Regards,

    Tony
    Last edited by Tony1978; 04-05-2015 at 01:01 PM. Reason: just created a jsfiddle account and saved this code as i wrote it lol

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •