My website is using a hero image with Text and Buttons overlayed on it (www.jaredisham.com).
When in mobile view the buttons and text spill outside of the Hero image and overlap other elements of the webpage.
Is there a way to make the buttons and text responsive so that they don’t spill outside of the hero image?
Hi Jared,
The buttons are overlapping like that due to Top and Bottom padding you’re using – 300px is a lot and on mobile. There’s no way to automatically avoid this, but you can do things to make this not happen. Please open your Hero widget and open the Design and Layout settings group. Set the Top and Bottom Padding to 0%. Set the Extra Top Padding to 20.3%. How does that look? If that doesn’t look right, try lowering it even more.
Sort of worked, but now my text is aligned underneath my header and at the top of the cell. I attempted some CSS adjustments but doesn’t seem to be working. The 300 px from top was decent alignment but seemed to cause problems with the mobile version apparently.
Hi Jared,
Try adjusting the padding further until you find one you’re happy with that doesn’t allow result in the overlap of the buttons.