Banner Text Size - How to make bigger/smaller?

Solved
Highlighted
New Member
2 0 0

Hi there,

I'm struggling to find out how to change the text size on my homepage banners.

Here's our website: https://www.chintiandparker.com/

The text I need to edit is in the upper corners of every banner. 

Hope someone can help!

Thanks,

Holly

0 Likes
Highlighted
Tourist
12 0 0

Hi Holly, you could change the font size using css, goto Online Store > Themes and under Actions, click Edit Code.

Locate theme.scss.liquid in the Assets folder and add this to the bottom of the page.

.banner-section .content .title {
font-size: 40px;
}

If it doesn't work try this:

.banner-section .content .title {
font-size: 40px!Important;
}

Hope this helps

0 Likes
Highlighted

Hello HollyLawson,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.banner-section .content .title {
    font-size: 25px!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 0

Hi there,

Thanks so much, its appreciated!

This has worked for the homepage but is now affecting the size of the mobile text. Is there a way to keep the mobile text a different size?

Should have also mentioned that I wanted the 'SHOP NOW' CTAs to be editable in size as well.

Best,

Holly

 

0 Likes
Highlighted

This is an accepted solution.

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

@media only screen and (max-width: 750px){
.banner-section .content .title {
    font-size: 20px!important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

This is an accepted solution.

For the 'SHOP NOW' CTAs.
Add this css

.banner-section .content .btn {
    font-size: 15px!important;
}

@media only screen and (max-width: 750px){
.banner-section .content .btn {
    font-size: 11px!important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hello MaddisonAllen,
Please share your site url.
Also share screenshot of which text size you want to change.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hello @MaddisonAllen 

As per you required changes following code applied on theme file

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->main.scss.liquid

.nav-link.nav-phone {
	margin: 0 15px;
}
a.nav-link.nav-phone sub.phone__cta {
	font-size: 12px;
}
.site-header .navbar .navbar-nav:not(.pull-right) .nav-item a.nav-link {
	font-size: 20px;
}
.banner__heading {
	font-size: 20px;
}
.banner__heading {
	font-size: 20px;
}

Changes looks like attached screenshot please refer for you reference

Screenshot_2020-09-08 Major Types of Plagiarism Students Should Know to Avoid .png

Hope this is work for you

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes