Hello,
i cant edit anything in my base.css.
I tried to add code, to hide a slideshow on a mobile phone.
@media screen and (max-width:749px){
#shopify-section-template–24506986365253__slideshow_7nVGDW {display:none; visibility:hidden;}
}
but somehow it doesnt work.
I have already tried inserting other code snippets to change other things, but none of them have ever worked in base.css.
I am using the Dawn theme, version 15.02.
Shop link: https://cardbrothers.de/
Hey @JonasDialga
Can you provide me information with a screenshot that what code you want to remove exactly then I can provide you a proper code guidance.
Best,
Moeed
Hey @JonasDialga,
I found a mistake in your code.
You are using the Shopify Section ID selector that always change when you make theme live or duplicate.
So this is not ideal solution for the css and it might not work well as per your request.
Could you please apply the css with the {{section.id}}.
in your case you need to find the slideshow.liquid file or video-slideshow.liquid file based on your theme structure.
After that add a style tag there and use the section.id. You can copy the below code.
@media screen and (max-width:749px){
#shopify-section-{{ section.id }} {
display:none; visibility:hidden;
}
}
Please let me know if this could help you otherwise I can provide you the bast solution based on your feedback.
Hey, can you tell me again in detail where I need to insert what?
Yes of course I can help with that.
Would you like to tell me what is the file name of the slideshow section by taking a look into the theme file and search for slideshow then you will find the exact name there.
And if possible can you share the 4 digits collab code in the p\m so that I can take a look by myself and fix with the issue.
Waiting for your response.
The proper way would be to use “Custom CSS” setting of the section in question.
Try pasting this code:
@media screen and (max-width:749px){
slideshow-component {
display: none;
}
}
Editing your theme code will make it difficult to update theme to a newer version.
While configuring “Custom CSS” will be transferred automatically.
Hi @JonasDialga,
I checked and the current theme is not declaring the base.css file, instead it is declaring the base.aio.min.css file.
so please try adding code to base.aio.min.css file and check again.
If I helped you, then a Like would be truly appreciated.
Can you maybe tell me what i did wrong?
You’ve pasted the code into your section file.
However, since this is a CSS code, it should be wrapped with <style> .. </style> if you’re pasting it directly into HTML/Liquid template/section.
But again – the proper way is to use “Custom CSS” setting.
Hey Tim,
I removed the snippet from my code file but it doesn’t work, it still displays the code on my website
Make sure you’re editing the right theme.
I can still see the code too:
Since you’ve edited theme code, modified files will be marked with a big black dot on the left.
(ignore the .json files)
Go to “edit theme code”, navigate to sections/slideshow.liquid and either recheck the code below </slideshow-component>
or you can revert to the original version of the file via this dropdown:
Do not forget to save.
Thank you very much tim, you helped me with that. Ive pasted it into the custom css. Now its working!!
Hi @JonasDialga,
Did you change the code at base.aio.min.css file?
Because in theme.liquid file, it is declaring base.aio.min.css file instead of base.css file, so when you change anything in base.css file, it will not be able to recognize.
If I helped you, then a Like would be truly appreciated.
