Mobile view of my new theme cuts off photos on the side

[MaryFarrell]

Hello,

My new theme is cutting off photos and captions on the side. Sometimes on the left and sometimes on the rigtht. This is happening on my home page as well as About page.  www.MaryCronkFarrell.net 

In addition, the formatting is looking poor on my blog posts, such as only part of the blog title showing, and text showing up beside photos in a very narrow format.

It seems as if there might be some formatting restrictions to make the content show up correctly on the mobile view. But I can't see any way to tell what they are.  Here are some screen shots.  Hope you can help!  I'm so proud of my new site and people complaining.  Thanks!

Blog screen shotHomepage screen shotAbout pageAbout pageAbout page

[MaryFarrell · Accepted solution]

Thanks so much @PaulMathews for your patience with me. If I am understanding you correctly, it is not just my old posts with which I will need to use the column feature if I want a photo to the side of my text, but on all upcoming posts as well.  I guess I was confused, but I think I've got it now.

And it is clear to me how to fix the problem with the truncated post titles. Thank you! And I appreaciate you identifying my code for me.

I really appreicate your help!  Have a good week!

Mary

[PaulMathews]

@MaryFarrell If I had to guess, you've migrated your site from one of the older, non-responsive Weebly themes to a newer, responsive theme. Your blog posts liberally use a now defunct element: image + text. The manner in which the image and text are incorporated together, as you've discovered, does not work well with contemporary responsive design. To fix this, you'll have to edit each post. Click on an image in the image + text element and drag it out of the image + text zone (e.g., drag a left-justified image to the left of the image + text block until you extricate it from the block and, once that happens, drop it). This will separate the image and text into discrete elements. Setting the image to the left (or right) of the text will cause automatic column creation to kick in (you'll see a blue vertical bar between the image and text signifying their placement in two separate columns. You can change the relative size of the image by dragging the column separator bar to the left or right. You'll find that, when residing in different, discrete columns, your content elements will behave properly on mobile.

How to work with columns: https://www.weebly.com/app/help/us/en/topics/working-with-columns

A suggestion: Each of your blog posts is presented in its entirety on the blog page. This is not the recommended way to populate your blog page particularly if your posts have long-form content. What you should do with each blog post instead is create an introductory content snippet at the top of your post. That snippet might include an image (aligned to the left) and some introductory text (aligned to the right of the image) each in their own column (again, resize the columns as needed for good appearance). Below the two-column image/text introduction, add the "read more break" element. This will appear as a dotted line in the Site Editor but, on the front end, will appear as a "read more" link (that takes you to the full post when clicked). Below the read more break will be the remainder of your post content. After you update the post and republish, you'll see that the blog page will only present the introductory image/text followed by a read more link. Do this for all your posts and your blog page will now be considerably more compact and easier for visitors to scan (they will only now need to scroll through introductory post snippets not many screens of a stack of fully-presented posts). Here's an example blog page where each post displays some introductory business profile information and a styled "read more" link on the blog page while revealing the full post in the post page (reached when you either click the read more link or the post title): https://www.pointpleasantchamber.com/blog

[PaulMathews]

@MaryFarrell A follow up to my previous post. You have quite a lot of posts so it may not be tenable to fix the image + text element for the many posts in your blog. You could try a quick-and-dirty code fix that should ensure that your posts will render properly on mobile. What we're going to do is add some code that effectively turns off the "float" setting for the image that allows it to sit embedded within a block of text in the image + text element. We'll only do this for mobile viewports. For larger screens (tablets, laptops, desktops), the image + text element will revert to its default behavior.

Okay, so here's what you do:

1. In the Site Editor, click Settings in the menu bar at the top of the page.
2. In the Settings page, click SEO in the left-hand sidebar.
3. Scroll down to the "Header Code" input box. Copy and paste the entire code block below into that box. Save the Settings update and republish your site (you can check the results on your phone).

<style>
/* Override the inline float attribute in all spans for mobile viewports only. 
Presumably, the code approach of using inline css in spans to float images was 
restricted solely to the (not surprisingly) defunct Weebly image + text element.
Additionally, override the inline css imposing the fixed native width of the image. */
@media screen and (max-width: 480px) {
    span[style] {
        float: none!important;
        width: 100%!important;
    }
}
</style>

[MaryFarrell]

Thank you, @PaulMathews !

I am so grateful for your lengthy reply to my issue!  I have pasted in the code on SEO setting as you suggested, and it has appeared to work a miracle!  The images all seem to be showing fully on mobile. 

I do have a few follow-up questions I hope you would be so kind as to help me with.

