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

[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.

[Tom]

Hi there,

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

Let me know 🙂

[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:

[Leo]

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.

[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.

[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.

[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;
}

[Mikko]

Marked as resolved.

[Leo]

Awesome! Glad you found a solution.

We really appreciate the donation 🙂

[Author]

Posts