Mobile Pages Not Formatting Correctly

[Craig]

Hi

I am having a mobile page formatting issue. Most pages look fine on mobile, but a few will not stretch to the full width of the mobile device.

Any idea how to fix this problem?

Example
https://synergywellnessnc.com/contact-us

Thanks

[Sonl Sinha]

Hi,

Your 1 year support for theme has expired. To continue receiving theme updates/access and support for another year kindly subscribe for just $18

Pay via PayPal:

https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E6MFAFM4T6RDL

OR

Pay via Credit Card:

https://sites.fastspring.com/sktthemes/product/singlethemeyearly

Once paid we will again renew your support for 1 year and you will also receive theme updates/access as and when they happen.

Regards,
Chris

[Craig]

I paid the support fee.

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

.entry-content iframe, #cpm_sROrFI { width: 100% !important;}

Regards,
Chris

[Craig]

Thanks for the response…

I added the code to the CSS and cleared the cache in my mobile device, and the pages are still not rendering correctly. When the page first loads it looks correct (full width, but then it get skinny.

[Craig]

Screenshot on mobile
https://www.screencast.com/t/7BfBzLSsxVe

Not all pages are doing it. And some pages are skinnier than others. I have never seen this before.

[Sonl Sinha]

Hi,

Kindly use this one

@media screen and (max-width:767px) {
.entry-content .cpm-map {
    width: 100% !important;
}
}

Regards,
Chris

[Craig]

Thanks. That did fix the Contact Us page but not the others.
https://synergywellnessnc.com/book-appointment/
https://synergywellnessnc.com/video-library/

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.hours-and-scheduling.table, .entry-content iframe { width:100% !important;}
}

Regards,
Chris

[Craig]

That worked. Thank you.
One more thing… On mobile, I have this large white space from under the page header image and the page title. How would I reduce this space?

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
.innerbanner { height:155px;}
}

Regards,
Chris

[Author]

Posts