How to Justify Heading Text for Equal Width on Both Sides

[Sheeks]

Can anyone teach me how to justify heading text so that it has equal width on both the right and left sides? Usually, you can set the alignment to right, left, or center, but I want the text to be evenly distributed across the width. Does anyone know how to do this?

https://sheeksorority.com/

[BSS-TekLabs]

- Here is the solution for you @Sheeks 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.text-reveal-content span {
     text-align: center !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Sheeks]

Owh like that. but no
i dont want it to simply be center
i want it to set the alignment to right, left, or center, but I want the text to be evenly distributed across the width.

[BSS-TekLabs]

you can try it @Sheeks 

@media only screen and (max-width: 600px) {
.text-reveal-content span {
         text-align: justify !important;
    font-size: 36px !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Sheeks]

Nice! But i wish the right gap n left gap is same. Can?

[BSS-TekLabs]

@media only screen and (max-width: 600px) {
.text-reveal-content span {
         text-align: justify !important;
    font-size: 36px !important;
}
.slideshow-content {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.slideshow-content-wrapper .m-bottom-left {
        left: 0 !important;
    }
}

Can you try this code @Sheeks 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Sheeks]

I am sorry but it look weirdly like that

  

[BSSCommerce-B2B · Accepted solution]

Hi @Sheeks ,

Long time no see,

I haved checked your website on mobile view, you can try add css script in base.css : 

.slideshow-heading {
    text-align: justify;
    font-size: 21px !important;
    padding-left: 10px !important;
}

If you want the text on the slideshow to have equal width on both the right and left sides, you need to use the text-align: justify property. However, when using this property, it will automatically justify the text on both the left and right sides, adjusting the spacing based on the font size and the available space. Therefore, I added the font size attribute to display it properly.

As a result, the text displayed on the slideshow will become smaller.

The result will be: 

We hope my suggestions will solved your issue.

If it is helpful, can you kindly give us likes and mark the solution for us? 

'Have a nice day sir !!