Reduce header margin and padding on mobile (Mobilia Theme)

Store Design
1

Hi everyone,

I have done so much research about how to reduce the header margin and padding on mobile view but it just doesn’t seem to work on my store. I want to reduce the top margin or padding for the product heading (h1). Below is how I wanted to be displayed after messing around with the HTML inspector. Can someone help me with the coding for the mobile view only? Please. Thank you.

KcZyien_0-1659146382368.png
KcZyien_0-1659146382368.png2742×1292 294 KB

1 Like
2

Hi @KcZyien ,

Perfect picture! Please try the following.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the styles.scss
  3. Paste the code below at the very bottom of the file.
@media only screen and (max-width: 750px) {
.eight.columns.omega > div {
margin-top: -67px !important;
padding: 10px !important;
background: #f1f1f1 !important;
}
}
1 Like
3

Wooow !! thank you so much. It works just like a charm !! You are a lifesaver for real!

1 Like
4

HI Made4Uo,

Could you also tell me how how I should move the header above the listing pictures instead of below?