Mobile Responsiveness

Illdy
1

On smaller screens, mobile responsiveness drops. Please see attached image, where half the button label falls off the button.
An iphone 4 was used to view my site: mustardseedlearningcenter.org. Thank you.

2

Hello @silverstars,

Try using this custom CSS code a a temporary solutions:

@media only screen and (max-width: 480px){
#header .bottom-header .header-button-one, #header .bottom-header .header-button-two
width: 100%;
margin: 0;
font-size: 15px;
padding: 0 50px;
}
}

This should do the trick, let me know otherwise.

Regards

3

Thanks but the code didn’t fix the button; instead it interfered with the earlier fix for the contact form, causing it to not go full width. In addition, I have found on both “After School” and “Preschool” pages, the email address is getting cut off. Please see images attached.

Currently, my stylesheet has the following CSS code for earlier fixes:
@media only screen and (max-width: 767px){
#header .bottom-header h2 {
font-size: 40px;
line-height: 1.2;
}}

@media only screen and (max-width: 767px){
#contact-us .section-content .contact-us-box .box-right{
display: block;
}}

.col-sm-4.widget_text{
width: 100% !important;
}

Thank you.

4

Hello,

Use this CSS code to fix the list in the email address:

.markup-format ul, .markup-format ul li{
padding-left: 0;
}

I need to do further investigations with the other issues and will get back to you.

Regards

5

Thanks but the CSS code didn’t fix the issue. Please let me know what you find, thank you!

6

Hello @silverstars,

Can you please provide the website link so I can have a closer look at the issue?

On what device and browser do you get this behaviour?

Best regards

7

Hi,
The website is After School - MSLC and Preschool - MSLC
I used iPhone 4 and Safari app to view the website. Thanks!

8

Hello @silverstars,

There’s not much I can do about this issue since the email address is extremely long.

One thing that I can think about is to decrease the website font until it fits the screen.

Use this CSS code:

@media only screen and (max-width: 480px){
body{
font-size: 12px !important;
}}

Let me know if this did the trick.
Regards