Changing the text sizes and left align on the collection page

Highlighted
New Member
2 0 1

Hello! This is our website https://missempowher.com/ and we would like to right-align the text and change font sizes to add more wording on the collection banner like this example on any of KKW's banners (https://kkwbeauty.com/). I have tried to just create it with photoshop, but we want it to be responsive for mobile. I am having so much trouble with this.

 

Please me know if there is anything I can do! Thanks

0 Likes
Highlighted

Hi @missempowher 

This is PageFly. I would love to provide a solution to the issue.

Please add the code below

.hero.hero-hero-1 .hero__inner .page-width {
    text-align: right !important;
}

and follow this path to add the code

Themes => edit code => asset =>theme.scss.css
and add this code to bottom of the file theme.scss.css

Hope my answer helps you. If you find it helpful, just give it a like. Let me know if you need help

PageFly.

 

PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
- [Master Guides]: Get Your Shopify Store Ready for Black Friday
0 Likes
Highlighted
New Member
2 0 1

 Screen Shot 2020-11-16 at 2.20.30 PM.pngHello! Thank you for your response. When doing that it makes the words to the right like this but not stacked. Is there a way to make it similar to the second photo? Can we make the words on top of each other and resize the heading?

Also would love to add text under like this second photo but that may not be achievable. Thank you so much for all of your help!

Screen Shot 2020-11-16 at 2.21.41 PM.png

1 Like
Highlighted

Hi @missempowher 

You can try this. This code is for the title, in the mobile, you can decrease the padding-left.

.hero.hero-hero-1 .hero__inner .page-width h2.mega-title{
    padding-left: 57%;
    font-size: 36px;
}

and follow this path to add the code

Themes => edit code => asset =>theme.scss.css
and add this code to bottom of the file theme.scss.css

Hope my answer helps you. If you find it helpful, just give it a like. Let me know if you need help

PageFly.

 

PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
- [Master Guides]: Get Your Shopify Store Ready for Black Friday
0 Likes