Hoping someone can help me find a fix for this ongoing issue with a few websites I am building.
The main one in question is http://altaweb.ca
When the website is viewed at 100% zoom it looks fine, however if you zoom out, the white backgrounds on the columns containing the images and text do not line up.
How do I go about fixing this problem to make everything flush.
While I don’t believe you’ll have many users zooming in and out, you can apply a background color to the row containing the columns - white being what you are after in order to fill that blank space. That should fix you right up.
Unfortunately, I have a background image set to the row which is static, so setting the background color to white would no longer display the background the picture.
Is there any way around this because I cannot insert a row inside of a another row, i could insert a new row, but that still gives me the same issue with not displaying the background image.
You can also do the same with the column settings if that helps? If not, would you mind sharing temp admin access so I can take a deeper look at how you have that page configured?
Thats how it is set up now. The background color is set to white on the columns. the problem is with different devices and zoom levels, the columns dont line up, causing the difference in size and therefore causing the column containing the elements to shrink and make things look not-so-flush.
How would I go about sharing temp access with you privately.
Ah I think I see what you mean. Unfortunately, columns are currently dynamic in that they change size based on the content within them on various devices and/or zooms. We do have plans of adding the ability to set height to columns, etc. in the near future, but unfortunately that doesn’t really help you at the moment. I’d still like to take a look though to see if I can figure something out for you. You can use the private reply tick box below to provide private login details.
Yea, not sure there is much we can do here unfortunately due to the setup and dynamic rows. I did adjust the bottom padding a bit in the outer most columns which helped a bit, but even at high zoom levels or resizing causes them to come up again. What I might suggest may take a bit of time if you are up to it. I think doing it a bit differently may solve your issues…
Firstly, you can add a background image in the theme customizer which would take that element out of play within the row to where you could apply a white bg color. Actually, now that I think of it, that may be the solution as it is! Can I have you give that a shot?
Okay. I have updated this and done as you asked… I have gone into the theme customizer as well and set the background image there, and limited the main row size in the page builder.
However, the background image is not displaying at all. Can you advise?
That is because you have the layout set to full width as opposed to boxed. Setting it to boxed would allow your background image to show. Give that a shot and you’ll see what I mean.
The only thing I could complain about now vs how the site looked before is that setting the row to a fixed width has put a white “border” around the content, mainly the grey box containing the logo at the top of the page. Is there any way to get rid of this?