Resizing Elements for Mobile

Hi there,

You can try reducing the padding for mobile with the mobile toggle:
https://www.screencast.com/t/ATHNN0Eq

https://docs.generatepress.com/article/header-element-overview/#padding

Let me know if this helps :)

Wouldn't it not be the same padding for different sizes of mobile devices and tablets - not one universal padding setting?

If there is a "best practices" settings that work here, please LMK.

Mobile devices are generally quite similar in size so the same padding usually works.

You could also try using % as unit instead of px.

We could also write some CSS to target each screen width if you'd like to go that route as well.

Let me know :)

If I used %, what numbers would you recommend that I use? Do I need padding on all four sides?

There isn't a recommended setting for this unfortunately - it's all personal preference and trial error.

Also on a second thought, since you don't actually have any content in the page hero, would it be better to just insert that image as a static image in the page hero content instead of using it as a background image?

Then the image itself would resize on mobile (as opposed to background image which isn't responsive).

Can you please tell me how to insert a static image in the page hero content? Is it using html for the image link in the CSS area?

What if you just use the featured image for that page?

What if you just use the featured image for that page?