Jump to content

Need to have two different image sections; one for desktop, one for mobile

Recommended Posts

Site URL: https://www.stuffbystink.com

Hi 🙂

Need to find a way to have ONE image show up on desktop only, and then ANOTHER image show up for mobile only.

I want to have this image for desktop:

395454049_Smaller11.thumb.jpg.2c7d4c18842cf2ff0489f4326d2561ef.jpg

and this for mobile:

923159240_phoneheader-01.thumb.png.b80e677b7f0ec282b3613410f28fc03e.png

I currently have this for both (it just looks too small on mobile and doesn't work very well):

2145092577_ScreenShot2022-03-23at4_16_07pm.thumb.png.692cc12facb139e5a01da58495a5b1e1.png

159359085_ScreenShot2022-03-23at4_16_18pm.thumb.png.143ce9fc51de58e089f004984bd188a6.png

 

I'd also love to be abole to add a bit more padding / width on the sides of the desktop image to decrease the image overall size? (but maintain the actual image itself / no crop)

 

Thankyou!!!!

 

Edited by isobeleastwood
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

8 minutes ago, isobeleastwood said:

Site URL: https://www.stuffbystink.com

Hi 🙂

Need to find a way to have ONE image show up on desktop only, and then ANOTHER image show up for mobile only.

I want to have this image for desktop:

395454049_Smaller11.thumb.jpg.2c7d4c18842cf2ff0489f4326d2561ef.jpg

and this for mobile:

923159240_phoneheader-01.thumb.png.b80e677b7f0ec282b3613410f28fc03e.png

I currently have this for both (it just looks too small on mobile and doesn't work very well):

2145092577_ScreenShot2022-03-23at4_16_07pm.thumb.png.692cc12facb139e5a01da58495a5b1e1.png

159359085_ScreenShot2022-03-23at4_16_18pm.thumb.png.143ce9fc51de58e089f004984bd188a6.png

 

I'd also love to be abole to add a bit more padding / width on the sides of the desktop image to decrease the image overall size? (but maintain the actual image itself / no crop)

 

Thankyou!!!!

 

I think we can create 2 sections with different images. After that, using media query to set one section only show on mobile and the another one is always display on mobile.

Reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.