Hi support, I have two images near the bottom of the homepage; ‘Inverclyde Coastal Path’ and ‘Puck’s Glen and the Massan Loop’. Both images are the same size and appear side-by side. When the browser window is changed and the page refreshes a blue panel (background color) appears within the image panel. Sometimes on the left image and sometimes on the right image:
As the images are the same size I can’t understand why both aren’t scaling equally…
look forward to your comments
Thanks
Tom
Hi Tom
Thanks for reaching out. Nicely done on the page design, looking good.
At a glance, it looks like the difference is in the length of the columns. If you wanted to experiment, you could clone the page and then mirror the text so that it’s the same on the left and the right. I think, then, you’d get the desired result.
Perhaps try the following. Edit the row concerned and click on the right cell, Cell 2 Styles will then appear in the right column. Set a background colour to match the brown of that cell. Next, click the first cell, Cell 1 Styles will appear in the right column, set the cell background color to match the blue.
When editing the row, check Row StylesLayoutCell Vertical Alignment. Ensure it’s set to Stretch.
Does the above help?
Hi Andrew
thanks for your feedback
I cloned the left column text and applied it to the right column and yes, as you suggested, the column lengths are now equal so when rescaled there’s no background visible in either column (the desired effect) although the text is now incorrect in the right column : (
So the cause, as you indicated, isn’t the images but the length of the text above each image in different cells. Test link is here:
https://inverclyderamblers.org.uk/home
I have set the cell vertical alignment in the row to ‘Stretch’ and the background colors to match the images but, as there’s a shadow under the leaflets, if the images don’t scale together the background will not match the image background. This could work if the images were aligned to the bottom of the cell as the background color is ‘flat’ above the leaflets so the ‘join’ would be seamless.
Unsure why two images of the same size won’t scale into cells of equal widths because content (in cells above the images) is not the same.
Please let me know if these’s something else I could try.
Thanks again
T
Thanks for the feedback.
At the moment, there isn’t a way in Page Builder to stick a particular widget to the bottom of a cell.
The cells aren’t exactly 50%, try editing the row and set the cell widths to exactly 50% each.
Can you perhaps take a screenshot and show me the shadow under the leaflets? You can upload a screenshot to imgur.com or Drive/Dropbox and send the link.
Thanks again.