Solved

Trying to reduce the Header font size for mobile in Sense theme

jlow
New Member
5 0 0

Hi I'm looking to reduce the header font size and reduce the padding around the text on my homepage so that it does not take up the whole screen. Appreciate any help! link to the website: https://projektglitter.com/

IMG_0114.PNG

Accepted Solution (1)

websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hello @jlow ,

Go to online store  > themes  > edit code > find base.css file

Add to the given file at the bottom of the file base.css

 

@media screen and (max-width:745px){
.h0 {
    font-size: 25px;
}

}

save changesfont size reduce.png

 

Result.

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 6 (6)

Raj-webdesigner
Shopify Partner
236 52 53

Add This Css In you Edite Code > base.css

@media screen and (max-width:500px){
	h2.image-with-text__heading.inline-richtext.h0 {
		font-size: 30px;
	}	
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

LuffyOnePiece
Shopify Partner
314 55 55

Hi @jlow ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find base.css file
4) Add the following code at the end of the file

 

@media screen and (max-width:745px){

.section-template--20263089668443__image-with-text-padding .image-with-text__content>:first-child:is(.image-with-text__heading) {
    font-size: 24px;
}

.section-template--20263089668443__image-with-text-padding .image-with-text .image-with-text__text-item>* {
    padding: 30px;
}
}

 

Result:

LuffyOnePiece_0-1711621036689.png

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

techlyser_web
Shopify Partner
1404 262 276

Hello @jlow 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  .image-with-text h2.image-with-text__heading.inline-richtext.h0 {
      font-size: 17px !important;  /*adjust according to you*/
  }
}
</style>

techlyser_web_0-1711621793649.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

diego_ezfy
Shopify Partner
2958 568 890

@jlow@jlow, do this to fix it in 20 seconds:

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

@media (max-width:749px){
    .image-with-text__heading{
    font-size: 20px !important;
}
}



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hello @jlow ,

Go to online store  > themes  > edit code > find base.css file

Add to the given file at the bottom of the file base.css

 

@media screen and (max-width:745px){
.h0 {
    font-size: 25px;
}

}

save changesfont size reduce.png

 

Result.

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
jlow
New Member
5 0 0

Thanks, that worked, the next challenge now, is how to reduce the padding inside the box?