- This topic has 11 replies, 5 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 23, 2021 at 2:24 pm #1630808JOAQUIM 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
January 23, 2021 at 6:20 pm #1630933LeoStaffCustomer SupportHi there,
Background images are not responsive by nature unfortunately.
Is this using the featured image of the post?
January 24, 2021 at 3:26 am #1631164JOAQUIM GALANTEIs 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.
January 24, 2021 at 6:31 am #1631295DavidStaffCustomer SupportHi 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.January 24, 2021 at 6:39 am #1631301JOAQUIM GALANTEDavid 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.
January 24, 2021 at 7:43 am #1631546DavidStaffCustomer SupportThe 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/
January 24, 2021 at 8:13 am #1631578JOAQUIM GALANTEThis 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.
January 24, 2021 at 11:34 am #1631780YingStaffCustomer SupportHi 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:
January 24, 2021 at 1:50 pm #1631868JOAQUIM GALANTEThanks 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;
}
ThanksJanuary 24, 2021 at 6:39 pm #1632010ElvinStaffCustomer SupportHi,
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/NQuJkLkzJanuary 25, 2021 at 3:21 pm #1633378JOAQUIM GALANTEResolved.
Thanks a lot.
January 25, 2021 at 11:08 pm #1633692ElvinStaffCustomer SupportNice one. Glad you got it sorted. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.