Re: How do I change the font size in Page of Colorbook?

Solved

How do I change the font size in Page of Colorbook?

Newbie_shpfy
Excursionist
13 1 3

Hello there, it's me again.

 

How do I change the font size of the heading "Shipping" together with all other pages like "About" and  "Contact" to the font size of the title in Product? I tried adding the code 

.header__menu-item {
    font-size: 5rem;
}

to base.css but it seems to fix the size when viewed in mobile as well so it becomes so much bigger than the title in Product when using mobile version.

 

Is there a way I can set to a specific defined size so that it automatically switch to the font size of Product regardless of using web version or mobile version? Any help would be much appreciated. Thanks a lot guys.

 

https://summerizeint.myshopify.com/pages/shipping

password: skaung

Accepted Solution (1)
oscprofessional
Shopify Partner
16373 2440 3188

This is an accepted solution.

Hii,

Desktop code

 

h1.main-page-title.page-title.h0 {
  font-size: 5rem;
}

 

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
its desktop view

oscprofessional_0-1655963544052.png

Mobile view code

 

@media only screen and (max-width: 480px){
h1.main-page-title.page-title.h0 {
font-size: 4rem;
}}

 

 

Add this css at the "@media only screen and (max-width: 480px)" of Online Store->Theme->Edit code->Assets->base.scss.liquid

Mobile view

oscprofessional_2-1655963756866.png

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...

View solution in original post

Replies 4 (4)

oscprofessional
Shopify Partner
16373 2440 3188

@Newbie_shpfy ,

h1.main-page-title.page-title.h0 {
    font-size: 3rem;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
Newbie_shpfy
Excursionist
13 1 3

Thanks for your reply bro. But I am afraid that you are not solving my problems. First, the size in your code is not the size I want because it is much smaller on the title of this page. Second, even if the size is correct in the desktop version, it still doesn't solve the problem of viewing in mobile version. Are there possible codes to solve these 2 problems?

oscprofessional
Shopify Partner
16373 2440 3188

This is an accepted solution.

Hii,

Desktop code

 

h1.main-page-title.page-title.h0 {
  font-size: 5rem;
}

 

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
its desktop view

oscprofessional_0-1655963544052.png

Mobile view code

 

@media only screen and (max-width: 480px){
h1.main-page-title.page-title.h0 {
font-size: 4rem;
}}

 

 

Add this css at the "@media only screen and (max-width: 480px)" of Online Store->Theme->Edit code->Assets->base.scss.liquid

Mobile view

oscprofessional_2-1655963756866.png

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
Newbie_shpfy
Excursionist
13 1 3

Thanks for the help bro. It worked!