Archived topic
Background image in section not expanding vertically for mobile view
3 replies · Started by Deborah on July 16, 2019
On my test site, I have a background image in the first section of the home page that isn't expanding vertically on mobile as I wish it would. The text content is cut off against the background image.
I've been modifying the layout settings, top and bottom padding, but haven't been able to get the text content in the section to display as I expect.
The result I want: the image background expands vertically to allow all text content in the right column to display correctly, as it does on desktop.
What am I missing or overlooking?
Hi there,
Not sure if I fully understand.
Just checked the page but don't see any obvious issues.
The height of the background image is determined by the content/padding as demonstrated here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height
If this doesn't help, any chance you can show a screenshot of what the problem is?
Let me know :)
Had some help from another person who uses GeneratePress. They pointed out an issue with the background section container not knowing the height of the columns.
What fixed the display issue:
- Changed CSS for that section, the code with the section ID plus .generate-sections-inside-container to display:table;
- Adjusted background image (which I had been doing, but never got quite right) bottom padding in the section settings
Awesome!
Glad you've figured out :)
