Home Page Only Banner Text Size Customization (Pipeline Theme)

Store Design
1

Hi all,

I cannot figure this out to save my life. I’m trying to change the size/alignment of the heading, subheading, and button on JUST my hero banner for the homepage of my site in the Pipeline Theme.

All the adjustments within the theme are global and I cant be as specific as I’d like to be.

I’ve tried everything I can think of to target those specific elements and can’t seem to get anything to work.

I’ve attached an image of what I’d like for it to look like vs. what you see on the site now.

Site is: https://lett-aesthetics-cookville.myshopify.com/

Any help would be much appreciated!

Lett_HomeHero_Mockup.png
Lett_HomeHero_Mockup.png3584×1524 474 KB

2

@ReidMounts , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .hero__content{
        text-align: left;
        margin-left: 150px !important;;
        display: block;
    }

    .hero__btn{
        padding: 20px 20px !important;
    }

    .hero__title{
        font-size: 40px !important;
    }

    .hero__description > *{
        font-size: 15px !important;
    }

    
      .hero__btn{
        font-size: 14px !important; 
    }
}

@media (max-width: 749px){

    .hero__title{
        font-size: 30px !important;
    }

    .hero__description > *{
        font-size: 16px !important;
    }

            .hero__btn{
        font-size: 13px !important; 
    }

}

You can change the values as per your wish:

40px = title
15px = subtitle
14px = button

30px = title mobile
16px = subtitle mobile
13px = button mobile

Kind regards,
Diego