How to Content Heading Font Size on Password Page Mobile Only Brooklyn Theme

Solved
llafrance
Excursionist
14 0 4

Hello! 

 

My website is https://fableslifestyle.com/password

 

I would like to make the font size of the content heading "S23 Coming Soon..." to be smaller on mobile only so that the text does not stack on my password page.

Any ideas? Thanks in advance!

Accepted Solution (1)
ZestardTech
Shopify Expert
5079 905 1209

This is an accepted solution.

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media (max-width: 768px) {
h2.password-page__hero {
font-size: 25px;
}
}

ZestardTech_0-1670395085222.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 3 (3)
GemPages
Shopify Partner
5586 1259 1118

Hello @llafrance

It's GemPages support team and glad to support you today.

 

Please check out my suggestion below:

1. Go to Online Store -> Theme -> Edit code -> Layout

2. Open file password.liquid then add this code to above the </head> tag

<style>
  @media (max-width: 767px){
    #shopify-section-password-content .password-page__main__inner .password-page__hero{
      font-size: 32px;
    }
  }
</style>

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ZestardTech
Shopify Expert
5079 905 1209

This is an accepted solution.

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media (max-width: 768px) {
h2.password-page__hero {
font-size: 25px;
}
}

ZestardTech_0-1670395085222.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
MandasaTech
Shopify Expert
723 146 146

Hello @llafrance 

I would like to give you a solution to support you:
1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before </body> :

<style>
@media(min-width: 280px) and (max-width: 767px){
.password-page__hero {
font-size: 32px;
}
}
</style>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page