- This topic has 15 replies, 2 voices, and was last updated 5 years, 7 months ago by danny weiss.
Tagged: product image gallery
- AuthorPosts
- February 7, 2019 at 5:38 pm #12000
danny weissParticipantHi,
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?February 7, 2019 at 6:00 pm #12002
Andrew MisplonKeymasterHi 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.
February 8, 2019 at 6:26 pm #12016
danny weissParticipantI 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.February 9, 2019 at 10:38 am #12021
danny weissParticipantAlso 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.February 9, 2019 at 10:42 am #12022
Andrew MisplonKeymasterThanks.
Which gateway is handling the credit card option?
February 9, 2019 at 1:37 pm #12024
danny weissParticipantThis reply has been marked as private.February 9, 2019 at 1:45 pm #12025
Andrew MisplonKeymasterThanks for the info. I’ll send a fix tomorrow. Appreciate the feedback 🙂
February 9, 2019 at 1:54 pm #12026
danny weissParticipantThanks Andrew, have a great weekend 🙂
February 11, 2019 at 7:39 pm #12043
Andrew MisplonKeymasterHi 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; } }
February 12, 2019 at 7:17 pm #12066
danny weissParticipantThe 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…February 13, 2019 at 6:47 pm #12071
Andrew MisplonKeymasterHi 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.
February 15, 2019 at 8:32 pm #12099
danny weissParticipantHey 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?
February 15, 2019 at 8:35 pm #12100
Andrew MisplonKeymasterThanks 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.
February 17, 2019 at 9:36 am #12106
danny weissParticipantSo, 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.February 17, 2019 at 9:49 am #12107
Andrew MisplonKeymasterThanks 🙂
Here are two products with galleries:
Does the issue persist on your end when viewing the above galleries?
- AuthorPosts
You must be logged in to reply to this topic.