5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

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

by yangyang
4 replies
  • WEB DESIGN
    • |
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?
#bootstrap #column #fixed #large #screen #small #stacks #width
  • Profile picture of the author jeffreysloe
    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!
    Signature

    I have been on the Internet since 1999. I'm here to share what I have learned about online marketing, web design and SEO strategies.

    {{ DiscussionBoard.errors[9896535].message }}
    • Profile picture of the author yangyang
      Originally Posted by jeffreysloe View Post

      Hi,
      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?
      Signature

      1. Global Movies Database = $489.95 = 1.5 GB data + 65.9 GB images.

      2. World Hotels Database = $589.95 = 1.54 GB data + 71.4 GB images.

      3. Auto Parts Database = $489.95 = 15.8 GB data + 30.4 GB images.

      {{ DiscussionBoard.errors[9900287].message }}
      • Profile picture of the author peterherriman
        Originally Posted by yangyang View Post

        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?
        G'day,
        not sure I have the solution - have only just started with mobile first websites (a couple so far) and using other peoples templates at the moment.
        last one was using the Tonic free theme
        https://wordpress.org/themes/tonic
        It allowed a full width header image at 1920px
        but the main content is in a fixed width
        From what I can see within the code it looks as if they might be controlling that by using a html element at the body area and then in the css I see
        margin: 0px auto;
        max-width: 1200px;
        min-width: 320px;


        I am guessing that the max-width is doing the trick of keeping the rest inside 1200px.

        Hope it helps.
        {{ DiscussionBoard.errors[9900415].message }}
      • Profile picture of the author jeffreysloe
        Originally Posted by yangyang View Post

        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?
        Hi yangyang,

        I would give the sidebar another class of .col-md-2 and the main content another class of .col-md-10. This would give you a smaller sidebar (2 columns) on medium and large screens, and give you the 3 columns on small screens (if that's what you're after). In Bootstrap, when adding classes, whether .col-xs, .col-sm, .col-md, or .col-lg, they all have to equal 12.

        For example:

        <div class="row">
        <div class="sidebar col-sm-3 col-md-2">
        <p>Some sidebar text here</p>
        </div>
        <div class="main-content col-sm-9 col-md-10">
        <p>This is my main content area</p>
        </div>
        </div>

        In the small example above, you can see that .col-sm-3 and .col-sm-9 equal 12, and .col-md-2 and .col-md-10 equal 12. Also, note that both the sidebar and main-content are in a div with a class of row.

        To give you a better example, take a look at a Bootstrap site that I built (Steers Replicator - Home Page). View the page source of the home page. I have a sidebar (A Little History), and even though it's on the left hand side, the aside tag is below the main article. (In normal HTML markup, that would place the sidebar on the right hand side.)

        However, I added 2 more classes to the article tag to push it to the right, and 2 more classes to the sidebar to pull it to the left hand side. In so doing, it places (stacks) the sidebar beneath the main content on smaller devices.

        I believe that's what you ultimately want to do with your sidebar. Stacking on smaller devices, in my opinion, looks a lot better than having a narrow column.

        If this does not help, please post a link to the site in question, and I'll take a look at it, or you can pm me.
        Signature

        I have been on the Internet since 1999. I'm here to share what I have learned about online marketing, web design and SEO strategies.

        {{ DiscussionBoard.errors[9901133].message }}

Trending Topics