How can I adjust my mobile view font size to fit on one line

[bebop87]

I want to change the font size for mobile view only so it fits on one line instead of two. Example below. I would also like to center the announcement text "30 day growing guarantee". Many thanks.

Website: https://prevailplants.com/

 

[BSSCommerce-HDL · Accepted solution]

Hi @bebop87, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

@media only screen and (max-width: 767px) {
  .m-hero__content .m-hero__title.h2 {
    font-size: 31px !important;
  }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[PageFly-Richard · Accepted solution]

Hi @bebop87 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media(max-width: 767px){
.m-hero__content .m-hero__title.h2 {
    font-size: 30px !important;
  }
.m-announcement-bar__content * {
    font-size: 14px;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[BSSCommerce-HDL · Accepted solution]

Hi @bebop87, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

@media only screen and (max-width: 767px) {
  .m-hero__content .m-hero__title.h2 {
    font-size: 31px !important;
  }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[EBOOST]

Hi @bebop87 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
    .m-product-card__info .m-product-card__title {
        white-space: nowrap;
        font-size: 4vw;
    }
}

[niraj_patel]

Hello @bebop87 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.m-hero__inner.m-hero__inner--middle-left.container h3 {
font-size: 27px !important;
}
}

</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[PageFly-Richard · Accepted solution]

Hi @bebop87 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media(max-width: 767px){
.m-hero__content .m-hero__title.h2 {
    font-size: 30px !important;
  }
.m-announcement-bar__content * {
    font-size: 14px;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width:400px){
.m-hero__title, .m-hero__subtitle {
font-size: 25px;
}
.m-announcement-bar__link {
text-align: center;
}
}

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>

<style>
@media only screen and (max-width: 750px) {
.template-index  .m-hero__content .m-hero__title.h2 {font-size: 28px !important;}
}
</style>

Do let me know in case of any concerns.

Regards,

San