Jump to content

front page image on mobile

Recommended Posts

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

 

 

Edited by optical_snapper
Link to comment
  • Replies 3
  • Views 110
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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;}}

 

 

 

 

Edited by optical_snapper
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.