Woocommerce single product module in responsive view

Beaver Builder
1

Hi there

when my Woocommerce single product module is views in smaller screens the images are too small. any ideas what i need to do to fix>

cheers

Jason

I’ll send my url & login deatils in a private reply

2

[Content Hidden]

3

Hey Jason,

That is actually caused by the custom CSS you’re applying. Check the screenshot below for reference. You’ll want to place that inside a media query so it only applies on large devices. :slight_smile:
http://imgur.com/PJMnsu4

Ben

4

hey thank you Ben, are you able to show me how to place that inside a media query just for large devices.

5

Hey Jason,

All CSS code inside the query below will only apply to devices with 768px viewport width and up.

@media (min-width: 768px) {
  /* CSS code here */
}

Hope this helps!

Ben

6

Hey Ben it helps a lot, thank you for showing me .

Looks good on desktops and mobile now but not so good on screen sizes between the 2

what happen is the images are too big and blurred between 768px and 400px widths…

see image below…

cheers

7

Hi Jason,

Can you upload another screenshot, as the one in your topic above isn’t available.

Thanks,
Danny

8

hows that Danny Boy?

9

Hey Jason,

The problem here is that the image you’re using only has a resolution of 367x367px, so it gets stretched if you view it full width on viewports greater than 367px. Using a higher resolution image there should fix this issue.

Ben

10

Hi Ben
The image size uploaded is 600px x 600px.

But i don’t want the image to be that big on screen sizes 768px 400px

how do I make the the image smaller just for screen sizes 768 x 400

Cheers

11

Hey Jason,

Sorry to say but I don’t really think that’s possible. Do you mind sharing why you wouldn’t want the image to be that big? Is it because of page load speed? You shouldn’t need to worry about that since WP already implemented responsive images using srcset and I can see the WooCommerce images are using it as well. If you haven’t yet, you can read more about it below.
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Ben

12

because the image looks way to big for smaller screens…

the image on desktop shows at 367x367 which is the size i want.

but when you view on smaller screens the image actually gets bigger then 367x367px
which i dont want

13

Gotcha! I was thinking you wanted to change the actual image for smaller viewports. What we can do is we can limit the image so it’s only 367px wide and center align it. Can you try using the CSS snippet below and see if it works for you?

@media (max-width: 767px) {
  .woocommerce .product .images .woocommerce-main-image img {
    width: 367px;
    margin: 0px auto;
  }
}

Ben

14

Hey thanks Ben

i tried the CSS snippet but it doesn’t work. i’ll have a little play now you’ve pointed me in the right direction.

cheers

jason

15

ive sorted it, i used this code below to get it to work… thanks

.woocommerce ul.products li.product a img {
    } 
@media screen and (max-width: 768px)  { .woocommerce ul.products li.product a img {   width: 267px; margin: 0px auto; }  }
16

Weird, not really sure why it didn’t work. But happy to hear you got it sorted! Enjoy! :slight_smile:

Ben