[Resolved] Header Image and mobile size

[Jamie]

Hi,

I have a couple of questions. I’ve created a header with quite a big height and full width. This works fine on a computer screen, but when I look at the page for a mobile phone, I only see a small section of it. If I enable the mobile header, then it only gives the option of using logo.

What I really want is to have the header displaying full on computer, and also show the image on the mobile. Is this possible?

Also, maybe it would be better to use a content box to display the header image instead? I really only want this image on the landing page. In that case, is there a way to disable the header, because I havethe menu at the top of the screen anyway, or would this damage seo at all?

[Leo]

Hi there,

Can you link me to the site? Thanks!

[Jamie]

Hi,

It’s http://www.travelgambit.com

[Leo]

Are you referring to the image that is currently inserted as background image?

Background images are responsive by nature unfortunately.

You could try adding it as a static image in the first section then set it to full width though since you are already using sections below it.

Let me know if this helps.

[Jamie]

Hi,

There doesn’t seem to be a static image setting in the ‘section settings?’

So basically, if you look at the website now, just to make it clear, I have the photo with the passport and sunglasses twice. The top one is using the themes header function, the second one is using the generate press sections feature.

If I use either of these to display the photo as the background image, it looks fine on a computer, but if I view it through a phone, it looks like this:

I want it to either display like it does on the website, or if this is not possible, I need it to display the words. Is there any way to do this? If there isn’t, is there any way to add another image that will show on the mobile phone site only?

Thanks

[Leo]

Are you wanting that image on every page?

[Jamie]

Hi Leo,

No, I just want it on the home page. I just need it to be displaying properly, responsivly for mobile and tablet as well.

Thanks!

Jamie

[Leo]

In that case I would still say add the image as the first section as static image.

So just add this in the content: <img src="URL TO YOUR IMAGE" />

[Jamie]

Hi Leo,

I think we’re almost there! If you look at the website now, you can see that I used your technique above to add a static image. However, as you can see, there is still space around the image that I want the image to fill, namely a bit a both sides and then a tiny bit underneath. I searched previous posts and it mentioned setting image width to 1920px, but that doesn’t seem to have helped in this case? Is this an image size issue, or something else?

Many thanks,

Jamie

[Leo]

Try this CSS:

#generate-section-1 .generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
}

[Jamie]

Excellent, it’s worked!

Thanks for the help Leo.

Just one more question. As I’m using a section for this image at the top of the home screen, and only wanted the menu above this with the logo in, I’ve set the header padding in wordpress as 0 for top, right, bottom and left so that it doesn’t show. Is it ok to do this, or will this effect anything like SEO at all?

Many thanks,

Jamie

[Leo]

It will be fine 🙂 It’s a very popular layout currently.

Glad I could help!

[Author]

Posts