Docs

[Fulgent]

Hi,

My site is nearly finished.

However some parts of it look nasty on a mobile phone.

I believe it is because none of the text is responsive so is making things misbehave.

Ive read about @media tags – is this what i need?

1. All of the contact boxes at the bottom of each page are squished up on mobile phones – and the 2 buttons dont align anymore (they have margins set on them so they display side by side on the desktop version with a gap between the 2)

2. http://www.fulgent.co.uk/Saas-Hosting – the feature box icons under “Excellent Service” are badly disfigured left and right on my Samsung Galaxy S7, they do show centered on an Iphone 6 plus mind

My site is 90% mobile friendly, would you mind helping me push it over the 100% line please?

Thanks

[Fulgent]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! For the responsive text you can use Responsive Text shortcode.

1. Give your content section a class for example contact-section and add the following code in your Customizer:

@media screen and (max-width: 500px) {
.contact-section .x-column.x-sm.x-1-1 {
    padding: 20px !important;
}
.contact-section .x-btn {
    width: 100% !important;
    margin: 5px 0 !important;
}
}

2. To fix the “Excellent Service” section add the following code in your Customizer:

@media screen and (max-width: 767px) {
#x-section-3 .x-container.marginless-columns .x-column[class*="x-"] {
    display: block !important;
    width: 23% !important;
    float: left !important;
    margin: 0 1% !important;
}
#x-section-3 .x-container {
    padding: 0 !important;
}
}

@media screen and (max-width: 479px) {
#x-section-3 .x-container.marginless-columns .x-column[class*="x-"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Fulgent]

Excellent on 1 and 2.

Ill have a play with the responsive text shortcode in the morning.

Great support.

Thankyou 🙂

[Nico]

Happy to hear that.

Feel free to let us know how it goes.

THanks. Have a great day! 🙂

[Fulgent]

Responsive text worked lovely.

Thanks

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts