Header image is not responsive?

  • onelargeprawn

    (@onelargeprawn)


    11 years, 4 months ago

    I downloaded v1.2.2 of Intergalactic and am testing it on my local computer (using WAMP).

    When I customize the theme by adding a header image, I find that the image is not responsive as one resizes the browser window. I notice that when the window is resized to less than 768px, the image does get resized BUT there is a fair amount of white space added between the header image and the first post.

    Is there a way to fix this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Amin – WPMU DEV Support

    (@wpmudev-support2)

    11 years, 4 months ago

    Hey there onelargeprawn,

    Hope you’re well! 🙂

    First, I suggest you use a child theme http://codex.ww.wp.xz.cn/Child_Themes or use css custom plugin like this: https://ww.wp.xz.cn/plugins/simple-custom-css/ if you will customize your theme.

    I suggest you follow the image size that theme recommends and put this following code:

    .header-background {
    background-size: cover;
}

    This will not make the whole background visible in smaller screen but it will fill the whitespace.

    Hope it helps! 🙂

    Take care,
    Calvin

    Thread Starter onelargeprawn

    (@onelargeprawn)

    11 years, 4 months ago

    Hey Calvin,

    Thanks for letting me know about child themes. All this time, I’ve been making changes to the parent theme so it’s great to be educated on the recommended way to do things 🙂

    I added your code to the child theme’s CSS file and it definitely got rid of the white space when the browser is resized less than 768px.

    Now, any ideas on how to get the head image to be responsive as the browser window is resized?

    Cheers,
    prawny

    Amin – WPMU DEV Support

    (@wpmudev-support2)

    11 years, 4 months ago

    Hello prawny,

    Glad it’s working for you! 🙂

    Now, any ideas on how to get the head image to be responsive as the browser window is resized?

    That is the reason why there is so much whitespace on the header section because they made the image responsive. When you are making an image responsive. you need to automatically calculate the height of an image depending on the current width of it.

    I hope I am making sense here. 🙂

    Best Regards,
    Calvin

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header image is not responsive?’ is closed to new replies.