Titles On Mobile are Exceeding Over The Screen

Store Design
, ,
1

Hi there,

I’m having issues with the Titles on mobile screen. My site preview:
https://9dwa08p5y6gyhb92-63384551638.shopifypreview.com

Actually, I am facing the issue with just two titles in the same block on the homepage, all the other titles and text are fine. Please let me know how I can fix this issue. Thank you!

1.png
1.png375×667 162 KB

1 Like
2

Hi @shuja6 ,

You can make your title responsive by using the code below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the timber.scss.css
  3. Paste the code below at the very bottom of the file.
.section-banner-v1 .box-content > .title.mb-0 {
    font-size: clamp(18px, 6vw, 40px);
}
3

Hi @shuja6 ,

This is PageFly - Advanced Page Builder.

You can try with this code:

Follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyVictor_0-1668738493301.png
PageFlyVictor_0-1668738493301.png1365×651 47.6 KB

@media screen and (max-width: 767px){ .section-banner-v1 .box-info .content-banner .box-content .title { font-size: 20px !important; } }

PageFlyVictor_1-1668738493318.png
PageFlyVictor_1-1668738493318.png312×297 84.9 KB

Hope that my solution works for you.

Best regards,

PageFly

4

Hi @shuja6 ,

Go to Assets > engo-customize.scss.liquid file and paste this at the bottom of the file:

@media (max-width: 768px) { 
  .section-banner-v1 .box-info .content-banner .box-content {
      max-width: 100% !important;
      padding: 40px 15px !important;
  }
}

Hope it helps!