Why does my site break up words and paragraphs on blog pages?

Solved

Why does my site break up words and paragraphs on blog pages?

maternallyhappy
Explorer
49 0 12

Hi there,

 

Does anyone know why my site breaks up the words and paragraph on some blog pages and products as seen below. It is showing normally when I am writing the blog but doesn't like it when I publish it.

 

Webiste: www.maternallyhappy.com

 

Thanks heaps,

 

Caitlin

 

maternallyhappy_0-1712897305577.png

 

Accepted Solution (1)
tim
Shopify Partner
3917 397 1443

This is an accepted solution.

Yes, I can see the problem -- it's not the same as suggested above.

The theme includes a CSS rule the intended purpose of which I do not quite understand, but this rule is the reason for this behaviour.

It's easy to fix though.

Just add the following code to the "Custom CSS" section setting:

 

.prose span {
  display: initial;
}

 

You may consider adding it to the "Custom CSS" under Theme Settings, but it may affect other areas of the site -- needs further checking.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 4 (4)

tim
Shopify Partner
3917 397 1443

It would be nice to see the actual article where you are having this problem.

Are you typing this in or copy/pasting?

Could be something like https://community.shopify.com/c/shopify-design/product-description-overflowing-to-the-right-side/m-p... and this "long word" can fit inside entry field in backend, but not when displayed on your site.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
maternallyhappy
Explorer
49 0 12

Hey Tim! Thanks for your response.

I've put the blog link below, it isn't published yet so not sure if you can see it with that link.

I generally copy and paste what I have written and then make edits

 

https://wb6z6ygdfw526rz0-28779282491.shopifypreview.com/blogs/the-pregnancy-library/articles?preview...

tim
Shopify Partner
3917 397 1443

This is an accepted solution.

Yes, I can see the problem -- it's not the same as suggested above.

The theme includes a CSS rule the intended purpose of which I do not quite understand, but this rule is the reason for this behaviour.

It's easy to fix though.

Just add the following code to the "Custom CSS" section setting:

 

.prose span {
  display: initial;
}

 

You may consider adding it to the "Custom CSS" under Theme Settings, but it may affect other areas of the site -- needs further checking.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
maternallyhappy
Explorer
49 0 12

Thanks Tim, that was super helpful!!