Solved

Make changes to my store for mobile only

MyHeavyNeeds
Excursionist
14 1 0

Hi all,

 

Is there a way to edit my store for mobile only? I want to make the words and images smaller so that they fit in the layout of mobiles. Thanks

 

Accepted Solution (1)
MyHeavyNeeds
Excursionist
14 1 0

This is an accepted solution.

Thanks for helping me out but I’ve already solved the issue, appreciate it 

View solution in original post

Replies 9 (9)

techlyser_web
Shopify Partner
1036 197 206

Hello @MyHeavyNeeds 
Can you share Store URL?

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
MyHeavyNeeds
Excursionist
14 1 0

Hey there,

 

https://myheavyneeds.us/

 

Moeed
Shopify Partner
3538 891 1106

Hey @MyHeavyNeeds 

 

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) {
b, strong {
    font-size: 30px !important;
}
}
</style>

 

RESULT:

Moeed_0-1703703188311.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. ❤️
Canva to Shopify in clicks - Free App
techlyser_web
Shopify Partner
1036 197 206

Hello @MyHeavyNeeds 

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__content {
padding: 5px 4px;
}
.image-with-text__text h2 {
font-size: 19px;
}
.utility-bar__grid.page-width {
padding-left: unset;
padding-right: unset;
}
p.announcement-bar__message span {
font-size: 13px;
}
a.button.button--secondary {
font-size: 12px;
padding: 0;
}
#znid-974281202309[data-full-width=false] {
width: auto;
left: 0;
margin: unset;
}
h2.title.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 25px;
margin-top: 10px;
}
}

</style>

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
MyHeavyNeeds
Excursionist
14 1 0

I'm looking through the theme.liquid section but I can't seem to find </body>, any chance it's a different name?

techlyser_web
Shopify Partner
1036 197 206

 you can add CSS in base.css file at bottom 

@media screen and (max-width:767px){
.image-with-text__content {
padding: 5px 4px;
}
.image-with-text__text h2 {
font-size: 19px;
}
.utility-bar__grid.page-width {
padding-left: unset;
padding-right: unset;
}
p.announcement-bar__message span {
font-size: 13px;
}
a.button.button--secondary {
font-size: 12px;
padding: 0;
}
#znid-974281202309[data-full-width=false] {
width: auto;
left: 0;
margin: unset;
}
h2.title.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 25px;
margin-top: 10px;
}
}

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
MyHeavyNeeds
Excursionist
14 1 0

It hasn't worked for me unfortunately

techlyser_web
Shopify Partner
1036 197 206

where you add code?

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
MyHeavyNeeds
Excursionist
14 1 0

This is an accepted solution.

Thanks for helping me out but I’ve already solved the issue, appreciate it