Jump to content

Resizing image in mobile view

Recommended Posts

Hello I would like to resize my main image from the website on mobile view so that it shows better.

Currently it's only showing very small part of it, and resizing seems like it's only doable via code. 

Can anyone help?

My website is www.achimflowerstudio.com (pw: Welcome)

Here's a screenshot of my home.

 

Screen Shot 2024-05-01 at 10.36.53 PM.png

Screen Shot 2024-05-01 at 10.36.36 PM.png

Link to comment
  • Replies 1
  • Views 373
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi! 

I suggest you set up a mobile fallback for that purpose. You can have a second section only for mobile so you can adjust the photo specifically for mobile or even choose a different one for smartphones.

1. Duplicate the section
2. switch to mobile view (switch top right)  and adjust the second section for mobile
3. go to your CSS Section ( WEBSITE > PAGES > scroll down WEBSITE TOOLS > CSS) 

4). apply the following CSS
(note: you need your own classes for that ( if you're not familiar with the browser console, install a browser extension called "Squarespace ID finder"
and replace the ID's parts e.g. section[data-section-id="65572d36a73fd670fa413e72"]



@media only screen and (max-width: 840px) { section[data-section-id="65572d36a73fd670fa413e72"]{display:none}}

@media only screen and (min-width: 840px) { section[data-section-id="65572d36a73fd670fa413e72"]{display:none}}


This will get you a result like this:

ElectricJuice_Mobile.png.d68e9586747e167f469f851c30c077f8.pngElectricJuice.thumb.png.534ca8c2aa2419fff9e59dc2b6cd0a2b.png

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

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.