Max-Width Image Scaling Desktop vs. Mobile

[VitalityCBD]

I know there’s an easy way to do with with @media, but i can’t figure it out.
I need the main VITALITY transparent PNG in the top banner of my website to adjust max-width differently on desktop verses mobile.
I want max-width on mobile to be 50% and desktop to be 25%.

Right now i just have this simple inline CSS.
max-width: 25%; text-align: center; display: block; margin-left: auto; margin-right: auto;

Jesse

[Prasant]

Hello @VitalityCBD,

Thanks for asking.

If a section is holding the banner then you can assign a class name under Customize > Setup > Class. Next, you can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .banner-change-max-width {
        max-width: 25%;
    }
}

@media only screen and (min-width: 900px) {
    .banner-change-max-width {
        max-width: 25%;
    }
}

Change class name as per requirement. If you would like to explore CSS and media queries then please take a look at following.

https://www.w3schools.com/css/default.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

[VitalityCBD]

I’m sorry, but that doesn’t appear to have worked.
I’m looking for the image to be 50% max-width on mobile and 25% max-width on desktop.
I added the CSS and add that class you made to the image, but it doesn’t appear to do anything.
I changed it from 25% to 50% and it still didn’t do anything.
I switched it back to 25% for now, so that you can look at what i may be doing wrong.
Thank you for your help.

[VitalityCBD]

and just to clarify, i’m not trying to scale the background image, i’m trying to scale the Vitality Logo transparent PNG file.

[paul.r]

Hi,

Please remove the max-width in your inline css.

It should only be text-align: center; display: block; margin-left: auto; margin-right: auto;

Then change the css code to this.

@media only screen and (min-width: 900px) {
    .banner-change-max-width {
        max-width: 25% !important;
    }
}

@media only screen and (max-width: 600px) {
    .banner-change-max-width {
        max-width:50% !important;
    }
}

Hope that helps.

[VitalityCBD]

Thank you! Perfect!

[paul.r]

You’re welcome!