Jump to content

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

Recommended Posts

Posted

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

  • 2 weeks later...
  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.