I have a two column setup on some sections (i.e. 2/3, 1/3). It looks fine for me but a copy editor sent me a screenshot of the columns displaying stacked instead of side by side on a desktop. I did not designate breakpoints. Do you have any idea why this happening sometimes and how to fix it?
First image is my row setup in Pro. Second image is the screengrab of it not displaying properly.
Hi @kcostellomak,
Can you share the URL of the page with issue?
That might happen if you are using V2 ROWS and you have different columns setup per screen size under Layout tab. Though as you share it is classic ROWS. Possible cause might be a custom CSS that overwrites column widths. We will check after you share the URL. Thank you.
Hi @kcostellomak,
This is how I see it:
I have check on different browsers too, all display good with 2 columns like that. Can you confirm if you have fixed this already? If not, would you mind giving us more details of the machine and browser where the issue exist so we can duplicate it?
I haven’t fixed anything. One of the testers reported this on her desktop. I will try to find out more information…
That’s great!
Please let us know the results of your tests.
It is happening in Safari on a desktop mac. I was able to replicate the problem on my macbook pro in safari too. Here the details on both:
MAC desktop (iMac 21.5 inch 1920x1080)
OS High Sierra
Version 10.13.6
Processor 3.06 GHz Intel Core i3
Memory 4 GB 1333 MHz DDR3
Graphics ATI Radeon HD 4670 256 MB
Browser: Safari Version 13.0.4
Also a problem in:
MacBook Pro (Retina, 15-inch, Late 2013)
processor 2.3 GHz Intel Core i7
OS High Sierra
Safari version 11.1
Hi @kcostellomak,
I notice that you have a fixed width on your images, would you mind setting that to auto so it will be responsive, then just set a max-width to it so it does not blow up (enlarge) on mobile.
Also, I notice that you have empty columns on the “Personal” section. Would you mind adding a Gap element on those columns as the browser might handle empty columns differently.
And please clear your caching plugins after the changes.
Cheers!
I made the changes but it didn’t fix the problem. These are classic rows. Does that matter?
I found the problem. I had to remove the class vertical-center from the row. But now the text fields top align which is not what I want. How can I fix that?
I forced a margin but isn’t there a way to vertically center a block of text?
Hey @kcostellomak,
You’d need custom CSS to vertically align text if you’re using the Classic Column. I’d strongly recommend that you rebuild your section using the New Row layout system. Please watch the video below for an introduction.
If you wish to continue using the Classic Column, you’ll need to use a Gap element above and below the Text element. You can set up different sized Gap elements to display per screen size using the Hide During Breakpoints feature. Those Gap elements coupled with Hide During Breakpoints will act as responsive spacers.
Hope that helps.
I like the classic row because I want the fade in effects. Will fade effects be added to the new row and columns soon?
Hello @kcostellomak,
Regretfully the fade animation effects is not yet a feature in the new Row element. There is already a request to add it. Our developers were not implementing it as of this moment because it is in conflict with the added features and option in the new row and columns element.
Rest assured, our developers is working on something that adds fade animation in the new column elements.
Best Regards.
That would be awesome.
Thanks for your help.
You are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.