-
Posts
-
Hi,
I’ve got a colour section with a custom height set to 430px to allow the background image to display width on larger monitors.
Padding is set to no padding and the background image is set to scale to fit.
This works fine on larger browsers even though there is a small amount of padding between this and the colour section below (both colour sections have no padding set).
Where it falls down is on smaller screens. It looks as though the height of the colour section is pushing the next element down the page even though the colour section background image scales correctly.
To see what I mean I’ve taken a screenshot. You can see the height of the background image has scaled but the height of the background image + white space below is still 430px. This is pushing the next colour section down the page and leaving a large amount of white space.
You can see this in action here: http://ridelines.digitalessence.net/corporate-events/
Scroll down to the colour section above the title ADDITIONAL INFO
I’ve marked this as a bug as I’ve stripped all of my custom css out and the issue persists.
thanks,
Hedley
How do,
From looking at the code you are using a color section to display the banner image. Have you set a minimum height of 430px to the color section or any element inside in?
This is causing the color section to honour a 430px height regardless of screen size. The image is then scaling to the screen size ie getting smaller but the “container” is still 430px high not the height of the image, hence the white space
Options
1.You could use media queries to lessen the height at various screen sizes.
2. You could chop the image into three separate ones and use the grid row element to display them. That does work, I’ve tried it , but it does crop the images a little.
3. Await a proper support person who may be able to advise better than IHope I’ve helped a little
Thanks
TjHi tjswarbs78. Thanks for your reply and for looking at this.
Yes, I’ve set the colour section to be 430px so that the full width image works on larger screens.
My next step would have been to add some media queries but wanted to report it to the devs as I don’t think it is working as expected and hopefully help anyone else with this issue.
I’ll also look at the grid row element.
cheers,
Hedley
Hey!
Thank you for using Enfold.
I checked the page but it’s blank. Did you set the Section Background > Background Repeat settings to “Scale to fit”? This option may leave white spaces or gaps around the container, depending on the image position. You should set the settings to “Stretch to fit”, forcing the image to cover the whole container but it may cut off certain parts of the image to keep its aspect ratio.
Regards,
Ismael
- You must be logged in to reply to this topic.