X-Cart forums

[goldensheep]

Hi,

I'm using a background image in the header and I'm having trouble getting it to show properly on both PC and Mobile.

I firstly tried it as a block which worked well but had overflow on the mobile when viewed in landscape.

I then tried sizing it using 'contain'. That worked great on the mobile but was then was stretched on the PC.

I then tried adding width / height sizes which looks great on the PC but far too big on the mobile.

Can anyone help me to understand the best way to do this please?

BTW my css is sketchy, but I'm rapidly learning.

I'm using the light_responsive template.

Thank you

[qualiteam]

You can use @media queries to target different devices in your CSS rules:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

[goldensheep]

Oh crikey....I've had a look and I have no idea how to do that.

Can anyone guide me step by step?

Thank you

Sherri

[goldensheep]

I’ve got myself into a bit of a mess with endlessly changing sizes and code to try and make it work with all media sizes - and I seriously need some help now.

In addition to my first attempts, I have now tried using @media and different images for different screens sizes but still it only worked for some and not for others.

I have since removed all of that and gone back to the start by trying the image I want in the standard logo position but now its not scaling down for smaller devices, and I seem to have accidently done something that has moved the minicart/sign in/search bar half way down the header for where it should be at the top of the screen.
I seem to have got myself into a bit of a muddle and I need a developer or someone who knows what I've done, to help me resolve this. I'm happy to engane someone on a professional level.

I am beginning to lose the will to live as I have been struggling with this for a couple of weeks now and I seem to be getting no-where.

[pauldodman]

Hi Sherri

Yes, you've certainly gone beyond basic css and for this you need to be a lot further up a pretty steep learning curve I'm afraid.

You have my details - let me know if I can help!

[goldensheep]

Yes please Paul,

I'll email you.

Sherri