Home>Support>Problems with responsiveness in one PageBuilder row

Problems with responsiveness in one PageBuilder row

The page has two PageBuilder rows. The top row has an image using Site Origin Image widget and it is responsive. The bottom row has text using SiteOrigin editor widget and it is responsive as you resize the browser but it does not resize correctly on an iPhone 5s. There also is some interference from the background image. Left side of the image goes away but right side remains and covers the text in the second row.

URL: http://www.wumc.com/westminster-fall-market/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Hi Bob.brinkmn

    Let’s try, at Appearance > Custom CSS:

    /* Headings and Links */
    
    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6,
    a {
    -ms-word-break: break-all;
         word-break: break-all;
    
         // Non standard for webkit
         word-break: break-word;
    
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;	
    }
    
  2. 6 years, 8 months ago bob.brinkmn

    Thank you Andrew for your quick response, but what you sent had no effect. The system did no like this:

    // Non standard for webkit
    word-break: break-word;

    I commented out the // line and then both lines but no difference

  3. 6 years, 8 months ago bob.brinkmn

    Andrew, this splits single consonant words and makes things worse on a smart phone. The problem seems to be the background image right side doesn’t get cleared out on a smart phone. Could you take a look at that issue?

    Thank you,
    Bob
    >

  4. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Sorry, this is a Sass comment, just delete this line:

    // Non standard for webkit
    

    The problem, as far as I could see when inspecting the site was the URLs. If you remove the URLs the issue resolves.

    Any change with just:

    /* Links */
    
    a {
    -ms-word-break: break-all;
         word-break: break-all;
    
         word-break: break-word;
    
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;	
    }
    
  5. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Another idea. Click over to the Text tab of the widget. Manually add a class to the h3 heading tags that contain the links in the page. Example:

    <h3 class="heading-link"><span style="color: #0000ff"><a href="http://facebook.com/westminsterwfm">http://facebook.com/westminsterwfm</a></span></h3>
    

    Then, at Appearance > Custom CSS, let’s say:

    /* Links */
    
    h3.heading-link a {
    -ms-word-break: break-all;
         word-break: break-all;
    
         word-break: break-word;
    
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;	
    }
    
  6. 6 years, 8 months ago bob.brinkmn

    Hi Andrew,

    I sent a second email identifying the suspect as the right side of the background image that isn’t removed when the device is a smart phone. Everything else seems to be ok. That is all of the text in the second PageBuilder row is correct but it is partially covered by the background image on the right side of the screen.

    Thanks for your help.

    Bob

    >

  7. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Sorry for missing that! Glad you were able to resolve. Thanks for the update :)

  8. 6 years, 8 months ago bob.brinkmn

    I’m sorry that I wasn’t more clear. The problem with the background image is not resolved.

    In portrait mode the background image has not been removed and it covers the text on the lower part of the page. In landscape mode there is no background image covering the text.

    Bob

    >

  9. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Can you try my solution? Custom class in each of those h3 tags with links in them. Custom CSS to target those classes.

  10. 6 years, 8 months ago bob.brinkmn

    Yes, I just tried adding both the /* Links */ and /* Heading and Links */ snippets. I can’t see that either one have any effect on the page on an iPhone in portrait mode.

    I still have the background image covering part of the text in portrait. In landscape everything is fine.
    Bob

    >

  11. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    That works for me on desktop. Let me test on mobile.

  12. 6 years, 8 months ago bob.brinkmn

    The problem is resolved. I had set the image size as full in the PB image row. I changed it to large and everything is fine on mobile in portrait and landscape.

    Sorry to put you through this drill.

    Bob
    >

  13. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Sorry for ignoring your warning about the image being the problem! I kept on the word-break route because it seemed to work in testing.

    Glad we we were able to resolve :)

    Cheers for now.

  14. 6 years, 8 months ago bob.brinkmn

    Andrew,

    I was wrong the problem is not resolved. It is evident at:
    http://www.wumc.com/westminster-fall-market/ but is only a problem with a smart phone in portrait mode. On table, desktop or a smart phone in landscape mode everything is OK.

    I have commented out your suggestion because it seems to have no positive effect but causes other problems of incorrectly hyphenating words.

    Thanks for your help

  15. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Hi Bob.brinkmn

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  16. 6 years, 8 months ago Private Message - WordPress

    This is a private message.

  17. 6 years, 8 months ago bob.brinkmn

    You should receive it shortly
    >

  18. 6 years, 8 months ago Private Message - Andrew Misplon Hi, I Work Here

    This is a private message.

  19. 6 years, 8 months ago bob.brinkmn

    Andrew, I’m not sure how to use this private message. Could you kindly send me an email?

  20. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Nothing further is required. Thanks. Looking into the problem now.

  21. 6 years, 8 months ago bob.brinkmn

    OK. Thank you very much. Really strange that it only happens in portrait mode on an iPhone. Have not tested on Android.

    >

  22. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Please, try now.

    Getting a slower server response time so it’s making testing slow. I’ll jump back into this tomorrow. Thanks.

  23. 6 years, 8 months ago bob.brinkmn

    OK. Thanks again.

    >

  24. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Still battling to load on my phone. Not sure why. Internet not amazing for me yesterday and today. Please, can you try testing now. Thanks.

  25. 6 years, 8 months ago bob.brinkmn

    Whatever you did had no effect on iPhone in portrait mode.

    >

  26. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Phew, ok. Looks good on mine.

    Let’s try this:

    1. Create a new test page.
    2. Click over to the Page Builder tab, click Prebuilt.
    3. Using the link in the left menu, clone the page we’re trying to troubleshoot.
    4. Edit the Editor widget and highlight all the text.
    5. Insert a next “Text” widget and insert your text.

    So basically, re-create the problem page but render all the text without using Header tags. Test and see if it makes any difference.

  27. 6 years, 8 months ago bob.brinkmn

    No, no difference. I created a new page (Test 3). In Step 4 I highlighted and copy all of the text. Using the read more icon I added a section and then pasted the text. Updated the page and then displayed in portrait mode.

    You said "Phew, ok. Looks good on mine.” Does this mean that it displayed correctly in portrait mode?

    Bob

    >

  28. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Please, can you send me the link to the test page.

    Yes, the test page renders without a horizontal scroll bar on my iPhone.
    http://www.wumc.com/westminster-fall-market/

  29. 6 years, 8 months ago bob.brinkmn

    wumc.com/test-3 <http://wumc.com/test-3&gt;

    And their is no encroaching onto the page by the background image

    >

  30. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    I’m going to edit that test page quickly. It’s not quite what I meant. I want to test that page with all the text not contained in header tags. They still are. One moment.

  31. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    So are you saying that before I edited the Test page 3, it was working for you on iPhone?

  32. 6 years, 8 months ago bob.brinkmn

    No, it has never displayed correctly. The page (white space where the content shows) is being encroached upon by the right background image. And the result is a very narrow content area with a green bar on the right side which is the color of the background image. I don’t recall if I removed the background image and if so what the results. I appreciate whatever you can do but don’t want you to spend too much time on this. This page has a life of about two weeks and then the event will be over and page removed.

    >

  33. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    At Appearance > Customize > Theme Design > Fonts you had the content color to set to white and the font size at 13px. You’re using heading tags throughout the site for content. This isn’t really standard. I’ve standardised the settings in the Customizer and re-built this page:

    http://www.wumc.com/test-3/

    Test it on your phone. Let me know.

  34. 6 years, 8 months ago bob.brinkmn

    Yes, that got it. Thank you, Andrew.

    Although this is pro-bono work I think could have an effect on my business. I really appreciate it.

  35. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    No problem. So now, you can do this. Work on Test 3 a bit. You’re welcome to turn the actual headings into heading tags, just leave the paragraphs as is.

    Then, go to our main page, click Prebuilt and clone Test 3, thereby overwriting our problem page with the solid content that isn’t breaking mobile.

  36. 6 years, 8 months ago bob.brinkmn

    OK. I will give it a try this afternoon.

    Thanks so much for your help. I learned a lot working with you on this.

    Bob
    >

  37. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    For sure :) Let us know how it goes.

  38. 6 years, 8 months ago bob.brinkmn

    When I started work this morning WUMC.com <http://wumc.com/&gt; was exceptionally slow. I got in and thought perhaps I had messed up the pages test-3 and westminster-fall-market. I made changes (used paragraph extensively rather than headings) to the content marked as paragraphs did not show on the page.

    So I deleted those two pages, but performance is still extremely slow. I am afraid I might have done something to WordPress, although I have worked only within the theme.

    Would appreciate your having a look.

    Bob

    >

  39. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Hey Bob

    The site has been very slow for me ever since I first took a look. That’s something you could perhaps chat to your hosts about. I don’t think it’s something you’ve done.

    Please, send me a link to a page with paragraphs not showing and I’ll take a look to see what the problem is.

    If you’re using a caching plugin, go to that plugin’s settings page and clear its cache. Re-check the problem after doing so.

    Thanks

  40. 6 years, 8 months ago bob.brinkmn

    I got tired of fooling with this so I just built the page with Visual tool; no Pagebuilder. I had to give up the two columns but it is done.

    I tried to remove all of the headings with PageBuilder but I still got the right column covered with an extended background image.

    My slow performance was really strange yesterday. It only happened with my Mac and PC when connected to wumc.com <http://wumc.com/&gt; I could connect to other domains with these machines with good performance. i could connect to wumc.com <http://wumc.com/&gt; with my iPhone and got good performance with Wi-Fi turned off and using only LTE service. It was like ATT UVerse was throttling me to that one domain.

    But, it’s finished. Client’s happy. I am happy and especially appreciate your support. I am ready to close this ticket.

    Bob
    >

  41. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    I’ll take that :) Thanks for your understanding.

    I think the challenge was word breaks in header tags, specifically around links. The performance issues we both ran into definitely made testing a little slower/harder.

    Let me know if anything else comes up in the future that we can take a look at.

    Cheers for now :)

  42. 6 years, 2 months ago Private Message - WordPress

    This is a private message.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More