space below nav bar on mobile

Solved
MrP
Tourist
22 0 2

Hi, I edited the theme code ages ago to reduce the space between the first item display site wide under the nav strip on mobile. I stupidly did not make a record of where I did this and now for the life of my I can't set it back. I had changed the way my items were representing on mobile because off the logo resizing there but now since the latest upgrade top off page items are disappearing under the grey nav strip on mobile view and I'd like to be able to set them down site wide.

I have temporarily set some custom css to make the headers drop but it's not the right solution as it's affecting the h2 headers across the site where ever they fall and the breadcrumbs and home page image are still slipping under the nav strip on mobile view.

I'm using the latest upgrade of Turbo by out of the sandbox. my website is www.mrpoppinsandco.com

I know it's in the css somewhere I just can't find where. can anyone help me?


pics for illustration

IMG_7832.jpgIMG_7834.jpgIMG_7833.jpg

0 Likes
prinpadure
Explorer
103 29 35

Hi @MrP 

You can change the has-padding-top class. Add this at the end of your styles.css file:

.has-padding-top {
    padding-top: 70px;
}

 

The above will a affect both the desktop and the mobile version. If you want the change it only for mobile, add this instead: 

@media only screen and (max-width: 480px) {
  .has-padding-top {
    padding-top: 70px;
  }
}

 

E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
MrP
Tourist
22 0 2

thanks for your quick response @prinpadure but that has had no affect in my mobil view. I've removed the CSS I had previously typed in and then applied your suggestion.

my title is still disappearing under the nav bar in mobile view even if I make the measurements bigger than 70px.

any other suggestion?

0 Likes
prinpadure
Explorer
103 29 35

The css code above is for the product page. Try with this

@_media (max-width: 480px) {
.detail-sections {
  margin-top: 100px;
}
}
E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
MrP
Tourist
22 0 2

@prinpadure  Ahhh yes, I see now. My apologies, the first code does work on product pages. I'd assumed it would affect site wide and I didn't look deep enough on mobile (I'm no coder - just a willing css changer!) Your new second suggestion fixed my product-details pages too. Awesome, Thank you!

Can I ask what I would do to affect my home page and my non product-details pages (collection) in the same way?

0 Likes
prinpadure
Explorer
103 29 35

This is an accepted solution.

You can affect the whole site wide with the following css rule below but this has the drawback of using the same margin-top everywhere:

@_media only screen and (max-width: 480px) {
  #shopify-section-header + section,
  #shopify-section-header + div {
    margin-top: 10px;
  }
}

 

For homepage, use index-sections class:

@_media only screen and (max-width: 480px) {
  .index-sections {
    margin-top: 100px;
  }
}

and for collections you can use the shopify-section-collection-template id:

@_media only screen and (max-width: 480px) {
  #shopify-section-collection-template {
    margin-top: 100px;
  }
}

 Let me know if this works

E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
MrP
Tourist
22 0 2

@prinpadure all of those worked once I understood where they affected. thanks so much! I have exactly what I need.

MrP
Tourist
22 0 2

Really sorry to bug you once more @prinpadure, what is the .section notation I need to use to affect the spacing at top for standard pages, like my term of service for example? not a collection page, just a normal text page? thanks in advance.

0 Likes
prinpadure
Explorer
103 29 35

For shipping and return page use .container.page.content:

@_media only screen and (max-width: 480px) {
  .container.page.content {
    margin-top: 100px;
  }
}

For cart page, replace .container.page.content with #shopify-section-cart-template and for reviews use #judgeme_all_reviews_page

E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
MrP
Tourist
22 0 2

@prinpadure i can’t thank you enough for your time and help.