Black Friday! Get up to 25% off GP Premium! Learn more ➝

Reply To: page header mobile full width

Home Forums Support page header mobile full width Reply To: page header mobile full width

Home Forums Support page header mobile full width Reply To: page header mobile full width

#239387
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 :).