[Resolved] Photo with size for mobile phone

Home Forums Support [Resolved] Photo with size for mobile phone

Home Forums Support Photo with size for mobile phone

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1630808
    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

    #1630933
    Leo
    Staff
    Customer Support

    Hi there,

    Background images are not responsive by nature unfortunately.

    Is this using the featured image of the post?

    #1631164
    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.

    #1631295
    David
    Staff
    Customer Support

    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.

    #1631301
    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.

    #1631546
    David
    Staff
    Customer Support

    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/

    #1631578
    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.

    #1631780
    Ying
    Staff
    Customer Support

    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

    #1631868
    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

    #1632010
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1633378
    JOAQUIM GALANTE

    Resolved.

    Thanks a lot.

    #1633692
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.