First, do you advise that when I am creating new pages, I begin to move to formating with columns rather than placing the image within the text as I have always done?  Or with your bit of code added, should I proceed as I have been?

Second, one thing continues to be cut off on the mobile version, and that is part of blog post titles if they are the first post when scrolling through a group of them.  I would like to reformate my blog to the snippet introductory page as you suggested in your first reply. Is this a simple matter of adding the "read more" element?  If I do this, I assume it will only effect the new blogs I post, and all the old ones would remain the same?  There must be a setting for how many post snippets would show on the blog post page?  Would the bottom one fall off as a new one is posted?

Lastly, there was some code already pasted into the Header box on the SEO settings. I do not remember if it is something I placed there at some point, and if so what the purpose of it is.  This is it:

<meta name="google-site-verification" content="4r-StXamg85mN494w35lLPy5pwg8LSaRtSt4-zNmLHU" />

<meta name="p:domain_verify" content="f921f7b4558dc2b2a8150e7a25068b2f"/>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Thank you, Paul!

[MaryFarrell]

@PaulMathews 

I forgot to attach a screenshot.

[PaulMathews]

@MaryFarrell 

First question: The image + text element is defunct and thus should no longer be part of the available page elements sidebar in the Site Editor. You'll instead use the discrete image element and the discrete text element. When you wish to incorporate an image with text, you'll either need to stack them vertically or drag the image to the left or right of the text block. This will automatically generate columns per my previous response (be sure to read the Weebly support article discussing the use of columns). To some extent, the embedded image within a block of text would be a nice item to have given how this is a rather standard approach in printed material. However, modern websites, unlike print matter, have to accommodate their content to various sized screens and so some concessions need to be made. This doesn't necessarily mean that your articles have to be aesthetically clumsy but you'll need to be more strategic in the way that you organize various media with your written text.

Second question: The issue with the vertically truncated text at the top of your pages on mobile has to do with the default padding added to the top of the pages to account for the fixed header bar. Your page content must necessarily begin below the header bar and this happens on the desktop and on tablets. Now, on phone-sized screens, your site title, "Mary Cronk Farrell Author" wraps twice given the limited horizontal width of the mobile screen. This means that the header bar height must necessarily be taller to accommodate the now three rows of text. However, the site's default page padding is really only set up to accommodate at most two rows of header bar text. To fix this, you have to add some additional padding to push the page content far enough down the page to clear your particular fixed page header bar on phone-sized devices.

Replace the code you previously pasted in to your Header Code with the following:

<style>

@media screen and (max-width: 480px) {

/* Override the inline float attribute in all spans for mobile viewports only. 
Presumably, the code approach of using inline css in spans to float images was 
restricted solely to the (not surprisingly) defunct Weebly image + text element.
Additionally, override the inline css imposing the fixed native width of the image. */
span[style] {
    float: none!important;
    width: 100%!important;
}

/* Increase page content top padding to clear fixed mobile header bar on phones */
.no-header-page #main-wrap {
    padding-top: 105px;
}

}

</style>

Third question: The code that was already in the Header Code box appears to be for Google site verification and Facebook Pixel tracking. You've correctly added my suggested code below the existing code items.

[MaryFarrell · Accepted solution]

Thanks so much @PaulMathews for your patience with me. If I am understanding you correctly, it is not just my old posts with which I will need to use the column feature if I want a photo to the side of my text, but on all upcoming posts as well.  I guess I was confused, but I think I've got it now.

And it is clear to me how to fix the problem with the truncated post titles. Thank you! And I appreaciate you identifying my code for me.

I really appreicate your help!  Have a good week!

Mary

[PaulMathews · Accepted solution]

@MaryFarrell You're correct, essentially all of your posts are missing the "above the fold" introductory content for each blog post. That's the beauty of the "Read more Break" element. What I'd suggest is that you perhaps tackle this only for the first year or two of your blogs. At a minimum, you'd like your initial blog page to load with just the introductory paragraph/image for each post. You'll see that this will dramatically improve both the appearance of the blog page as well as making it much easier for visitors to quickly scan multiple posts at one time.

The code fixes I've provided address the mobile presentation of images that are embedded within text blocks. The last code fix I provided will eliminate the truncation of the first blog page post title.

Recently, when working with a Weebly site, I did notice that you can create an embedded image within at text block by dragging the image over the text. This is something that you should avoid. Always keep image elements separate from text elements to avoid mobile presentation issues.

[MaryFarrell]

Again, thank you, @PaulMathews !!!

I am now using the column feature on the blog posts, and the "read later" break.  You're right, it does look better that way, and I'm pleased with it. 

All best,

Mary