Cover template Header image responsiveness

  • Resolved eoik

    (@eoik)


    4 years, 10 months ago

    Hi,

    When I decided to try using Gutemberg, I chose the Chaplin theme.
    Then, I realized the header image was not responsive the way I needed it.
    My image is in 3 parts, 3 columns : A – B – C
    On part A and C, I have two persons, two different persons, between them, there’s nothing. With the Chaplin theme, on a phone, I could only see part B, the middle : nothing.
    So, I tried the Twenty Twenty theme, and, at first, it seemed to be responsive the way I needed it : the whole image was just smaller, nothing was hidden.
    So I decided to work with Twenty Twenty.
    Now I realize that I have the same problem I had with Chaplin.
    The thing is I first tried my page with the Full width template.
    My image is perfect with a full width template on a phone.
    https://www.disparates.org/latetesurlesepaules/wordpress/?page_id=128
    So, I should find a way to change my css, no?

    Or, maybe better, I should work with the Full width template and adapt it for the homepage header image (transform it into a cover image) (the reverse of what I did (I adapted the Cover template so that it would be Full width).

    Thanks in advance for your ideas,

    V

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter eoik

    (@eoik)

    Hi

    I added this :

    @media only screen and (max-width: 478px) {

	.bg-image {background-size:100%;}
}

    ans it’s already way better.

    I also might have changed .cover-image instead:

    @media only screen and (max-width: 478px) {

	.cover-image {background-size:100%;}
}

    now i need to fix the white space above and below, as well as the logo size, and it will be ok.

    Hi, glad to see you were able to get it working. Did you still need further help with more customizations? As it has been over a day since your last reply, I’m not sure if the current display on the live site is how you’d like it.

    Thread Starter eoik

    (@eoik)

    Thanks Jarret.
    Actually, I decided to use Chaplin… Hope I took the right decision.
    Thanks a lot for your kind help, I really appreciated.
    (I will not find that kind of help on the Chaplin forum ?? )
    V

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover template Header image responsiveness’ is closed to new replies.