Photo with size for mobile phone

Hi there,

Background images are not responsive by nature unfortunately.

Is this using the featured image of the post?

Is not a backgroud image i am talking about, is the header photo of the article.

When the article header photo is seen in mobile phone excede in the mobile view size. Is not friendly.

Hi there,

you're using a Header element on your posts, which moves the featured image to a Background Image.
Fix - edit the Header Element - beside the Padding select the mobile icon and try reducing the % value of the top padding - this will make the container more landscape in size.

David in this case i am using the definitions of Generate Press layout, i didn´t change anything, tell me where i can do it because i can't find what you told me to do.

The Header Element for your posts can be found in Dashboard > Appearance > Elements. You'll want to read these docs to get an understanding of how they work:

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

This time you can't solve my question, my site have not a static front page, is not a blog. And what i saw in video demo i knew that.

And what i only want to know is, how i can view in mobile a friendly article head photo and in the docs i didn't saw the solution.

Thanks.

Hi there,

Fix – edit the Header Element – beside the Padding select the mobile icon and try reducing the % value of the top padding – this will make the container more landscape in size. -- David

I did a quick simulation using developer tool, seems 23% top padding looks good for mobile while you are using 70% top padding for mobile currently:

https://www.screencast.com/t/rW5WvZ3sech7

Thanks Ying, now i am more closer to solve de problem but in aditional CSS i can´t see where i can change de percentual.

Can you told me where i can found the place to put 23% as you said?

Bottom your sugestion:

@media (max-width: 768px)
.page-hero {
padding-top: 23%;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
}
Thanks

Hi,

Can you told me where i can found the place to put 23% as you said?

That's something you can do within the Header Element's UI settings as shown here:
https://share.getcloudapp.com/NQuJkLkz

Resolved.

Thanks a lot.

Nice one. Glad you got it sorted. :)