Hello,
I am having an issue with my website not rendering properly in some browsers. The problem browser that I know of is Safari mobile. I know it works properly on desktop chrome and Internet explorer.
The site is www.thehaw.org. On Safari mobile, the homepage section with the circular images and the contact form at the bottom render as placeholders and lipsum.
I do not have experience troubleshooting issues across browsers so any help would be much appreciated! Thank you!
Best,
K
Hello,
Thank you for writing in!
To investigate your issue better, can you share with us your WP credentials in a secure note? This way we can take a look closer on the settings.
Hi John not sure how to make the reply a secure note so I’m posting a new note. Thanks!
Hello @cgensel,
This particular situation has to do with the way the demo content you’re using is setup. On larger screens (typically desktops), the alternating circle images and text are hidden on smaller screens and replaced with a secondary version that is reformatted to work on mobile. This is necessary because of the way X’s current columns reflow on mobile, where the leftmost column of content will always appear on top of columns to the right. Because of this, on mobile the order of images and content would not be uniform. To get around this, we use a common technique where the “desktop” content is hidden on smaller screens and replaced with new content. What you will need to do is open your page editor and make sure you have resized your browser down to see this “mobile” content, and replace it to match your “desktop” content.
Hopefully this helps to point you in the right direction. Cheers!
Hi Kory,
Thank you, it makes sense that the mobile and desktop content will render differently. I am a little confused still though- if I edit my page how do I make sure one version is mobile and the other is for desktop? I like how it appears on desktop so I wouldn’t want that to change if possible. I would just want to make sure that secondary mobile content is filled out. Can you please clarify how I accomplish this?
Thanks,
Katie
Hi Katie,
Please see the screenshot below on how to change the view on Cornerstone.
Once you change this setting on Cornerstone, those sections that are set to display in that certain screensize will display accordingly.
To check for the section visibility, click on any of the element the section and click on Row. Scroll down to the Hide based on screen width setting and you should be able to see which device width will the section display on.
Hope this helps.
Thank you Jade,
So is hiding it entirely the only option? Or is there a way to make a desktop version and a different mobile version?
Thanks,
Katie
Hi katie,
You can create another section and hide on desktop to be displayed on mobile
Hope it helps!
Hi Joao, now I understand thanks! If I have further trouble I’ll write back. Appreciate all the help!
-K
You’re most welcome, Katie.