Move image based on width

Support
#1

Hi,

I am trying to slide my image across based on the width of the box.
Possible to sort out Parameters based on width and have the size enterpolate between them?

Please find attached screenshots at different widths to help show what i mean

Take not how it slowly disappears out of frame to Tablet mode, But then is fine the first mobile mode and then needs readjusting again.
Computer

Laptop

Tablet

Mobile

Smaller

#2

Hello @MolemanProductions,

Thank you for the very detailed post information. To resolve this, you will need to change the size or position of the background image in your column. Click each column and find the “Customize” tab for you to insert this inline css style:

@media(max-width: 979px){
  $el {
    background-size: 100%;
    background-position: center right;
  }
}

Feel free to adjust the size and position when it is necessary and that will suit best for you.

#3

Hi RueNel,

Thanks for your help.
This makes sense, unfortunately this doesn’t seem to be working for me.
(Would my pre-existing controls be cancelling this out)

#4

Hello @MolemanProductions,

The code given will override the size and position of the background image in smaller screens. The settings in the pre existing controls will be applied in desktop screens only.

Please have the code updated and use this instead:

@media(max-width: 979px){
  $el .x-bg-layer-lower-image{
    background-size: 120% !important;
    background-position: 30% auto  !important;
  }
}

Hope this helps.

#5

Perfect
Thankyou :sparkles: for all your help.
Until next time :smiley:

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.