How to Change Column Breakpoints

[harmonherring]

How do I change the screen width at which my columns will switch to a vertical layout?

Thanks

[ruenel]

Hello There,

Thanks for writing in! Regretfully there isn’t any settings that you can change the break points at which you columns will collapse. It is only possible with custom css. Please provide us the url of the page where you want the columns to change to the vertical layout and also provide the screen width so that we can give the a tailored css for your site.

Best Regards.

[harmonherring]

URL is http://harmonherring.com/quantics

It’s a temporary location for a site I’m building. I figured it would be only possible through custom CSS, just don’t know the exact classes.

If I could make them collapse at about 1000px that’d be great.

Thanks!

[ruenel]

Hello There,

Are you referring to the “Who We Are” section? To resolve your issue, please have your code updated and use this instead:

.grey-text {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
    width: 80%;
}

@media(max-width: 1000px){
    .grey-text {
        width: 100%;
    }
}

We would loved to know if this has work for you. Thank you.

[harmonherring]

No, I was referring to the ‘What We Do’ section. It’s three raw content blocks next to each other.

[friech]

Hi Harmon,

I see that you have that custom CSS below applied to your 1/3 columns.

@media only screen and (max-width: 1400px) {
	.service-expand {
	    width: 100% !important;
	}
}

Please add a display: block !important; property to that and that should work.

I have found the proper CSS code selector using the Chrome browser Developer Toolbar.
For the CSS code itself, I suggest that you get started with this tutorial.

Hope it helps,
Cheers!