Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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.
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; }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
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
>
Sorry, this is a Sass comment, just delete this line:
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; }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:
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; }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
>
Sorry for missing that! Glad you were able to resolve. Thanks for the update :)
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
>
Can you try my solution? Custom class in each of those h3 tags with links in them. Custom CSS to target those classes.
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
>
That works for me on desktop. Let me test on mobile.
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
>
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.
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
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.
This is a private message.
You should receive it shortly
>
This is a private message.
Andrew, I’m not sure how to use this private message. Could you kindly send me an email?
Nothing further is required. Thanks. Looking into the problem now.
OK. Thank you very much. Really strange that it only happens in portrait mode on an iPhone. Have not tested on Android.
>
Please, try now.
Getting a slower server response time so it’s making testing slow. I’ll jump back into this tomorrow. Thanks.
OK. Thanks again.
>
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.
Whatever you did had no effect on iPhone in portrait mode.
>
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.
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
>
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/
wumc.com/test-3 <http://wumc.com/test-3>
And their is no encroaching onto the page by the background image
>
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.
So are you saying that before I edited the Test page 3, it was working for you on iPhone?
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.
>
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.
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.
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.
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
>
For sure :) Let us know how it goes.
When I started work this morning WUMC.com <http://wumc.com/> 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
>
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
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/> I could connect to other domains with these machines with good performance. i could connect to wumc.com <http://wumc.com/> 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
>
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 :)
This is a private message.