Trying to Specify Particular Image for Mobile Device in Lifestyle Pro

[StephenD]

Hi,

I'm using Lifestyle Pro to build a site.

I've setup the header image which is 1070 x 180 pixels. It has large text across the centre, a small star image above this text, and another line of smaller text below it. It looks fine on large screens, but the text is really small on smaller screens because of the responsive design. For this reason, I'd like to specify an alternative image for smaller devices.

I've found several tutorials online, but none of them work for me.

This is some of the CSS code I have:

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

.header-image .site-title a {
background-size: contain !important;
background-image: url('logo.png');
}

I'm not quite sure where I'm going wrong.

Your help is greatly appreciated.

Stephen

http://fp.digitalinternet.co.uk

[Nettbrygga]

Hello,

The CSS inside the media brackets seems fine (if you have the right path to the image).
Is the problem that the smaller image never even shows on smaller screens?

If you would like to target a typical phone screen for instance, I would try swapping out the media query with:

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

Since it refers to the width of the viewport. I think this should work, if I understood your problem correctly.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[StephenD]

Hi,

Thanks for your reply and suggestion.

I tried changing the max-width to 800px but it didn't work.

Yes, you have read the question correctly - the smaller image never shows on smaller screens, just the larger image.

I double-checked the path to the image and it's correct.

[Nettbrygga]

Hm ok. Do you have a live link to your site?

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[StephenD]

This reply has been marked as private.

[Nettbrygga]

It's marked as private so I can't see it.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[StephenD]

Here it is again:

Sure - http://fp.digitalinternet.co.uk

I changed the background colour of the header section to black while I'm working on this section. The background colour should be the same as the logo's background.

Initially I used a smaller version of the main logo for the mobile section, but I've changed it to this one and added the URL of this one to the stylesheet - http://fp.digitalinternet.co.uk/wp-content/uploads/2016/11/full-logo-360.png

I've tweaked the CSS today so the site might look a bit weird!

Thanks for your help. I hope it's something simple that I'm just not seeing.

[Nettbrygga]

Ah. I see it now. On the big screen you have:

background: url(http://fp.digitalinternet.co.uk/wp-content/uploads/2016/12/cropped-fwa-logo-1070x178.png) no-repeat !important;

With the !important after it will override the background property for the smaller screen. Either remove it or add !important to the small screen as well.

I did the following:

@media only screen and (max-width: 767px)
.header-image .site-title a {
    background: url(fwa-logo-760.jpg) no-repeat !important;
}

Can't find your background image though, so check your path. I double checked with another path and this works fine.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Or. This might be a pathfix:

url('/fwa-logo-760.jpg') no-repeat !important

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[StephenD]

Hi Nettbrygga,

Thank you so much for your help. Your solution worked and I'm finally happy with the way the site looks on a smartphone so I can pass it over to the client for a final checkover.

Thank you once again.

Stephen

[Author]

Posts