Small Buttons on Mobile & Sidebar Distortion

[snbozek]

Hi, I have 2 issues:

1. Why are the buttons so small in the RevSlider on mobile devices? The text is pretty much illegible. Have had this problem for a while, have cleared my phone’s cache on both Chrome & Safari.

2. In this one blog post, the sidebar is not on the right (as per the settings) but on the bottom instead, with weird formatting. The link for the post was included above. Haven’t noticed this oddity in other posts.

Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Can you try to disable your plugins because there is an error caused by a plugin called popup maker.

And also it seems that the css of your site is messed up.
Let’s do this first test to disable all plugins then let us know so we can check again.

-Rui

[snbozek]

Hi, I disabled them all but not sure what I’m looking for? Enabling the bare minimum…

And what do you mean the CSS is screwed up? Please explain.

[Kyle – SUPPORT]

Hi

For your rev slider buttons you need to use:

<a class="sf-button large gold standard" href="#modal-1" role="button" data-toggle="modal"><span class="text">SHOW ME HOW</span></a>

For the other issue, it seems to be with that post as all the others are fine. You’ve likely added a closing div somewhere in your content that is breaking the layout

– Kyle

[snbozek]

Hi, thanks for the help but that code didn’t make the buttons legible on a mobile device or work on a desktop. See the attached screenshots.

#1 – mobile, horizontal.
#2 – mobile, vertical.
#3 – desktop, the button is cut off. (Safari)

For the blog post, yes I know its the only one affected, which is why it’s so weird. I don’t see any /div in the HTML and I don’t see how the CSS would be touched, this is an older post. I see your autosave in there, I don’t think you say anything out of the ordinary either? What can I do?

Thanks.

Attachments:

You must be logged in to view attached files.

[snbozek]

Ok, blog post fixed! Just need to resolved the RevSlider button sizes. Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Try the code below.

@media only screen and (max-width: 979px){
.tp-button.orange{
padding: 16px 23px 15px!important;
}
}

-Rui