Title: image help
Last modified: September 1, 2016

---

# image help

 *  [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/image-help-9/)
 * I would like to have my main product images on desktops and laptops display a
   little larger than on the responsive viewport for my site.
    I am using the following
   media queries for this but for some reason, when I use them, it messes up the
   layout of my shopping cart page. Could someone please tell me how to achieve 
   this. Thanks,
 * [@media](https://wordpress.org/support/users/media/) (min-width: 900px) {
    img.
   attachment-shop_single.size-shop_single.wp-post-image { height: 400px; max-width:
   400px; display: block; }
 * [@media](https://wordpress.org/support/users/media/) (max-width: 768px) {
    img.
   attachment-shop_single.size-shop_single.wp-post-image { height: 275px; max-width:
   275px; display: block; }
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Patrick Rauland](https://wordpress.org/support/users/bftrick/)
 * (@bftrick)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/image-help-9/#post-7475438)
 * Hey there,
 * The CSS you have to write will depend on your theme. One of the best things about
   CSS is that the styles _cascade_ down – meaning that you don’t have to redeclare
   styles.
 * For example the `display` property should already be handled by your theme. You
   should only have to edit the `height` & `max-width`. I wouldn’t redeclare it 
   in your custom css that you’re adding.
 * There could also be a container around the image that’s wrapping it – or trying
   to wrap it and if there are two elements next to each other and one is too big
   it could make the next element drop down to a new line. I suspect something like
   this is happening with your theme.
 * Have you heard of the [Chrome Element Inspector](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en)?
   You can you use this to fiddle with CSS live in the browser which is much easier
   to see an immediate effect. I recommend starting here and seeing exactly which
   rules to what.
 * I hope that helps! 🙂
 *  Thread Starter [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/image-help-9/#post-7475495)
 * Thanks for your reply!
    I am actually using the inspector in chrome and it is
   very helpful..
 * do you know what file I would look in to see the styles for my images? I looked
   in the themes style sheet and did not see it.
 * Thanks!
 *  [Patrick Rauland](https://wordpress.org/support/users/bftrick/)
 * (@bftrick)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/image-help-9/#post-7475496)
 * The chrome inspector can actually help you with that too!
 * When you’re looking at styles in the inspector at the top right of each selector
   it will tell you where it’s coming from including the file name and line number.
   🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘image help’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Patrick Rauland](https://wordpress.org/support/users/bftrick/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/image-help-9/#post-7475496)
 * Status: not resolved