Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


jdobsond

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...