store front has a variety of views on different devices

[Yonatan1]

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

[WalkYourStyle]

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]

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-%D7%A1%D7%98%D7%95%D7%9F-%D7%98%D7%90%D7%A5?variant=41786697646189

it looks very bad, the size is not the same

[WalkYourStyle]

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

[Yonatan1]

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

[WalkYourStyle]

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]

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]

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

[WalkYourStyle]

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]

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

have a look on the screen shots

[Yonatan1]

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

and this section also

[WalkYourStyle]

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?

[Yonatan1]

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

[WalkYourStyle]

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]

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

[WalkYourStyle]

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