Would like to get some help on the below issue please
On my Refresh theme, I will duplicate my current live theme and work on changes. However when I duplicate, the slideshow shows both Desktop and Mobile version. I faced similar issues before and solved it with the below code.
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
It is something like this:
Desktop slideshow (4-5 banners)
Mobile slideshow (4-5 banners)
How do I only show what the slideshow that is specific to my device?
Thank you very much for your help
My apologies, perhaps I wasn’t clear enough
I have this error on my website when I duplicate my theme code. It shows both the desktop and mobile slideshow
my current live website previously has this problem too, but I fixed it by adding this code
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
This means that I cant duplicate my themes anymore without facing this duplicate issue.
@bryanquek
Can you please share the theme url for me to preview and check.
Also please check the value for below setting in duplicate theme’s section.
section.settings.slide_height
@JasmeetVT14313
I dont see any value but the code is as such in slideshow.liquid.
Preview link is this
https://gwdopple09s9i0ic-78218461496.shopifypreview.com
Thank you for your help in this!
@bryanquek
Upon checking I found that you have created different slideshow sections for desktop and mobile.
So add the below code to end of base.css file
@media screen and (min-width: 750px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:block}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:none}
}
@media screen and (max-width: 749px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:none}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:block}
}
NOTE: If the section is removed and re-added then the section ID will differ and then the above code will have to be updated accordingly.
1 Like
thank you @JasmeetVT14313
It seems to work now. However, is there a faster way to do the section id?
Currently I am right-clicking on the slideshow, and then scrolling to see the correct code.
@bryanquek
Great to hear it worked for you, Can you please hit Like and mark it as solution.
There no faster way,
Each section will have a section tag
as in below screenshot and it will be bit easier this way for you I believe
@JasmeetVT14313
Unfortunately the additional line of code that I’ve added led to errors in other sections. The size of the section below has the images size increase by alot.
Sharing the screenshots of the original live site VS preview site with errors. Thank you.
Hello @bryanquek
The code which i gave you should not reflect on any other section in any case.
However, can you please share the preview URL of both the themes.
Also, you can please try commenting or removing my code and see if the issue still exists or not.
Hello,
You’re right, tested by removing it and your code did not cause the issue.
Preview link with enlarged ‘Current Buys’ section
https://btz0yxnmqz20uzh4-78218461496.shopifypreview.com
Preview link of the current live link
https://oppostoresg.com/?_ab=0&_fd=0&_sc=1
Hi @bryanquek
Good to here that.
Can you please hit LIke and mark my answer as a solution as your actual issue has been resolved.
As for your below section is concerned, I can see that you have set the desktop to display 2 slides and you might have made other layout changes in the section. You can try setting it up by checking your other theme settings.
Hope my reply will help you
Please hit Like if it helps
@JasmeetVT14313 could you guide me on how to fix this error? the image is too large.
@bryanquek
It seems you have added CSS based on section Id and in this new theme the section Id has changed which is leading the styling not reflecting. You can update the Id as per new theme and check.
Please hit Like if you find this helpful.
does this mean that I have to re-edit my base.css code that you provided earlier?
@bryanquek
This has nothing to do with the styling I gave. That was other section.
The CSS referred in my above reply is the one used here.
I cant find the specific code for this second issue, where do I find the code for it?
