Elements on mobile site being cut off on the left

[nleaivy]

Hi,

When I preview my site on Cornerstone’s mobile preview, site appears fine. However, when I view the site on my mobile, the left side of some elements are cut off.

Can you help?

Thank-you.

Screenshots included in a secure note to protect identity details.

[ruenel]

Hey Natasha,

Thanks for writing in! Please remove the left and right padding that you added to the Section element.

Best Regards.

[nleaivy]

Hi,

Unfortunately, that didn’t seem to work and only put the text flush against the left edge of the screen (screencaps in secure note).

The leftmost words like ‘Author Name’ are still cut off when viewed on an actual mobile screen while they remain on screen in Cornerstone’s mobile preview feature.

[ruenel]

Hello Natasha,

You have almost got the resolution of the issue. Go to Cornerstone > Theme Options > Layouts and Design and set the “Site Width” to at least 90%.

The remaining 10% will be the space for the left and right side of the content area.

Best Regards.

[nleaivy]

Not sure what’s going on but when the site is loaded on a mobile phone, the author’s name is always eliminated from the screen.

[ruenel]

Hello Natasha,

Please edit your custom layout. Change the {{dc:user:display_name}} dynamic content into {{dc:author:display_name}} instead.

Kindly let us know how it goes.

[nleaivy]

Hi, I made that change and took a few days to preview the site on other people’s mobile phones to check to see if it was my phone that was the issue.

However, the problem persists. The author name is still not appearing when the site is previewed on a mobile phone. It will appear on Cornerstone’s mobile preview but when the site is loaded on an actual mobile phone, the author name is still cut off whenever a looper is referencing the blog post.

[ruenel]

Hey Natasha,

You forgot that you have a separate Section element for the desktop and for mobile.

You must have to change both of them. You can check it now on your phone.

Thanks.

[nleaivy]

Alright, thanks for checking that out. With {{dc:author:display_name}}, while it will display the author’s name on a real phone, I am presented with different styling for the name (please see screencap).

Is this the coding I must use to have the author name show up on mobile? Is there a way to change this styling? With the previous code ({{dc:user:display_name}}), it will match the text’s style as determined by that element.

Is there a reason for when {{dc:user:display_name}} is present on a page displaying the author name (which shows up in Cornerstone’s mobile preview but not when the site is loaded onto a real phone), that it will not display the author’s name on a phone? Is it because that specific user must be logged in to see their name, thus ‘user:display_name’?

[ruenel]

Hello Natasha,

It is because of how the way you inserted the dynamic text. You currently have:
<strong><code>{{dc:author:display_name}}</code></strong>

The correct code should only be:
<strong>{{dc:author:display_name}}</strong>

Kindly let us know how it goes.