Community Forums › Forums › Archived Forums › General Discussion › responsive issues with product and cart page in woocommerce
- This topic has 13 replies, 3 voices, and was last updated 9 years, 6 months ago by Lorraine.
-
AuthorPosts
-
September 27, 2014 at 9:20 am #125945deuvyMember
Hi,
http://artandbooksworld.com
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.comSeptember 27, 2014 at 9:22 am #125946LorraineParticipantHave you installed Genesis Woo-Connect?
September 27, 2014 at 10:05 am #125951deuvyMemberyes it is installed.
September 27, 2014 at 10:25 am #125953DTHkellyMemberI don't know if this will help with your media queries issue, but take a look at:
https://wordpress.org/plugins/genesis-style-trump/September 27, 2014 at 10:49 am #125956deuvyMember@kellylise.
I installed that plugin but don't see that it's done anything at this point. thanksSeptember 28, 2014 at 3:57 am #126043LorraineParticipantI assume that you haven't altered any CSS that may be picked up in the cart.
September 28, 2014 at 9:24 am #126054deuvyMemberI have only altered the color. Nothing other than that.
September 29, 2014 at 2:17 am #126119LorraineParticipantHaving 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...
September 29, 2014 at 10:58 am #126175deuvyMemberThx @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
September 29, 2014 at 11:17 am #126176LorraineParticipantHiya, 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) {
September 29, 2014 at 11:52 am #126182deuvyMemberI actually created a custom css so I make all the changes there. So I guess I just copy and paste with the adjustment then?
September 29, 2014 at 11:48 pm #126222LorraineParticipantI 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%; } }
September 30, 2014 at 9:36 am #126305deuvyMemberThat 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
October 2, 2014 at 9:17 am #126549LorraineParticipantApologies, 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.