I need the banner image to shift position on smaller screens, specifically those with a max-width of 414px. I want the focus to be on showcasing a specific product (a building) located on the right side of the image. This building should only appear on wider screens.
To achieve this, I adjusted the position using the developer tools by setting left:-1077.383px; in the style.
Below is the code snippet where the banner can be found, complete with the modified left position. I am unable to display the full code block, so I hope the provided links will suffice:
Click here for a screenshot of the code
View the source code at:
I'm struggling to target the element in my media query to adjust the left position for screens smaller than 414px. I have tried targeting the image-container content-fill and first classes without success.
How can I correctly target this element within my media query to make it work?
Here is the media query I created:
<style>
@media only screen and (max-width:414px) {
/* not working */
.image-container {
left: -1077.383px;
}
}
</style>
The website in question is:
Thank you in advance!