[Resolved] Fixing main content column width above mobile breakpoint

[Dan]

Hey guys

Appreciate you get a lot of questions about fixing column widths (usually the sidebars) and have read those topics – I think my query is a bit different but apologies if covered else where.

Set Up
– 1360px site width
– three content columns site wide
– Left column – 20%
– Right column – 25%

Custom CSS
– Added new @media queries to hide left and right columns below 1360px
– Ideally would fix the main column at around 710px until mobile breakpoint but am struggling the custom CSS with this

Why
I am sure you are asking why I would want to do this – well I don’t believe content that is placed in right and left columns should wrap below main column at lower screen sizes – the assets in these columns are generally important so instead I hide the right / left columns and introduce the assets into the main column using media queries.

I’d like to fix the main column width because right now it scales down unnecessarily when there is plenty of screen real estate either side of it (after left and right columns are hidden) but I also don’t necessarily want it going full width as that means the need to have huge image quality for thumbnails and feature images that I just don’t have access to.

Hoope that all makes sense and you can offer tips on the custom CSS required to fix main column width between the mobile break point and 1359px.

Note – I am building on local host only right now – the url submitted below is running a custom AMP canonical theme.

[David]

Hi there,

so replicating this on a test site, to a) remove the sidebars at 1360px and b) keep the main content to set a set size and centred until we reach tablet breakpoint:

@media (max-width: 1360px) {
    #left-sidebar,
    #right-sidebar {
        display: none;
    }
}

@media (max-width: 1360px) and (min-width: 768px) {
    #content {
        display: flex;
        justify-content: center;
    }

    #primary {
        float: none;
        width: 100%;
        max-width: 710px;
        left: 0;
    }
}

[Dan]

Awesome – thank you David – perfect!

[David]

First go that was good lol – glad to be of help 🙂

[Author]

Posts