Help with changing the size of a background lower layer <img/> Element on a mobile device please!

[core365]

Hi, I’m designing a site and on one of the sections on a page I’ve used an image for the Background Lower Layer, using <img/> Element and it looks fine until you view it on a mobile and then the image is way too big! I’ve tried to use CSS to alter this, but nothing is working! I know how to use CSS to change the size of a ‘Background Image’, but I want to use <img/> Element as I can assign Alt Text to it.

With the Background Image I just change the background-size: with CSS for the media size required, but for the <img/> Element it uses object-fit: instead and I don’t know I need to do so I can change the size with a % if that’s possible!

This is all I’ve got so far, as nothing else I’ve done works!

    @media (min-width: 0px) and (max-width: 480px) {
    .home-page-valuation-header-image .x-bg .x-bg-layer-lower-img img {

I’d really appreciate any help you can give me!

I’ll put the URL in a secure note as it’s being built on a temp link, but here’s a screen grab of the image I’m referring to that’s on the Home page.

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in!

Please use a code something like this:

 @media (min-width: 0px) and (max-width: 480px) {
    .home-page-valuation-header-image .x-bg .x-bg-layer-lower-img img {
       /* your styling here */
    }
} 

To better understand how the object-fit property works, you can check this out first:

• https://www.w3schools.com/css/css3_object-fit.asp

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[core365]

Hi @ruenel,

Ah, so I’m guessing you have less control with the sizing for the ’ Element’ compared to the ‘Background Image’, as none of the object-fit: options are what I’m after for the mobile view, as I need to really be able to change the % value of the size.

Thanks for your help!

[marc_a]

Hi @core365,

You’re welcome! If you have any other concerns or clarifications, regarding our theme features, feel free to open up a new thread.

Thank you.