-
Posts
-
Hello! I have a layout issue on my site, and am wondering if there’s any possible way to fix it.
On this page I have features laid out like this: Under this heading (“How much awesomeness is there? Here’s what you get…”) there are 8 rows of 2 columns each. I have the columns alternating in such a way that on the even rows the feature lists are on the left with the images on the right, and the odd rows have the feature lists on the right with the images on the left. This is to avoid a never-ending column of features on one side and images on the other.
However, on the mobile view, due to the way columns stack, you end up seeing two images in a row, then two sets of features lists in a row, then two images in a row again, etc. This really disrupts the flow and makes it difficult for the reader to conceptualize what’s happening.
Is there ANY possible way to change the layout of these elements based on screen size? I would like the columns to stack like this: (row 1)left-right-(row 2)right-left-(row 3)left-right-(row 4)right-left, etc. I know html tends to cover layout while CSS tends to cover styling, and CSS is what handles the @media queries. But please please PLEASE tell me there’s a workaround to this!
Hi There,
Thanks for writing in! This is a case that you can utilize the Hide Base On Screen Width option of ROW.
What you need to do here is to hide those ROWs that has the image placed on the left on a small and extra small screen.
And create a new ROWs, this new ROWs will represent your content on mobile view. Arrange the elements of this ROW like how you have arrange those ROWs that images is on the right side. Since we do not want this ROW to show on desktop view, hide this ROW on medium, large, and extra large screen.
When creating a ROW/Section that is specific for mobile view, make sure you preview the Cornerstone on Mobile view as well.
Hope it helps, Cheers!
