Jump to content

Resizing images at mobile breakpoints & forcing a specific page layout

Go to solution Solved by Beyondspace,

Recommended Posts

Hi!
 

I recently redesigned my website and added images from my mobile app onto the site so that users can see how it works.

Unfortunately, I've found that the built in responsive-layout for my site doesn't play well with the reformatted design.  I've tried adding mobile breakpoints and re-aligning elements using CSS to get the mobile layout how I'd like, but there are a few places where I can't seem to adjust images or layouts.

I know this is an incredibly talented community and I'm hoping someone can offer some advice

A few specifics that I'm struggling with:

  • I have an image in my 'hero' area which doesn't resize at mobile breakpoints and instead shows up as a tiny tiny image on mobile (screenshots attached)
    • Does anyone know whether it is possible to keep the image at a more readable size or maybe make it scroll behind the text/buttons?
    • Note: I've tried variations of the following CSS, but it doesn't seem to impact the image
      • @media screen and (max-width:640px) {

         #yui_3_17_2_1_1672111932636_71 { 
            
        width: 60% !important; 
            height: 100% !important; 
        margin: 0 auto;
        } }

  • In the 'body' of my page, I have an alternating side layout with mobile phone images and descriptions.  These appear in the layout I want on desktop devices, but after mobile breakpoints the images get oddly cut off and don't align how I'd like - specifically one of the images at the top of the section gets slid in at the bottom of the stack on mobile. I tried hiding this image, but then end up with a big blank spot on mobile (screenshot attached of where the image would appear but now just shows the blank area)

Thank you!

Taly

Screen Shot 2022-12-26 at 10.20.09 PM.png

Screen Shot 2022-12-26 at 10.20.30 PM.png

image.png

Screen Shot 2022-12-26 at 10.24.59 PM.png

image.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution
9 hours ago, Taly said:

Hi!
 

I recently redesigned my website and added images from my mobile app onto the site so that users can see how it works.

Unfortunately, I've found that the built in responsive-layout for my site doesn't play well with the reformatted design.  I've tried adding mobile breakpoints and re-aligning elements using CSS to get the mobile layout how I'd like, but there are a few places where I can't seem to adjust images or layouts.

I know this is an incredibly talented community and I'm hoping someone can offer some advice

A few specifics that I'm struggling with:

  • I have an image in my 'hero' area which doesn't resize at mobile breakpoints and instead shows up as a tiny tiny image on mobile (screenshots attached)
    • Does anyone know whether it is possible to keep the image at a more readable size or maybe make it scroll behind the text/buttons?
    • Note: I've tried variations of the following CSS, but it doesn't seem to impact the image
      • @media screen and (max-width:640px) {

         #yui_3_17_2_1_1672111932636_71 { 
            
        width: 60% !important; 
            height: 100% !important; 
        margin: 0 auto;
        } }

  • In the 'body' of my page, I have an alternating side layout with mobile phone images and descriptions.  These appear in the layout I want on desktop devices, but after mobile breakpoints the images get oddly cut off and don't align how I'd like - specifically one of the images at the top of the section gets slid in at the bottom of the stack on mobile. I tried hiding this image, but then end up with a big blank spot on mobile (screenshot attached of where the image would appear but now just shows the blank area)

Thank you!

Taly

Screen Shot 2022-12-26 at 10.20.09 PM.png

Screen Shot 2022-12-26 at 10.20.30 PM.png

image.png

Screen Shot 2022-12-26 at 10.24.59 PM.png

image.png

Have you tried the fluid engine which allow you to change layout based on your device?

https://recordit.co/nsyvNN1PbL

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

Hi!  Thank you for the suggestion, this was such a simple fix!  

I've used Squarespace for years and had no idea that this was possible.  Oddly, most of the articles on the internet about making custom changes to your site do not note that it is possible to edit the mobile version directly in Squarespace without resorting to custom CSS.

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.