Product variations cut off on mobile + remove product nav arrows

[Kyle – SUPPORT]

I’m not much of a book reader, but I use this site: http://css-tricks.com/

– Kyle

[lobsterass]

Hi Kyle!

Sorry for bugging you about this again, but since I just updated theme and all plugins, my main product image is too small and it’s variations are cut off again – even though the CSS you gave me is present. Please check a product like this one from a phone. It looks like in the attached image.

Is it some new issue related to the updated WooCommerce perhaps?
How do I solve it?

<3

A

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Your CSS in missing the media query? (see screenshot)

Like I said in a previous post it should be:

@media only screen and (min-width: 769px) { 
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}
}

– Kyle

[lobsterass]

Ah! Thank you sweetie!

I don’t understand it though. I did have that code in my CSS and I had checked it for errors too. I put it in the top now. Anyway, now it works. Thanx to YOU, Kyle!

<3

Angela

[Kyle – SUPPORT]

You do have it in (see screenshot)

You’ll need to remove it otherwise your top one wont work

– Kyle

Attachments:

You must be logged in to view attached files.

[lobsterass]

Hmm…I don’t get it. I put this in the end now (+verified css) and it looks like everything works. Am I missing something? Confused! 😀

@media only screen and (min-width: 769px) {
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}
}
@media only screen and (max-width: 768px) {
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -70px!important;
}
}

[Kyle – SUPPORT]

No looks fine 🙂

– Kyle

[lobsterass]

Cool! Thank you. 🙂

[Kyle – SUPPORT]

No problem 🙂