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

Store Design
,
1

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/

mobile2.jpg
mobile2.jpg371×677 63.2 KB

2

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

BSSCommerceHDL_0-1719371138145.png
BSSCommerceHDL_0-1719371138145.png1902×899 133 KB

Step 2: Search file theme.liquid

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

BSSCommerceHDL_1-1719371156069.png
BSSCommerceHDL_1-1719371156069.png1919×873 121 KB

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

Here is result:

BSSCommerceHDL_2-1719371253196.png
BSSCommerceHDL_2-1719371253196.png476×840 338 KB

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 :heart_eyes:

3

Hi @bebop87 ,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. 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;
    }
}
4

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 on theme.liquid

@media screen and (max-width: 767px) { .m-hero__inner.m-hero__inner--middle-left.container h3 { font-size: 27px !important; } }

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

5

Hi @bebop87

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

PageFlyRichard_0-1719376993805.png
PageFlyRichard_0-1719376993805.png390×844 350 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

6

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;
}
}

ZestardTech_0-1719377044529.png
ZestardTech_0-1719377044529.png943×669 199 KB

7

Hello,

I am San from MS Web Designer.

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

Do let me know in case of any concerns.

Regards,

San