front page image on mobile

hi all 

im badly in need of some help - I have an image on my site that looks great on desktop but looks terrible on mobile due to the image just resizing to a smaller image.

I have made another image that I want to show when people log in on a mobile device which I have made to be the right size and dimensions for mobile but when I have tried the code available online to show a different image on mobile it just won't work for me - im not sure if im doing it wrong or I have loaded the initial desktop image wrong.

the main image on the site is a scrolling banner or 3 images with the 2nd 2 being deleted so it just shows one.

if any one can offer any help I would be very grateful.

thanks

sorted - thank you

@optical_snapper What did you do to sort it? I have the same problem.

Hi 

I used the code below -- you need to get an add-on for chrome (Squarespace id finder) to allow you to find the section id to be put in where the bold text is in the css below.

On the page you will need to add 2 images in 2 separate sections

1 - for the desktop image 

2 - for the mobile image

once you edit the section id in the code below then copy and paste the code below in DESIGN / CUSTOM CSS (don't for get to save once added)

IF YOU GET STUCK FIRE ME OVER A LINK TO THE PAGE AND ILL WRITE YA CODE FOR YA

//VARIABLES//

@mobile:  ~"only screen and (max-width: 640px)";

@desktop: ~"only screen and (min-width: 760px)";

//hide mobile section on desktop//

@media @mobile {section[YOUR DATA GOES HERE"]{display:none!important;}}

//hide desktop section on mobile//

@media @desktop {section[YOUR DATA GOES HERE"]{display:none!important;}}