Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: store front has a variety of views on different devices

Solved

store front has a variety of views on different devices

Yonatan1
Excursionist
39 0 4

Hi everyone, I use theme concept, about a week ago, he decided to go completely crazy, suddenly all the images and sections on the site shrink on different devices, if I log in from a computer the site looks different, if I log in from a mobile phone it looks different, and so on..
It looks bad on the computer, I have no other word to describe it. I tried to contact the programmers of the theme but it will take them over 28 hours to answer my ticket and I have a deadline until next Thursday to publish the site and start selling.
I have to fix it. Please help me!
I have attached some pictures to illustrate the problem.
This is the address of my website: audiox.co.il

 

button and text out.PNGcollections alive.PNGcollections optimised.PNGfooter alive.PNGfooter died.PNGpictures.PNGsection alive.PNGsection died.PNGtext.PNG

Jonatan
Accepted Solution (1)
WalkYourStyle
Trailblazer
450 54 69

This is an accepted solution.

Replace the previous code I gave you with this one:

#shopify-section-template--15806443913325__faq .page-width,
#shopify-section-template--15806443913325__image-with-text-1 .page-width{
{
   padding-inline: initial;
}

.faqs.with-background .title-wrapper{
   flex-direction: column;
}

View solution in original post

Replies 15 (15)

WalkYourStyle
Trailblazer
450 54 69

If you visit your website, right-click and select 'Inspect.' Then, click on the device/screen option and adjust the screen width. On my computer, everything looks fine, and I don't notice any significant differences. The only noticeable change is in the footer, but I don't see that as an issue.

Yonatan1
Excursionist
39 0 4

try to enter this product page as example:  https://audiox.co.il/products/%D7%9E%D7%92%D7%9F-%D7%9C%D7%90%D7%95%D7%96%D7%A0%D7%99%D7%95%D7%AA-%D...

it looks very bad, the size is not the same 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

Again it looks fine on mine? Can you please tell from what width it looks bad to you?

Yonatan1
Excursionist
39 0 4

can you share a picture of what you are seeing, have a look on what i see.

Yonatan1_0-1724059201041.png

 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

malakies.PNG

I don't see the problem. Can you explain to me what you don't like, so maybe I can try to help you?

Yonatan1
Excursionist
39 0 4

The text is swallowed by the images, I am now attaching a photo of the theme editor through Shopify so that you can see how it should look.

Yonatan1_0-1724060660668.png

 

Jonatan
Yonatan1
Excursionist
39 0 4

if you go little bit down in the same page you will see the faq section, which is also went crazy.
have a look on the picture

Yonatan1_0-1724060812545.png

 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

Add this code at the end of your 'theme.css' file

#shopify-section-template--15806443913325__collage .page-width{
  padding-left: 40px;
  padding-right: 40px;
}

 

Yonatan1
Excursionist
39 0 4

amazing! but it fixed only one part of the page.

have a look on the screen shotsCapture.PNG

Jonatan
Yonatan1
Excursionist
39 0 4

i would be happy if you can help me fix the faq part of the product page.

and this section also

Yonatan1_0-1724068135486.png

 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

Add this code in 'theme.css'

#shopify-section-template--15806443913325__faq .page-width{
   padding-inline: initial;
}

.faqs.with-background .title-wrapper{
   flex-direction: column;
}

What's wrong with this section?

WalkYourStyle_0-1724070212325.png

 

Yonatan1
Excursionist
39 0 4

thank you it worked, about the other section, please look at the screen shot, this is how i want it to be

Yonatan1_0-1724070447432.png

 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

This is an accepted solution.

Replace the previous code I gave you with this one:

#shopify-section-template--15806443913325__faq .page-width,
#shopify-section-template--15806443913325__image-with-text-1 .page-width{
{
   padding-inline: initial;
}

.faqs.with-background .title-wrapper{
   flex-direction: column;
}
Yonatan1
Excursionist
39 0 4

all fixed, thank you dear.

just had to click on some random button in the store front editor....

they have realsed some new version of the theme hahaha

 

Jonatan
WalkYourStyle
Trailblazer
450 54 69

Did you forget to add this code?

.faqs.with-background .title-wrapper{
   flex-direction: column;
}

Because the FAQ  question has a problem still if the screen gets narrower. If you have added it, then replace it with this one:

.faqs.with-background .title-wrapper{
   flex-direction: column !important;
}