Impact Text + Button

[mel71]

Hi – I’ve just added Impact Text + Button to the Page Builder on my Home page, but the text and button aren’t aligned properly. Any way to fix this? http://www.visitwollombi.com.au/

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you add the code below to your custom css option.

.page-id-2  .wpb_button{
margin-top: -7px!important;

}

-Rui

[mel71]

Thanks Rui – that fixed the problem, but now I’ve realised that whole section of Impact Text + Button looks terrible on an iPhone. The text is overlapping, and the button isn’t responsive at all. We receive nearly 40% of visits to our site from mobile devices, so I need to get this sorted out ASAP. Any ideas? Screenshot attached

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Add also the code below to give a margin in the top only in mobile devices.

@media only screen and (max-width: 767px) {
.page-id-2  .wpb_button{
margin-top: 20px!important;

}
}

-Rui

[mel71]

Unfortunately the text is still overlapping (is that a line height issue?), and the button is displaying very narrow with the button text not all within the button, as per the earlier screenshot.

[Rui Guerreiro – SUPPORT]

Hi,

Do you have any custom css? can you provide us admin access.
It was already like that before. Add this code to increase the line heigth.

.page-id-2  .impact-text{
line-height: 30px!important;
}

-Rui

[mel71]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Already added a few css code to fix the mobile display.
Guess now it’s fine.

https://www.dropbox.com/s/r2f9lr76e3es6p0/css_mobile_adjustments.png?dl=0

-Rui

[mel71]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

no problem.
-Rui