In Squarespace How to change position of banner image - html

Question

I want the position of the banner image to change on smaller screens - max-width 414px. I want to show the product (a building) which is on the far right of the image. On wider screens the building appears.
I've made it work in the developer tool by changing the position in the style : left:-1077.383px; .
Here is the code where the banner is located (with the adjusted left position). I'm having a difficult time display the code block, so I hope these will suffice:
Screenshot of code
view-source:http://digitalponddesign.com/utestua/utestua.html
In my media query, how do I target this element so I can adjust the left position on screens smaller than 414px.
I have targeted the image-container content-fill and first classes, to no avail :(
How can I target this element in my media query to make this work)
I have created a media query:
<style>
#media only screen and(max-width:414px) {
/* not working */
.image-container {
left: -1077.383px;
}
}
</style>
The website is https://utestua.no/
Thanks in advance :)

Answer 1

Squarespace allows you to set the focal point of an image so that, as screen and containing-element sizes change, a specific part of the image can remain in view.
In the place where you add the image, you will see a small circle that defaults to the middle of the image. That circle can be dragged around. In your case, drag it to the area with the building (though you'll probably want to keep it vertically centered, you can play with it a bit until you get it where you want it).
If, however, you are sure you want to leave the focal point in the middle but override the position values via CSS, then you could use the following, which will keep the image positioned so that the right side is always visible:
.image-container[data-url-id='top'] img {
position: absolute !important;
right: 0 !important;
left: auto !important;
}