[Resolved] page header mobile full width

[Albert]

Hi, I have one problem.

I use generatepress primeum first time.

I want to add background image to my homepage. So I follow this video (https://vimeo.com/160180419)

and then I can add background image on my blog. Desktop browser is perfect. but I can see cropped image on mobile browser.

This is my blog page (http://indiquasar.com/)

How can I see full width image on mobile browser, too? Help me plz.

[Marc]

Hey there Albert!

I’m assuming by “but I can see cropped image on mobile browser.”, you mean that it gets cut off to the right, yes?

This is because the image you are using is absolutely massive and the CSS is set to background-size: cover;.

This forces the browser to stretch the background image to fill the container, but since the image is already much bigger than most containers, it just cuts it off to the right (because it can’t shrink it any further).

Here’s my solution:

1. Reduce the file size for the background image to at most 1200px wide.
2. Install Tom’s simple CSS plugin
3. Add the following CSS to your site: .generate-content-header{ background-position: center;}

That will keep your black hole image centered regardless of the container size :).

[Albert]

Thank you so much Marc!

I don’t use english well, haha ^__^; I’m korean generatepress user.

I use generatepress once and then became generatepress’s big fan.

Anyway Your answer is very helpful for me, so I appreciate you again.

I will come to this blog when I have some problem again.

Have a nice day Marc~~~!

[Author]

Posts