Bootstrap 3.3.2 fixed width column on large screen but stacks on small screen?

by 4 replies
5
How to make a column in Bootstrap 3.3.2 to be fixed width on large screen (min-width: 768px) but also stacks on small screen (max-width: 767px)?

Did some research and found this solution works half the puzzle, but how to further make it stacks on small screen like a responsive column is doing?

Thus far I tried:

Code:
@media (max-width: 767px) {
    .col-fixed-160 {
        width:100%;
    }
    .col-fixed-240 {
        width:100%;
    }
}
But it doesn't work. Any idea?
#website design #bootstrap #column #fixed #large #screen #small #stacks #width
  • Hi,

    Bootstrap 3 is a mobile first framework. It's used to build sites starting with the smaller devices, and working up to larger screens. You don't need to use media queries for a fixed-width on large screens or to stack columns on smaller screens. Media queries are uses to make key breakpoints within the grid system.

    Bootstrap's fluid grid system, scales the page up to 12 columns for large screens. You use the predefined classes to start the site stacked on smaller viewports, like phones and tablets, and it becomes horizontal on medium or large screens.

    With Bootstrap, the grid system is the key to designing responsive websites. The grid system uses a combination of rows and columns to contain the pages content. Understanding the grid system is the key to designing in Bootstrap. I suggest taking a look at Bootstraps documentation on their website: CSS ยท Bootstrap

    I hope this helps!
    • [1] reply
    • Thanks for the help. However the problem is when the screen becomes large, the sidebar with .col-sm-3 occupying 3 columns spans unnecessarily wide, e.g. on 1920px it would be 480px, which is really a waste of space as all the links of the sidebar are pretty small.

      If I give it .col-sm-2 it would be too narrow on small devices.

      What's your suggestion on working around this?
      • [2] replies
Join the discussion

Next Topics on Trending Feed