Hero text cuts off on a phone screen

Solved
maiayogurt
New Member
6 0 0

Hi there,

I am facing an issue with the homepage of my store. The hero text on the slideshow cuts off on a phone screen. The URL is: https://maiayogurt.store/

Please let me know what to add to the code section to avoid this issue. Thank you so much!

maia1.JPG

maia2.JPG

0 Likes
Zworthkey
Shopify Partner
350 21 60

@maiayogurt Hello Use the code in style.scss

.hero__slide .hero__title, .hero--adapt .hero__title {
    font-size: 32px;
}

thank you

I hope I will work 

0 Likes
maiayogurt
New Member
6 0 0

Hi, 

Thank you for the reply. 

Where can I find the style.scss section? I could not navigate that. 

Thank you for the help!

0 Likes
Zworthkey
Shopify Partner
350 21 60

ya sure i will 

0 Likes
Zworthkey
Shopify Partner
350 21 60

@maiayogurt Hello this steps will help you to Navigate.

  • go to the admin panel
  • Click on online store
  • click on Action and then edit code
  • Search on theme.scss
  • And at the top paste the code.
  • Thank you
0 Likes
maiayogurt
New Member
6 0 0

@Zworthkey Hi, thank you for the responses.

I added the code to the top of the theme.css section but I still see the same problem. Please let me know if you know a different way to solve this. Thank you!

 

Best,

0 Likes
Natztech
Shopify Partner
927 252 673

@maiayogurt   please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 429px){
  .template-index .hero__text-align  .hero__text-content .hero__title{
    font-size: 32px !important;
  }
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Zworthkey
Shopify Partner
350 21 60

@maiayogurt Add this code in theme.scss

 

.hero__title h1{
 font-size:30px;
}

 

Thank you.

0 Likes
Natztech
Shopify Partner
927 252 673

This is an accepted solution.

@maiayogurt   please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 

@media screen and (max-width: 429px){
  .template-index .hero__text-align  .hero__text-content .hero__title{
    font-size: 32px !important;
  }
}

 

 

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store

Dear @maiayogurt 

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  • Go to the very bottom of this file and paste the following code

 

/* Start */
@media screen and (max-width: 768px) {
.hero__slide .hero__title, .hero--adapt .hero__title { font-size: 36px !important; }
}
@media screen and (max-width: 590px) {
.hero__slide .hero__title, .hero--adapt .hero__title { font-size: 30px !important; }
}
@media screen and (max-width: 400px) {
.hero__slide .hero__title, .hero--adapt .hero__title { font-size: 24px !important; }
}
/* End*/

 

  • Save and check your theme by refreshing it.
  •  
Regards,
Task4Store - Get Shopify Small Task Help
Contact Us
: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
1400+ Happy Clients | 25000+ Shopify Small Tasks Done
0 Likes