Maker Theme - Blog does not display correctly in Mobile view

Store Design
1

Hello,

My Blog does not display with the proper padding. The Blog post displays too wide. Has anyone had this issue?

I need an assist to resolve this.

Blog: https://lizandrose.com/blogs/news

ifyou select a post on a mobile device you’ll see it displays incorrectly.

2

Hi @lizandrose ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme–async.css->paste below code at the bottom of the file:
.featured-content--root {
    padding-bottom: 0 !important;
}
.blog--header--root {
    padding-top: 40px !important;    
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@lizandrose , (at least some of) your blog posts contain a long line of underscores. Browser treats them as very long word and can’t wrap your text, making it wider then the screen.

You can try removing (or shortening) those lines, or you can add this code to the very bottom of your theme–critical.css Asset.

.rte, [data-item=paragraph], [data-item=rte-content] {
    overflow-wrap: anywhere;
}

This will allow browser to wrap overly long “words”.

1 Like