Solved

Website looks horrible on phone - everything is really big

estiekn1fes
Tourist
7 0 1

Hello,

 

My website looks really big on a mobile phone and I cannot get it any smaller. I already tried some CSS (not the best with that) but asked ChatPGT for a CSS. However, it does not affect the site.

 

Could someone help me out, please?

 

 

Accepted Solution (1)
Moeed
Shopify Partner
3769 953 1185

This is an accepted solution.

Hey @estiekn1fes 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5, a, span, b {
    font-size: 13px !important;
}
}
</style>

RESULT:

Moeed_0-1693825664205.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
3769 953 1185

Hey @estiekn1fes 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
estiekn1fes
Tourist
7 0 1

Hello @Moeed,

 

Thank you for the quick reply! Much appreciated.

The URL is www.helioux.com

Moeed
Shopify Partner
3769 953 1185

This is an accepted solution.

Hey @estiekn1fes 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5, a, span, b {
    font-size: 13px !important;
}
}
</style>

RESULT:

Moeed_0-1693825664205.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
estiekn1fes
Tourist
7 0 1

Thank you so so much! It helped.

NicTheCat
Tourist
8 0 0

Hi @Moeed 

 

Perhaps you can help me, I have a similar problem:

 

I would like to know how to fit this wide menu on the mobile version.

 

Any suggestions? 

Perhaps I can:

1. Change the location of the country/region selector - e.g. remove it from the header and place it somewhere else? How if it doesn't appear in the footer and mind you, this is not the basic language selector? 

2. Adjust the width of the header?

3. Reduce the size of the drop down menu?

4. Remove the search logo?

 

Any suggestions please?

NicTheCat_0-1715298145142.png

 

 

NicTheCat_1-1715298144963.png

 

 

Moeed
Shopify Partner
3769 953 1185

Hey @NicTheCat 

 

Can you share your Store URL and Password if enabled?

 

Best Regards,

Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️