Why is my blog page header and footer misaligned?

Store Design
1

Hi,

I just created and published the first blog post. I soon realised that the header and footer looked strange; the header has been pushed to the right leaving some empty space on the left; and the footer has be been pushed from right and left leaving a bit of empty space on both directions. This only happens on the blog page (not on other pages).

Any quick fix for that? I would appreciate some tips!

Here is a link to the blog post:

https://essuli.com/blogs/news/miten-essuli-sai-alkunsa

Cheers!

Tim

2

@Tim_Essuli - add this css to the very end of your theme.min.css file and check , should look like screenshot below

@media only screen and (min-width: 46.85em){
.template-blog {padding: 0;    margin: 0; max-width: 100%;}
}

suyash1_0-1644756452274.png
suyash1_0-1644756452274.png1366×768 139 KB

suyash1_1-1644756460845.png
suyash1_1-1644756460845.png1366×768 102 KB

1 Like
3

Thanks a lot @suyash1 ! It worked like a charm on the blog page :)! However, the news page (where all blogs show up) displays the blog extremely on the left. Here is the link: https://essuli.com/blogs/news

Appreciate your help!

Cheers! Tim

4

@suyash1 The original problem still persists on the mobile, though.

5

@Tim_Essuli - add this line, it should look like screenshot

.template-blog {padding: 0;    margin: 0; max-width: 100%;}

suyash1_0-1644766825083.png
suyash1_0-1644766825083.png1366×768 152 KB

1 Like
6

It worked on the blog page on both desktop and mobile!

Just this page on which all blogs are displayed, it shows the blog pushed left a lot and the snippet is as wide as the page. Here is a link to check it out: https://essuli.com/blogs/news

Appreciate your help @suyash1 !

7

@Tim_Essuli - please check by adding this css

.template-blog .template-blog {padding: 5rem 6rem !important;}

@media screnn and (max-width:749px){
.template-blog .template-blog{padding: 4.5rem 3.2rem;}
}

if this does not work then may need custom code to solve conflict, issue is many pages have nested and same classes

1 Like
8

Awesome! It worked well! There does not seem to be any conflict at all. Thanks a lot @suyash1 !!