Increase Spacing Between Header and Hero Image on Mobile (Debut Theme)

Solved
joanneyun
Tourist
16 1 3

Hi there,

Could anyone help me address the spacing on my website (www.takethegardenjourney.com) which is not quite right on mobile?

On desktop it looks great, but on mobile I'd like the hero title text to start further down the page (creating more space between title and the header).

Have played around with a few things in the code but nothing's working yet...

 

Screenshot_20210428-154416.jpeg

0 Likes
KetanKumar
Shopify Partner
16937 1851 6337

@joanneyun 

sorry for this issue please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
##shopify-section-hero .hero__inner {padding: 100px 0px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
joanneyun
Tourist
16 1 3

Hi Ketan,

Thanks so much for your speedy reply - however, this code didn't seem to change the spacing in any visible way on mobile.

Could it be possible it's interfering with other code (I did paste at the bottom of the theme.css file)?

These are other snippets of code that I've added to the original theme.css file...

/*============================================================================
Constraining Size of Logo and Title Fonts for Mobile Screens
==============================================================================*/

@media only screen and (max-width: 749px){
h1.site-header__logo {
    width: 60%!important;
}
}


@media (max-width: 479px) {
.mega-title { font-size: 30px; }
}


/*============================================================================
Changing the Padding of the Index Sections
==============================================================================*/

.index-section {
  padding-top: 0px;
  padding-bottom: 35px; }

@media only screen and (min-width: 750px) {
    .index-section {
      padding-top: 0px;
      padding-bottom: 55px; } }
  .index-section:first-child {
    padding-top: 0;
    border-top: 0; }
  .index-section:last-child {
    padding-bottom: 0; }

.index-section--flush + .index-section--flush {
  margin-top: -70px; }

@media only screen and (min-width: 750px) {
  [class*="index-section--flush"] + [class*="index-section--flush"] {
    margin-top: -110px; } }

.index-section--flush:first-child {
  margin-top: -35px; }

@media only screen and (min-width: 750px) {
  [class*="index-section--flush"]:first-child {
    margin-top: -55px; } }

.index-section--flush:last-child {
  margin-bottom: -35px; }

@media only screen and (min-width: 750px) {
  [class*="index-section--flush"]:last-child {
    margin-bottom: -55px; } }

@media only screen and (max-width: 749px) {
  .index-section--featured-product:first-child {
    margin-top: -12px; } }

@media only screen and (max-width: 749px) {
  .index-section--slideshow + .index-section--flush {
    margin-top: 0.4rem; } }


/*============================================================================
Make the Header Transparent & Mobile Header More Spacious
==============================================================================*/

.template-index .site-header {
    position: absolute;
    width: 100%;
    background: transparent;
}
.template-index .site-header .site-header__mobile-nav {
    background: transparent;
}

.template-index .site-header .site-header__mobile-nav a.site-nav__link.site-nav__link--main {
    color: #fff;
}

@media screen and (max-width: 768px) {
#shopify-section-header .header-logo {
    margin: 0 auto;
}

  @media screen and (max-width: 768px){
.site-header__logo img {
 max-height: 350px !important;
}
}
 @media only screen and (max-width: 749px) {
##shopify-section-hero .hero__inner {padding: 100px 0px;}
}

 

KetanKumar
Shopify Partner
16937 1851 6337

@joanneyun 

yes, your current code added please just check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
joanneyun
Tourist
16 1 3

@KetanKumar - thank you for following up, but I'm still not seeing any change in the mobile experience with that code! 

Do you see something different on a mobile device at www.takethegardenjourney.com?  I'm specifically wanting the hero image text to appear further down the mobile screen from the header.

0 Likes
joanneyun
Tourist
16 1 3

This is an accepted solution.

@KetanKumar I figured out the issue - the code you sent me was perfect with one typo - there was one extra # in front of the second line of code.

 

@media only screen and (max-width: 749px) {
##shopify-section-hero .hero__inner {padding: 100px 0px;}
}

 

When I removed it, it worked beautifully.

@media only screen and (max-width: 749px) {
#shopify-section-hero .hero__inner {padding: 100px 0px;}
}

 

KetanKumar
Shopify Partner
16937 1851 6337

@joanneyun 

thanks for an update here...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes