responsive issues with product and cart page in woocommerce

[deuvy]

Hi,
As of last month, this is the first site I've ever worked on and it's going fairly well. I am using the Outreach Pro theme by Genesis. I occasionally run into some problems and through some research can usually find a solution. What is happening now is that I finally added the woocommerce pages to the main custom menu and have attempted a trial purchase. The problem is that on the product page, when viewing through a cell phone, the product prices overlap each other as well as the add to cart buttons. As well on the cart page, half of the page is cut off and can't be seen. It's odd though, because when i turn the phone sideways, everything displays properly. One more minor issue is that on the cell phone, some of the products don't display upright. Please offer some assistance on how to fix this please.
Thank you. The site is artandbooksworld.com

http://artandbooksworld.com

[Lorraine]

Have you installed Genesis Woo-Connect?

[deuvy]

yes it is installed.

[DTHkelly]

I don't know if this will help with your media queries issue, but take a look at:
https://wordpress.org/plugins/genesis-style-trump/

[deuvy]

@kellylise.
I installed that plugin but don't see that it's done anything at this point. thanks

[Lorraine]

I assume that you haven't altered any CSS that may be picked up in the cart.

[deuvy]

I have only altered the color. Nothing other than that.

[Lorraine]

Having a look you have 2 columns displaying in the cart under 400px. It may be better to set a media query of 100% for the product for a single column or adjust the CSS so that the padding and font is slightly smaller to stop the overflow.

.woocommerce.product-columns-3 ul.products li.product, .woocommerce-page.product-columns-3 ul.products li.product {
width: 100%;
}

I have found on mobiles that rendering is different at times depending on how you refresh.

Just an observation, you have the cart buttons at different height when you have a line of text that goes over
. I tend to set a height to the text i.e.

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
height: 50px;
}

I'm not sure of this is the best fix but it it's what I would do...

[deuvy]

Thx @Lorraine. It looks better on the mobile but the only issue I have with the product page is that on the computer it looks huge which makes it take alot longer to get down the page if somebody were to view it. I was wondering if there was a way that I could change it so that it remains small on the computer where 3 or 4 are displayed beside each other, but in the responsive only make the change to the 100%. Also the cart page is also another issue where only half of it is exposed cutting off a button and some information. Thanks again

[Lorraine]

Hiya, you just need to set this in the media queries at the bottom - if there is a setting for under 400px approx pop it in there. Just delete it from the main css and the default will come back. If you are not sure about the CSS take a copy of the style sheet before you tinker.

.woocommerce.product-columns-3 ul.products li.product, .woocommerce-page.product-columns-3 ul.products li.product {
width: 100%;
}

you'll find it near the bottom - place inside soemthing like this -

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

[deuvy]

I actually created a custom css so I make all the changes there. So I guess I just copy and paste with the adjustment then?

[Lorraine]

I don't use the custom CSS so I'm not sure how the media queries are handled. Try placing what's below at the bottom of the code.

@media only screen and (max-width: 480px) {
              .woocommerce.product-columns-3 ul.products li.product, .woocommerce-page.product-columns-3 ul.products li.product {
width: 100%;
              }
}

[deuvy]

That actually works great for the product display, thank you. The only issue left is when I go through the purchase process and land on the cart page it only shows half of the page on the mobile. @Lorraine

[Lorraine]

Apologies, I get really poor mobile reception and gave up yesterday, I'll try again when I have wifi rather than hard wired as I am in the day. I', UK so not too long.

[Author]

Posts