The text size on Blog Post Headers in the Symmetry Theme is still not porting to mobile correctly

Solved

The text size on Blog Post Headers in the Symmetry Theme is still not porting to mobile correctly

AteliersVerts
New Member
5 0 0

When we write our blogs (written in Symmetry Duke), the Title fragments when it's ported to mobile. Does anyone know a code we can imbed to correct this? Photo attached of Mac and Mobile example of a post we did yesterday. Many thanks.

www.ateliersverts.com

 

Accepted Solution (1)

Moeed
Shopify Partner
7045 1897 2323

This is an accepted solution.

Hey @AteliersVerts 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

 

<style>
.template-article .majortitle {
    word-break: unset !important;
}
</style>

 

Capture.JPG

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
7045 1897 2323

This is an accepted solution.

Hey @AteliersVerts 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

 

<style>
.template-article .majortitle {
    word-break: unset !important;
}
</style>

 

Capture.JPG

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


NomtechSolution
Astronaut
1245 113 159
  1. In the left-hand side navigation, under "Assets," locate and click on "theme.scss.liquid" to open the theme's SCSS file.

If you couldn't find the specific file mentioned above, look for a similar file that contains your theme's SCSS.

  1. Scroll to the bottom of the SCSS file and add the following code:

 

.blog-listing__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
​

 

AteliersVerts
New Member
5 0 0

Thank you the closest file we have is "styles.css.liquid" so I copied and pasted your code but unfortunately there is no change. We have "pagefly.blog.css" by the way - would that be an access point? Thanks again, A