My website "collapsed" and I have no idea what happened and how to fix it. - Dawn Theme

[JohnLindgrenR2]

Hey!

My website: https://carnesmanada.com/ "collapsed" and I don't know why or how to fix it.
I'm using dawn 5.0 and tried to update it to Dawn 15 but the problem persists. 

It's like my website just layered. 

Does anyone know how to solve it? 
I haven't done anything to the code and I haven't added any ap
Please help. 

[swym]

Hi @JohnLindgrenR2,

Thanks for sharing your store URL, and after reviewing your store I noticed that the slideshow section has a CSS code which is impacting the layout of this section.  

To fix this problem kindly follow the steps outlined below:

1. Open the code editor, as shown in the screenshot below.

2. Create a snippet called ‘custom-styles’ and add the below code: 

<style>
   .slider {
     position: relative;
   } 
</style>

3. Include the ‘custom-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file. 

{% render 'custom-styles' %}

It would look something like below: 

4. Done? Now save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym 

[PaulNewton]

Hi @JohnLindgrenR2  👋

I'm using dawn 5.0 and tried to update it to Dawn 15 but the problem persists. 
I haven't done anything to the code and I haven't added any ap

An in place migration may change code depending on methods used.

And such large version differences can cause migration issues again depending on methods used.

Restore a theme backup if available.

If the migration instead of a creating a new theme did change the files of the main theme try rolling back 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-b... 

If you need theme migration services then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

[tim]

Abyshek @swym is right in his diagnosis.

The solution, however is not 100% right.

The problem is that you have some kind of a "Cookie consent" code which adds CSS rules to apply to .slider -- the element with this class is used both by theme and Cookie consent.

I'd blame the Consent developer because they use common class name and redefine CSS rules without consideration.

The code is actually loaded from your Google Tag manager.

You should punish whoever did that for using classes like .modal, .switch, .slider and so on and adding CSS for those without second thought...

This can easily screw half of your store and you would have no idea. Make'em to redo their CSS to use more specific selectors.

Simply adding the code suggested earlier would not help, because Consent code has higher priority (it's located lower). If you add !important to your code, it will break the element in Cookie Consent modal.

As a quick fix, try using this code instead...

slider-component .slider {
  position: relative;
}
slideshow-component .slider {
  position: relative;
}

This will have higher priority then apps CSS rule, but would not apply to the app element.

However, for adding CSS code I am now recommending to use "Custom CSS" (in this case it should be under "theme settings",  not "section settings") rather then editing theme code -- this will help with theme updates.

[JohnLindgrenR2]

Hi Tim!

Thanks for your reply. 
How should I apply the code in order to work? 

I tried to add it as @swym suggested but it didn't work. 

Thanks in advance. 

[tim]

As I said, adding code like you've tried would not work, because CSS rules from Cookie Consent has higher priority (they are loaded later).

Simply put my CSS code in place of the one you've tried earlier --my code has higher specificity and would fix the problem.

However, again -- better option would be to fix the Cookie Consent CSS rules to be more specific, otherwise it's possible that they can affect other areas of the site.

Then you should be able to remove this temporary fix.