Blog customization, & top-magin problem with mobile menu

Hi,

I made these changes to child-theme, in order to the get the content visible from under the menubar with white backround-color:

.page-template-page_front-page {
   margin-top: 130px;
}
.masonry-layout {
   margin-top: 130px;
}

Is there any other, more reasonable way to get the page beginning from the bottom of the menubar, because this soluton causes different looks in mobile browsing of these pages:
blog and
this site
password in both: athemes

Blog page customization:
Also for the masanory-grid styled blog -page:
I would like to have gray backround-color with all the content (blog writings) wrapped inside their own separate white box. I haven´t been able to do this. I tried to add <style> into header of blog page, but i did nothing.

Any suggestions?

Br,
W

EDIT: If I change the page templage to - Full width, then the mobile menu placement is the same with both blog and page, but if I use - Frontpage template, the menu location changes in mobile.

Hello there,

On the viewport larger than 992px, the header bar is sticky. While it always sticks at the top of the screen, its height will always be ignored. Thus, we should add more top margin as height as the header bar. As the header bar is no longer sticky on mobile screen ( actually starting from 991px and below), please add the following custom CSS code to remove top margin has been applied.


@media only screen and (max-width:991px){
  
  .masonry-layout,
  .page-template-page_front-page {
    margin-top: 0;
  }  
  
}

Regards,
Kharis

Thanks for the reply Kharis. Oh yeah the media screens. stupid me, had forgotten them. That works. thanks!

I also found out the css tags to customize the blog page backrounds already. So that thing is sorted also.

Br,
W