[Resolved] Paypal logo position bug

  • Author
    Posts
  • #12000

    danny weiss
    Participant

    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?

    #12002

    Andrew Misplon
    Keymaster

    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.

    #12016

    danny weiss
    Participant

    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.

    #12021

    danny weiss
    Participant

    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.

    #12022

    Andrew Misplon
    Keymaster

    Thanks.

    Which gateway is handling the credit card option?

    #12024

    danny weiss
    Participant
    This reply has been marked as private.
    #12025

    Andrew Misplon
    Keymaster

    Thanks for the info. I’ll send a fix tomorrow. Appreciate the feedback 🙂

    #12026

    danny weiss
    Participant

    Thanks Andrew, have a great weekend 🙂

    #12043

    Andrew Misplon
    Keymaster

    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;
    	}
    }
    #12066

    danny weiss
    Participant

    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…

    #12071

    Andrew Misplon
    Keymaster

    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.

    #12099

    danny weiss
    Participant

    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?

    #12100

    Andrew Misplon
    Keymaster

    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.

    #12106

    danny weiss
    Participant

    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.

    #12107

    Andrew Misplon
    Keymaster

    Thanks 🙂

    Here are two products with galleries:

    Logo Collection

    V-Neck T-Shirt

    Does the issue persist on your end when viewing the above galleries?

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

Scroll to top