Jump to content

How to do a @mediaquery to resize images for mobile?

Recommended Posts

Site URL: https://shabbaskitchen.com/pantry-staples

Hello - So after searching through how to inject custom CSS into web pages, I have ran into an problem I need some help solving. I also added a screenshot below detailing the issue and includes the collection and block #s.

 

Below I have a CSS media query code that does work for this website page, changing the p font color to red for mobile (<641px devices). So I have the foundation that I believe the final solution will fit into.

#collection-5fb81f0d2aa5ca06b9d36e10 {   
  /*only applies to the "pantry-staples" page on this site using this collection # */
  @media screen and (max-device-width: 641px) {
 p {
    color:red;
  } 
}
}

 

However, if you open the page on mobile you will see that the images are MASSIVE and I would like to scale them down in this same media query. I can't seem to find out how to apply CSS to just the image <div> or container that the images are in? Maybe I can just use the css "class" that contains the image section? That didn't seem to work for me in my attempts.

In short - I would like for the image section of this page https://shabbaskitchen.com/pantry-staples to resize for mobile to be more viewable and proportionate. I could not find a way to apply CSS to that section in my first attempts. 

 

Any help welcome. Thanks!!

Pantry Staples — Shabba's Kitchen - Google Chrome .png

Link to comment
  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Home > Design > Custom CSS

/* resize mobile images */
@media screen and (max-width:767px) {
div#page-section-5fb82030c3e9d171eb16df7b img {
    width: 50%;
    margin: 0 auto !important;
    display: block;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.