Hey there,
I was wondering if there was a quick way to change when columns collapse to a vertical stack. I know I can just duplicate all content and hide/show depending on screen size, but just altering when it all collapses would be much easier, since it is actually working great, although just a bit too ‘late’.
Is there any quick and easy wat to change it for a specific page?
Thanks!
Hi There,
Please provide your URL and be more specific on what you want to achieve,
This can be done with media query, if is something fairly simple we can help you out.
Thank you
Thanks for the quick reply!
The URL in question is: https://storyteq.com/personal-video/
As you can see we use three columns next to each other saying ‘how we personalize video’, ‘poweful personal video campaigns’, and ‘integrated personal video journeys’.
As screensize becomes smaller they eventually stack on top of each other, placing them above each other - which is great!
however, just before that transition happens the columns become very narrow and letters overlap from each column. I would like that transition to happen a bit earlier (as in, at a bigger screensize).
Or in short - I want to adjust the screensize at which columns get placed above each other to a bigger screensize.
Is that something you can help me with?
Much appreciated!
Hi There,
Thanks for clarifying, please add the following code to Cornerstone > CSS
@media(max-width: 969px) {
.x-column.row-product2.x-1-3 {
width: 100%;
}}
Hope it helps!
Thanks a lot!
Although that does improve what im trying to do, it still generates something weird.
When the screen is around 917 pixels wide, I see the first column alone and big, as expected, but with the other two columns next to each other below that. If they could all go to ‘full width’ below each other on the break of 969 that would make it perfect! 
Any idea how I can tweak that?
Thanks again!
Howdy, @Talmon,
Thanks for writing in! Just as a further bit of clarification on this, we generally do not recommend that users make extensive edits to the grid system as these updates typically require a string of updates to ensure that interactions between columns work as appropriate, and this is all different depending on how many columns you have in a row, when you want it to break, et cetera. What I would recommend doing at this time is taking a look at this file within the theme:
/framework/css/src/site/_scss/inc/mixins/_grid.scss
That file is a SASS file that contains all of the source markup for how columns currently are formatted within the theme when you get down to the Column section. Take some time to see how that is setup and how certain breakpoints work for various columns, and you can take some of those ideas and work them back into your theme as needed for your different situations (in standard CSS formatting, as this nested SASS syntax will not work directly). For example, you may do something like the following:
@media (max-width: 1000px) {
.my-col-break-1000 {
float: none;
width: 100%;
margin-right: 0;
}
}
This code above follows some of the similar patterns used for the columns in the theme. What you would do is add the above class to every column within a row, and this should ensure that at a screen of no bigger than 1000px, every column in a row with that class would break full-width and display properly.
Again, this is not something we typically recommend making updates to for a lot of different reasons. Because this is an area of core functionality, we can help point you in the right direction with the code above, but you will need to work on implementing and troubleshooting any issues that may arise from using something like this due to the core nature of columns themselves within the theme.
Hopefully this helps to provide a little more context and get you moving towards your desired result. Cheers!
Thanks a lot!
Ill have a look at the files. Keep up the good work guys!
Thank you 