Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Social media buttons floated right, grey background showing on vertical iPad

Home Forums Support Social media buttons floated right, grey background showing on vertical iPad

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #372574
    Mikko

    Hi!

    Thanks for an awesome theme! I’m really happy how my culture magazine turned out:
    https://mihku.fi/tallennus-vanhasta-suomesta/

    I have a very exotic problem, and I don’t know where else to ask!

    I found a way to place a small text logo and AddToAny social media buttons after entry-header with this code snippet:

    add_action( 'generate_after_entry_header','paluulinkki' );  
    function paluulinkki() { ?>
    	<?php if ( in_category(Ihmettele) && is_single() ) : ?>
    	<a class="ihmettele-paluulinkki" href="https://mihku.fi/ihmettele/">Ihmettele</a>
    	<?php endif; ?>
    	  
    	<?php if ( in_category(Ihmettele) && is_single() ) : ?>
    	<div class="a2a_kit a2a_kit_size_29 a2a_default_style omanappi">
        <a class="a2a_button_facebook"></a>
        <a class="a2a_button_twitter"></a>
        <a class="a2a_button_whatsapp"></a>
    	</div>
    	<?php endif; ?>
    <?php }

    I’m styling the buttons like this:

    @media only screen and (min-width: 887px) {
    /* This works fine! */
    .omanappi {
    	float: right;
    	margin-right: -2px;
    	margin-top: -31px;
    }
    }
    @media only screen and (min-width: 590px) and (max-width: 768px) {
    .omanappi {
    	/* Bug on vertical iPad: gray background shows on the right */
    	float: right;
    	margin-right: -2px;
    	margin-top: -31px;
    }
    }
    @media only screen and (max-width: 589px) , only screen and (min-width: 769px) and (max-width: 886px) {
    .omanappi {
    	/* Not enough space for the buttons */
    	display:none;
    }
    }

    For some reason, on vertical iPad or horizontal Android-phone, the gray background shows on the right. It doesn’t happen on WordPress tablet preview.

    Hmm, I don’t know if I’m able to describle the problem adequately, but perhaps if you take a look at the site you will see what I’m talking about.

    GP Premium 1.4.3
    #373179
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can show me a screenshot of what you’re seeing?

    Let me know 🙂

    #373282
    Mikko

    Hi! Yes. The problem only shows on mobile, at least on my horizontal Android Phone and vertical iPad.

    When you scroll to the right, the gray background shows, like this:

    Horizontal Android phone

    #373386
    Leo
    Staff
    Customer Support

    Not sure if I’m missing something but that’s just the body background?

    It’s actually in desktop mode too: https://s30.postimg.org/dpi6kax69/2017-08-25_0855.png

    Let us know.

    #373418
    Mikko

    Yes it is!

    But the body background is not supposed to show at all when the screen is 768px wide or less, the article is supposed to fill the whole area.

    And that’s the way it works on mobile without the right-floated buttons. For some reason, floating the buttons right or positioning them there in other ways makes the gray background visible close to the buttons.

    The buttons don’t have that weird behavior on my laptop. Even with the right-floated buttons, the article fills the whole area when the browser’s width is is 768px or less. So it’s just a mobile bug.

    #373423
    Mikko

    Donated $15 because I’m happy that this is the very last technical problem I’m facing with the blog. 🙂 Thanks for the help, guys!

    Even a hackish solution would be ok here, perhaps some CSS to counteract that weird visible body thing.

    #373487
    Mikko

    I found a fix!

    There was an invisible AddToAny-generated element that was taking space, for some reason it only broke things on mobile. A simple fix:

    .a2a_label {
    	display: none;
    }
    #373489
    Mikko

    Marked as resolved.

    #373554
    Leo
    Staff
    Customer Support

    Awesome! Glad you found a solution.

    We really appreciate the donation 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.