How to make the content column width fixed?

[firemillionaire]

Hello,

I am looking to make my content column width fixed. My website is www.firemillionaire.com and please see below 2 images on what I am trying to achieve.

The first image you see is when the window is maximized, and the column width is just right. However, in the second image, you can see that when I make the widow smaller, the column width adjust to fit everything in.

However, I would like the conlumn width to stay the same, and if there isn’t enough space, the second column will go to the bottom. In addition, although it looks like a sidebar on my website, it’s acutally a column I made in Cornerstone.

I look forward to hearing back! Thanks again for the help

Eric

[nabeel]

Hey there,

Thanks for writing in! This is the default behavior of the responsive sites, if you give your column a fixed width it will disturb your site’s layout and you may have horizontal scrollbar or your content will start to cut off after a defined fixed width. I’d suggest you to define a custom break-point instead and change the width of your columns when the break-point hits. Try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 1280px) {
    .x-3-4.fixed-left-col, .x-1-4.fixed-right-col {
        width: 100%;
        float: none;
    }
}

To learn more about CSS break-points please see https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Hope this helps!

[firemillionaire]

Hi Nabeel,

Thank you for responding. The code works great, but it looks like the effect is only applied to the home page of my blog. The rest of the pages doesn’t seem to work, including contact, about, and post pages.

Can you please take a look and also provide the code such that the effect is applied to all the pages ?

Thanks!

Eric

[Prasant]

Hello Eric,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

.x-column {
    width: 100% !important;
    float: none !important;
}

Thanks.

[firemillionaire]

Hi Prasant,

The code you’ve provided didnt do the trick. However, I think i’ve figured a work around tho, so thank you

Eric

[Prasant]

Glad to hear that.