[Resolved] spacing issue

[liza]

Hi,

The first line of the paragraph extends too close to the upper corner of the container [single post, mobile only]

Furthermore, font size varies from post to post or even within a single post…The link to the site is in the private info field. Thank you.

[Ying]

Hi Liza,

The first line of the paragraph extends too close to the upper corner of the container [single post, mobile only]

You are using a block element – page hero for the title part on single post, you can add some right padding to the headline block which presents the title on mobile.

Furthermore, font size varies from post to post or even within a single post…The link to the site is in the private info field. Thank you.

I’m not seeing the issue, are you able to provide the links that we can compare with?

[liza]

Hi,

Good morning!

I’m not trying to add another title for the single post since the title is already displayed on the page hero. What I am trying to do is to have ample space between the white container’s top edge and the first sentence of the first paragraph.

Also, the font size is not consistent all throughout the article. The font size of the first blog post is consistent over the entire post, but the others are not. At the bottom, the font size changes from 17 to 18.You can check this article “how to unspoil a defiant child” on mobile screen. You will also see that there is no space between the top edge of the container and the first paragraph. Thanks

[Ying]

I’m not trying to add another title for the single post since the title is already displayed on the page hero. What I am trying to do is to have ample space between the white container’s top edge and the first sentence of the first paragraph.

I see, you have this CSS which removes the top padding for the content area on mobile.

@media (max-width: 768px) {
body.single .inside-article {
    padding: 0 30px !important;
}
}

You need to remove this CSS, or change the value0 to 30px or whatever value you want for the top and bottom padding.

The font size issue is coming from the font size you’ve set within the paragraph block, as you can see in the below screenshot, you have some paragraph block without font setting which will use the default 17px, some of them are set to 18px, and some of them set to 17px.
https://www.screencast.com/t/JKSzRiyPDqqt

If you want the paragraph fonts to be the same, please remove the font size you’ve set for the paragraph blocks.

[liza]

Thank you! The alignment issue is resolved but I am still having a problem with the font size. If you were to look at the articles on the desktop the font size is uniform but on mobile, it is not..aren’t they supposed to be the same? or maybe I just need to clear the cache on my phone..?

[Ying]

Hi Liza,

The topic has been marked as resolved, are things all good now?

Let me know!

[liza]

Hi Ying,

The font size is the same across all articles on the desktop, but not on mobile. Also, I am having a hard time centering the Facebook icon at the bottom. Thank you.

[Fernando]

Hi Liza,

Can you provide a link to a couple of articles which have the font issue?

As for the facebook icon, are you trying to center horizontally on desktop?

[liza]

Hi

On mobile devices, [the bottom paragraphs of my articles] have a font size of 18 while the upper paragraphs have a font size of 17. On the desktop, there is no problem at all. Regarding the Facebook icon, I want to center it horizontally on desktop as well as on mobile.
Just wondering why the excerpts for the blog posts on the home page don’t appear as I had them checked in the customizer. Thank you.

[Fernando]

I tried viewing two articles on your site on mobile, and I couldn’t replicate the issue. The fonts seem to be the same on mobile.

Can you try clearing cache or try using a different mobile device to test?

As for the button, set your grid column to 100% container width, and disable fill horizontal space. In the toolbar settings of the Buttons Block, set the alignment to center.

[liza]

I can’t locate the “disable fill horizontal space” so I went ahead and restore the old one. Thanks

[Fernando]

I see. Glad that worked!

[Author]

Posts