[Resolved] Photo with size for mobile phone

[JOAQUIM GALANTE]

How can i put the top article photo with size for mobile phone?

Ex. of an article https://focusmsn.pt/lena-dagua-do-sem-acucar-ao-desalmadamente-45-anos-dedicados-a-musica/

Thanks

[Leo]

Hi there,

Background images are not responsive by nature unfortunately.

Is this using the featured image of the post?

[JOAQUIM GALANTE]

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.

[David]

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.

[JOAQUIM GALANTE]

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.

[David]

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/

[JOAQUIM GALANTE]

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.

[Ying]

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

[JOAQUIM GALANTE]

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

[Elvin]

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

[JOAQUIM GALANTE]

Resolved.

Thanks a lot.

[Elvin]

Nice one. Glad you got it sorted. 🙂

[Author]

Posts