- This topic has 15 replies, 2 voices, and was last updated 5 years, 9 months ago by
.
- Posts
Hi,
After the last theme updates, I noticed that on the Checkout page, the Paypal logo is out of place. Here’s a screenshot from my website: https://ibb.co/68Xrfcd
Is it possible to fix this?Hi Danny
The layout assumes the column is limited in size. Please, see a screenshot of the demo here. The column is around 47% until the mobile breakpoints kick in. Any idea how yours is 100%? The credit card logos aren’t ideal, if you send a link I can help with those.
I use a multiple step checkout plugin which increases the width of that page.
From the demo you sent I can see that the Paypal image is placed correctly on my website. The issue seems to be with the image showed by the card payment method.Also look at how the checkout page shows on mobile: https://ibb.co/XbXGJKs (it’s the default checkout, with that plugin disabled).
The Paypal image overlaps some of the text. It would probably be best if we could push it below, this way it won’t be a problem anymore.Hi Danny
For desktop you can add to Custom CSS:
.woocommerce #payment .payment_methods li.payment_method_paylike img { float: right; margin-left: 5px; padding-left: 0; }For mobile, it isn’t easy. Just as with Stripe, there isn’t a wrapper around the icons so there doesn’t appear to be a simple way to drop them onto the next line.
For PayPal on mobile we could add:
@media (max-width: 480px) { .woocommerce #payment .payment_methods li img:only-of-type { display: block; padding-top: 5px; position: static; } }For Paylike on mobile we could add:
@media (max-width: 480px) { .woocommerce #payment .payment_methods li.payment_method_paylike img { display: inline-block; float: none; vertical-align: middle; } }Or, we could hide them both on mobile:
@media (max-width: 480px) { .woocommerce #payment .payment_methods li img:only-of-type, .woocommerce #payment .payment_methods li.payment_method_paylike img { display: none; } }The first code aligns both payment logos to the right, which is great. And on mobile I think I’ll take your advice and just hide them using the last code.
Both codes work great, thank you 🙂Another issue I noticed…
I use this code to display products on 2 columns for the mobile version of my website:@media (max-width: 768px) { ul.products li.product{ width: 48%!important; float: left!important; clear: both; } ul.products li.product:nth-child(2n) { clear: none; float: right; } }And it works fine, except for the Related Products section displayed at the bottom of any product page. Here’s how it looks like: https://ibb.co/XzgddxJ
Maybe you could give me an idea on how to split those product images…Hi Danny
You can try using the following:
@media (max-width: 480px) { .woocommerce .product .woocommerce-tabs~.products .product { margin-right: 3.5%; width: 48.25%; } .woocommerce .product .woocommerce-tabs~.products .product:nth-of-type(2n+2) { margin-right: 0; } }In conjunction with the following update: https://purothemes.com/wp-content/uploads/2019/02/polestar.1.3.4-rc.1.zip
To update, switch to any other theme, delete Polestar and then install the ZIP from Appearance > Themes > Add New > Upload Theme.
My Custom CSS above should replace yours for this change.
Hey Andrew,
Sorry for the late reply. I updated the theme to the version you provided and also added your code, however, while it fixed the issue on the Related Products section, it displayed the products on the Shop page on only one row (instead of two), which on a mobile screen is not great. So I added both codes, mine and yours, and now everything is perfect. Thank you again, you are truly awesome!!
PS: I discovered some more issues with the theme, should I post them here as well?
Thanks Danny. I didn’t realize you wanted two columns on mobile for the regular shop page. Nicely done on customizing that to your requirements.
Which ever is easier, you can let me know here. Thanks.
So, another problem that I discovered is that after entering the image gallery on a product page, when I exit the gallery, I’m automatically teleported to the bottom of that page. You can imagine that I have to scroll a lot to go back up, especially if it’s a longer product description with reviews and stuff. I use the default product image gallery, without an addon plugin.
I couldn’t reproduce this on the Polestar demo website, because I couldn’t access product image galleries there.Thanks 🙂
Here are two products with galleries:
Does the issue persist on your end when viewing the above galleries?
You must be logged in to reply to this topic.