Docs

[stevec114]

Hello!

While I have found many answers here in the support center this issue hasn’t been mentioned yet that I know of.

I am having several issues with 3 buttons at different resolutions:
1. The buttons will overlap in certain screen sizes, screenshot attached. I have played around with padding and margin settings but nothing seems to fix this. I have it set as a 3 column row with a button in each column.
2. Sometimes the third column/button will wrap down to a second row but only on larger resolutions. Weird! (another screenshot attached)

The width of the buttons as is matches the design specs, ideally I would like to keep the sizing and fix the responsive issues.

Any ideas? The site is http://wwwnewtest.revolutionehr.com

Thanks!

[Thai]

Hi There,

To fix this issue, please add the following CSS:

@media (max-width: 990px) and (min-width: 768px){
    .practice-type-button {
        width: 100%;
        font-size: 22px !important;
    }
}

Hope it helps 🙂

[stevec114]

Thanks! That does help with issue #1. Still seeing issue #2 where the last button wraps to a new row at larger screen sizes. It seems to wrap with a 1225px or wider screen.

Any thoughts?

[Friech]

Hi There,

That is weird, I can not replicate the issue even on a resolution lower than 1225px. Try to set your practice-type-button width to 96% instead of a static 250px.

Thanks.

[stevec114]

Thanks, with a bit more troubleshooting the issue seems to be limited to Safari. Setting the width to a % seemed to do the trick so thank you for your help!

[Joao]

You are welcome, let us know if you need help with anything else.

Joao

[Author]

Posts