shopify store has different store fronts in mulitply devices

Store Design
, ,
1

I am using the theme, Concept version 1.6 and my concern is, I want to make sure that the storefront shows my theme/storefront as how it is showing via the theme editor.

You can see here that the editor looks like this:

20451-55678-62877-18654-43637.png
20451-55678-62877-18654-43637.png1920×911 125 KB

while this is how it looks on my desktop:

13533-47660-5633-75217-90708.png
13533-47660-5633-75217-90708.png1920×945 31.2 KB

I have already reached out to Shopify Support, and they have mentioned that this is a normal behavior since themes used in Shopify stores are responsive to the screen size. Although if you can help me on how to pre-set the theme to show exactly how it looks like on the theme editor and if there is any way for us to do that, I will greatly appreciate it.

2

Hi @Yonatan1 ,

Please send me the store link, I will check it for you

1 Like
3

Please have a look:

audiox.co.il

4

Hi @Yonatan1 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.footer {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.footer__right {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block-start: 1px solid rgb(var(--color-foreground) / var(--opacity-115)) !important;
    margin-block-start: var(--sp-10) !important;
    padding-block-start: var(--sp-14) !important;
}
1 Like
5

hi dear, thank you for the help but it didnt work, it worked but did half job…

i have added screen shot of where i want the newsletter to be,

above that, the display of the whole website is different if you reduce the page to medium size,

the website is medium browser size is how i want it to be(:

Capture.PNG
Capture.PNG922×850 451 KB

Capture.PNG
Capture.PNG935×618 25 KB

Capture.PNG
Capture.PNG1899×873 44.5 KB

6

Hi @Yonatan1 ,

Please add code:

.collage.with-richtext {
  grid-template-columns: auto !important;
  gap: var(--grid-gap) !important;
}
.footer__left {
  border-inline-end: none !important;
}
.footer__right {
  grid-template-columns: auto !important;
}
1 Like
7

It looks good but it enlarges the footer a lot and doesn’t look really professional, the site can survive that way no doubt, I would be happy if you could help me place the newletter where I indicated with the arrow.
Beyond that, what can be done with the objects that look smaller in full screen mode?
and again triple times thank you!

i am super thankful

Capture.PNG
Capture.PNG1889×842 43.7 KB

8

Hi @Yonatan1 ,

Please add code:

@media screen and (min-width: 1280px) {
    .footer.footer-1col {
        grid-template-columns: 1fr 1fr !important;
    }
    .footer__right {
       padding: 0 !important;
    }
}
1 Like
9

thank you dear!

it is not by the left side but it is good enough, if you can make the newsletter to be in the left size it will be perfect!

Capture.PNG
Capture.PNG1854×843 54.2 KB

10

Hi @Yonatan1 ,

Please add code:

@media screen and (min-width: 1280px) {
    footer.footer.footer-1col.page-width.relative.grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
1 Like
11

Hi @Yonatan1 ,

If you have any questions, you can contact me directly.
Nice to meet you :blush:

1 Like
12

thank you dear, please have a look on my new post, just posted it minute ago, its bigger problem than this one hahaha

13

Hi @Yonatan1 ,

Can you send me the post link in private message? I will check it