How can I edit my store for mobile only?

Store Design
1

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

2

Hello @MyHeavyNeeds
Can you share Store URL?

3

Hey there,

https://myheavyneeds.us/

4

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 tag

RESULT:

Moeed_0-1703703188311.png
Moeed_0-1703703188311.png363×794 32.2 KB

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

Best Regards,
Moeed

5

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 on theme.liquid

@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; } }
6

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

7

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;
}
}

8

It hasn’t worked for me unfortunately

9

where you add code?

10

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