-
Posts
-
Hello,
I am so very glad I purchased your theme! After really digging in for the last few weeks, I am thrilled with my decision. Bravo guys! Keep up the good work!I have a question regarding the order of responsive columns when viewed on smaller screens. Let me explain. Let’s say I have a row with 1/2 + 1/2 layout. On a larger screen, the way it looks is perfect. Now, when the screen gets smaller (whatever the breaking point is), each 1/2 column is now displayed vertically. The order is left 1/2 column, then right 1/2. So the VERTICAL order of these columns when the screen breaks to a smaller size is LEFT to RIGHT.
Is there any way to make the RIGHT column appear first when the screen size changes? If, for instance, I have a title on the right with a picture in the left, I’d prefer the title to appear first. This way, I’m forced to put the title on the left to ensure the correct order on smaller screens.
Is there a CSS solution? If not, does the solution involve using the ‘hide based on screen width’ option – replicate the rows and hide/reveal based on screen width?
If this is outside the scope of support, I completely understand. Thanks!
Hi David,
Thanks for posting in. By default and in general, responsive columns order on smaller screen is LEFT to RIGHT. You are correct. The solution is using HIDE BASED ON SCREEN WIDTH property. It could be achieve using CSS but it is not recommended because it is not a good practice. Our demo contents use HIDE BASED ON SCREEN WIDTH property to handle this situation.
Hope this helps.
I was using Alternating Features, you’re right, it was very simple to achieve what I wanted with HIDE BASED ON SCREEN WIDTH. Easy as replicating the contents of the Row (but flip the data in each column), and now the order for the middle Alternating Feature follows a logical vertical order on smaller screen sizes.
Wonderful!
Out of curiosity, this worked seamlessly on all the devices I tried (as well as manually reducing the size of the window) – it never displayed both Rows. Is there ever a potential conflict where both rows could be displayed simultaneously, or do the values in HIDE BASED ON SCREEN WIDTH prevent that (e.g., no overlapping values based on screen size).
Re-sizing the window is tricky as you could confuse tablet and mobile views. It is best to use the Responsive Preview Area of Cornerstone. See https://community.theme.co/kb/cornerstone-interface-introduction/ for more details. Also, ensure your Hide Based on Screen Width settings are correct.
Thanks.
