Full-width pages not responsive on iPhone?

Sparkling
1

Hi!

I’ve been doing some testing and realized that on my site, both of my full-width pages are not fitting into the iphone screen, according to this test: MobileTest.me - Test your mobile sites and responsive web designs with the Apple iPhone 5

It looks fine on my android phone
Regular posts and pages look fine everywhere, so this issue is just for full-width pages on my site, which there are two of:

http://careersidekick.com/coaching-consultations/

Any idea what’s causing it to “break”? I checked out the demo of your theme and it IS responsive for iphone and works perfectly, so clearly it’s something I have done.

I have a plugin that creates color boxes on those pages. I tried disabling it and it didn’t fix it. I’m not sure what else it could be.

I have some custom CSS related to those pages but i tried disabling that and it didn’t fix it:

.page-template-page-fullwidth-php .main-content-area {
max-width: 600px;
}

#post-2738 .entry-title {display: none; } 
#post-3729 .entry-title {display: none; }

Any idea what is going on? Would really appreciate any help, thanks!

2

UPDATE: It’s not a problem with iOS apparently. It might be an issue with tiny screen sizes. In the same emulator I tested with Samsung Galaxy Y (tiny phone) and the same issue occured. The text goes off the screen.

Looks similar to this topic maybe: https://colorlibsupport.com/t/not-anymore-responsive-498/

3

Hi @ronnie55,

I hope you are well today and thanks for posting here.

Could you please share me the screenshot of it so that i can troubleshoot it?

Kind Regards,
Movin

4

Hi Movin. I hope you are well too.

I’m attaching a screenshot of simulated iphone5 screen for the two pages mentioned.

For one page, the content is just slightly off center. But the other page, it goes way off screen… graphics, text, etc. are cut off.

I’m not sure why one of the pages is just effected very slightly, and the other is much worse. Maybe that’s a clue.

Thanks for the help!

5

You can try resolving this issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

div#primary {
    max-width: 100%;
}
@media (max-width: 767px) {
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 input[type="password"],
.wpcf7 input[type="search"] {
  width: 100%;
}
}
6

It worked! From everything I can tell, it’s functioning great now!

Mind telling me what that did? Or what was going on to begin with? Did I do something that caused the issue?

Thanks again for the awesome support and for creating such a professional and modern theme!

7

No you didn’t do anything wrong but it was the issue of CSS conflict.

You are always welcome here :slight_smile: