This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Responsive paragraph spacing problem on iPhone

Resolved 26 replies pluginplugin-page-buildertechnical
John Martin
8 years ago · Last reply by John Martin 8 years ago

When viewed on an iPhone some paragraph spaces become very large. Typically just the top of the page is effected. For example see: http://nswvisitorguide.com.au/orange-region/self-contained-accommodation-orange-region-o-r/
On an iphone this first happens below ‘A Colour City Apartments’ the space is such that most of the iPhone 6e screen is blank below this line.
Any help will be appreciated.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

26
  1. Alex S Staff 8 years, 11 months ago

    Hi John,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add (and adjust) the following CSS:

    h1, h2, h3, h4, h5, h6, p {
	margin-top: 15px;
	margin-bottom: 15px;
}

    How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  2. John Martin 8 years, 11 months ago

    Thanks Alex, I have made the CCS changes you suggested. The problem however still exists when viewed on iPhone in both Safari and Chrome, however the problem goes when you switch to desktop view in both browsers. Have I taken up your time for nothing? If so, sorry.

  3. Alex S Staff 8 years, 11 months ago

    Hi John,

    As mentioned, you’ll need to adjust the CSS to your desired spacing. Regardless, please change the CSS to:

    @media (max-width: 600px) {
	h1, h2, h3, h4, h5, h6, p {
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

    That’ll prevent the CSS from affecting your desktop after you’ve adjusted it.

  4. John Martin 8 years, 11 months ago

    Hello Alex, I have changed the CSS to the latest version as you suggested.
    Sorry but the same problem continues unless one changes the view to full site.
    I have attached a screen grab of the problem showing before (with space)
    and as it should be (desktop view).
    And in case you were wondering… yes I did clear all previous data on the phones and its is the same with both Safari and Chrome. I have also experimented with various settings.
    Thank you for your help, John

  5. Alex S Staff 8 years, 11 months ago

    Hi John,

    I suspect it’s not working due to your page cache. To clarify, did you clear the page cache after adding (and altering) the CSS? You can clear your page cache by navigating to WP AdminSettingsWP Super Cache and open the Contents tab. Click Delete Cache.

  6. John Martin 8 years, 11 months ago

    Hi Alex, Thank you, yes I have cleared cache several times on WP Super
    Cache as well as clearing both browsers. But I'm sorry to say the problem still exists. Do you think it could possibly an iOS problem or conflict when site is responsive? John

  7. Alex S Staff 8 years, 11 months ago

    Hi John,

    That’s odd. I’m still seeing the previous CSS. To clarify, did you change the CSS over? If so, would it be possible for you to create a temporary admin account for us so we can log in and take a look?

    To clarify, no I don’t think either of those are the case.

  8. Alex S Private Staff 8 years, 11 months ago

    This is a private message.

  9. John Martin 8 years, 11 months ago

    Thank you Alex, I appreciate all your trouble. Have set up your account however I need need your private email address please. John

  10. Alex S Private Staff 8 years, 11 months ago

    This is a private message.

  11. Regional Showcase Online Visitor Guides Private 8 years, 11 months ago

    This is a private message.

  12. Alex S Staff 8 years, 11 months ago

    Hi John,

    Ah, you’re right. That’s weird – that definitely shouldn’t have happened. Can you increase the role for the account you created me so I can take a look over your settings and take a closer look at your setting?

    Just to confirm, you reduced the margins, correct? To clarify, the provided CSS is using the default sizing and will need to be edited for it to take effect. So, for example, if you wanted 10px of spacing you would change the margins to 10px each. Which would look like:

    @media (max-width: 600px) {
	h1, h2, h3, h4, h5, h6, p {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
  13. John Martin 8 years, 11 months ago

    Hello Alex,
    Sorry, I intended that you would have admin access. That has now been done.
    I feel a little better now that you agree that it's weird as well, but I have this underlying concern that I have stuffed something but hope not.

    I have tried different settings and have tested the effects none of which change the iPhone spacing issue. In fact sometimes it's worse. So at the moment it is back to your original settings.

    I hope you have more luck than me but I am now in the hands of an expert!

    Regards, Chris

  14. Alex S Staff 8 years, 11 months ago

    Hi Chris,

    How’s that? Be sure to clear your browser cache before checking. If it doesn’t look as desired. Can you please clarify what text you’re specifically checking?

  15. John Martin 8 years, 11 months ago

    Hi Alex, Sorry I have been away, a typical page with the extra spacing issues on a smart phone is
    http://nswvisitorguide.com.au/orange-region/self-contained-accommodation-orange-region-o-r/
    Cheers, John

  16. Alex S Staff 8 years, 10 months ago

    Hi John,

    Thank you. To clarify, what areas specifically have extra spacing? I can’t seem to spot any obvious areas but that’s likely due to my unfamiliarity of your website.

  17. John Martin 8 years, 10 months ago

    Hi Alex,
    I understand.
    To help you see the problem I have attached 3 screen grabs off an iPhone but it is the same with Android phones too.
    The massive spaces occur in the attached samples above the photo and between the heading and text on the first couple of listings. The rest of the listings below are fine.
    We duplicated the content with another SiteOrigin Editor widget underneath.
    When we do this the second one is always OK. On a phone scroll down to the second one to see how it should look.The problem occurs on all pages not just the link I sent you.

    Thank you again for all your help and patience.
    John
    [image: Inline image 3][image: Inline image 1][image: Inline image 2]

  18. Alex S Staff 8 years, 10 months ago

    Hi John,

    Unfortunately, we’re currently unable to handle email attachments. Can you please upload the images to an image hosting site like vgy.me or imgur and send me a link to the image? Sorry about this!

  19. John Martin 8 years, 10 months ago

    No problems Alex, go to: https://goo.gl/photos/mvvB7S89fa85bqXD7
    Cheers John

  20. Alex S Staff 8 years, 10 months ago

    Hi John,

    Thanks. Well, that explains why I’m missing it. I can’t actually see that on any of my test devices (two Android smartphones and an iPhone 6). I borrowed my brothers iPhone 5, oddly, I was able to replicate this issue.

    This makes things tricky. Hm. Maybe it’s related to the Google ad just above the image of the house self-contained places. Hm. Can you temporarily remove that to see if that removes the spacing? If it does, please add it back and I’ll try and work out a cause for this.

  21. John Martin 8 years, 10 months ago

    Hi Alex,
    The ad has been removed and the same issue remains with early couple of text listings.
    But not with the duplicate widget below. How weird is that!
    John

    *REGIONAL SHOWCASE* ® Online Visitor Guides
    PO BOX 8488 EAST ORANGE NSW 2800
    Email <[email protected]>
    http://www.NSWvisitorguide.com.au http://www.SYDNEYvisitorguide.com.au

  22. Alex S Staff 8 years, 10 months ago

    Hi John,

    Wait, hold up. Did you remove the entire widget? I can’t seem to see the image used in the first screenshot anymore. To clarify, that widget contained JavaScript used to add an ad which I suspect is causing the issue (at least for that specific widget). Hm. This might sound like a weird request but, can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.

    If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.

    Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.

    If that doesn’t help, can you please try temporarily changing to the parent theme to rule out the child theme as causing issues.

  23. John Martin 8 years, 10 months ago

    Thanks Alex,
    I'll work through all those options and get back to you.
    Cheers, John

  24. John Martin 8 years, 10 months ago

    Hello Alex,

    *Very good news! *

    Thanks to you and *your professional attention* the spacing *PROBLEM HAS
    BEEN SOLVED!*

    We followed your suggestions and worked through all the steps, through all the plugins and clearing the caches as we went.

    I am not 100% sure but suspect that residual code from Mr Google may have been or contributed to the cause.

    I am very grateful for all the help you have provided and now we are able to happily continue to use SiteOrigin with WordPress.

    Your helpful service has given me yet another reason to recommend and help push SiteOrigin.

    If ever I can return "the favour" please contact me. For example if you ever need a users input or to test a beta version it would be a pleasure to contribute.

    Kind regards,
    John

  25. Alex S Staff 8 years, 10 months ago

    Hi John,

    Great to hear that worked. I would recommend trying to add the code via an alternative method as you shouldn’t really have any issues adding the removed code.

  26. John Martin 8 years, 10 months ago

    Thank you Alex, good advice and will do. John

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread