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
411 25 67

@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 

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
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
411 25 67

ya sure i will 

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
Zworthkey
Shopify Partner
411 25 67

@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
Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
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
1328 365 902

@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
411 25 67

@maiayogurt Add this code in theme.scss

 

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

 

Thank you.

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
Natztech
Shopify Partner
1328 365 902

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
MS-WEB-DESIGNER
Shopify Partner
2792 175 469

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.
  •  
0 Likes