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

Solved

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

bebop87
Tourist
13 0 6

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

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
1099 376 447

This is an accepted solution.

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

BSSCommerceHDL_0-1719371138145.png

 

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

 

@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

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  😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an 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>

PageFlyRichard_0-1719376993805.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
}

 

ZestardTech_0-1719377044529.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Partner
1099 376 447

This is an accepted solution.

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

BSSCommerceHDL_0-1719371138145.png

 

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

 

@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

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  😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

EBOOST
Shopify Partner
1045 281 319

Hi @bebop87 ,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
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;
    }
}

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

techlyser_web
Shopify Partner
1810 336 362

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an 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>

PageFlyRichard_0-1719376993805.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
}

 

ZestardTech_0-1719377044529.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

INA_MSWEB
Shopify Partner
1228 142 156

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin