Resizing images at mobile breakpoints & forcing a specific page layout

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

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!