Product variations cut off on mobile + remove product nav arrows

[lobsterass]

Hi awesome developers!

I’m back. Sorry;)

I have some issues on my product page:
http://monroedesign.se/kop-vaggdekor/dykare-vaggdekor-brandslackare/

1. My product variations are cut off on mobile. Please see image.
2. Can I make product image on mobile fullwidth?
3. I would like to remove the unclickable nav arrows on product image (makes no sense with no clicking posible).
4. I would like to remove “Ställ en fråga om produkten” (“Ask a question about product”).

Can we do this? 🙂

INFO:
I have resized the product image area with this css from ED:

/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}
The widths must add up to 97%.

[Kyle – SUPPORT]

Hi

You need to put your custom css for the product page in a media query:

/* IMAGE AREA */
.woocommerce div.product div.images {
width: 69%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 28%;
}

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]

Hi!

OK, but that made my product image go back to 1/2 column. I want the image to 807 px wide, like in the attached image. How do I do that?

Also, while I have you on the line, could you please tell me how to remove all the crossed out product info in the bottom?

1. Long product description
2. Information
3. Recension – (this might be a plug in)
4. Ask a question about product
5. Category

I know I have a lot of questions. Sorry, Kyle! But, on the bright side, when I got this one right, I can do all products myself.

Have a great weekend!

<3

Angela

I’m not sure if this has anything to do with this, but I’ll include this info of something I did before:

Fix blurry product image:
Copy /woocommerce/single-product/product-image.php to your child theme (inc structure).
2) Edit line 92(and another place), replacing 562 with the width of image you want 807:
$image = aq_resize( $image_link, 562, NULL, true, false);

[Kyle – SUPPORT]

Hi

1) I’ve just changed the css to the media query and it works fine? Image is still the same size as before

Please confirm

2) Add this:

#product-accordion {
  display: none;
}
.summary .product_meta {
  display: none;
}

– Kyle

[lobsterass]

Hi Kyle!

I’ve added that CSS now and the product image looks good. But my price and product variations disappeared (only in Chrome). And the product descriptions etc are still there. Please see image. I have emptied the cache. Confused!

<3

A

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

Try adding this to your custom css:

.variations_form {
overflow: visible;
}

– Kyle

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

You’ve added the CSS inside this media query:

@media only screen and (max-width: 768px) {

It also looks like you haven’t closed that media query

– Kyle

[lobsterass]

OK…I’m not sure what I should do different? The code in the other thread about shop didn’t work either, so I’ve clearly messed something up in this code:
}
.tp-bannershadow.tp-shadow1 {
bottom: -24px!important;
}
@media only screen and (max-width: 768px) {
}
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -80px!important;
}
.list-best-sellers span.amount { display:none;
}
ul.products li.product .product-details {
float: none;
text-align: center;
}
#product-accordion {
display: none;
}
.summary .product_meta {
display: none;
}
.variations_form {
overflow: visible;
}
.woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {
border-top: none;
}
.posted_in {
display: none;
}
.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
display: none;
}
ul.products li.product .product-details {
width: 100%;
}
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
text-align: center;
}

[lobsterass]

I changed this part back:

}
@media only screen and (max-width: 768px) {
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -80px!important;
}

[Swift Ideas – Ed]

Hi @lobsterass,

Checking this now, but not seeing if there is anything outstanding that you’re looking to change?

If so, let us know exactly and we’ll assist with any extra css.

– Ed

[lobsterass]

I was just wondering how you meant I should close that code? I just solved it temporarily by putting it last.

}
@media only screen and (max-width: 768px) {
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -80px!important;
}

[Kyle – SUPPORT]

Check the attachment, you need to add another } to close the media query

– Kyle

[lobsterass]

Ah!!!! Great. Thank you for teaching me. A really appreciate it.

I’m gonna read a book about CSS. Do you happen to have any suggestions of a good book on this? I wanna be cool like you. 🙂