https://www.physioworldshop.co.uk/
We have two different banner sizes, one for desktop, one for mobile.
Mobile:
https://cdn.shopify.com/s/files/1/0401/8641/3217/files/Treatment-Couches-Mobile.jpg?v=1709630009
Destktop:
https://cdn.shopify.com/s/files/1/0401/8641/3217/files/Treatment-Couches-Desktop.jpg?v=1709630009
How do I show the correct one on mobile and the correct one on Desktop?
Thanks
To show the correct one on mobile and the correct one on desktop, you’re going to have to change the image tag in your theme’s banner into something else. Then use CSS media queries to determine the screen size and display the correct images for Desktop and Mobile with CSS background-image.
It’s up, but needs some additional styling as you can see
https://puk916ybhxo7qgau-40186413217.shopifypreview.com
Desktop:
Mobile:
blink-image-display-liquid
{%- liquid
if section.settings.alttag
assign alt_tag = alt
else
assign alt_tag = img1.alt
endif
-%}
blink-full-width-image.liquid
{% if section.settings.blockwidth == "constrained" %}{% endif %}
{% render 'blink-image-display', alt: section.settings.alttag, img: section.settings.image, mobimg: section.settings.image_mob %}
{% if section.settings.blockwidth == "constrained" %}
{% endif %}
{% schema %}
{
"name": "Blink Full Width Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image (desktop)"
},
{
"type": "image_picker",
"id": "image_mob",
"label": "Image (mobile)"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "alttag",
"label": "Alt Tag"
},
{
"type": "select",
"id": "blockwidth",
"label": "Block Width",
"default": "full",
"options": [
{
"value": "full",
"label": "Full Width"
},
{
"value": "constrained",
"label": "Constrained"
}
]
}
],
"presets": [
{
"name": "Blink Full Width Image",
"category": "Advanced layout"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Do you want to make the banner to cover the whole width? if yes then it is causing because of
@media screen and (min-width: 481px){
.wrapper {
padding: 0 30px;
}
}
.wrapper {
margin: 0 auto;
padding: 0 15px;
max-width: 1200px;
}
In the theme.scss.css
Your website’s max-width should be 1600px and no margin on the wrapper, instead of wrapper add margin directly to the sections. Hope this helps
Sorry, how do I change this then?
Okay, you can open the theme code editor and find theme.scss.css track the wrapper, and adjust the width.
But make sure to duplicate your theme before editing the code since theme.scss.css is a crucial file.
You can feel free to DM me if you still need any help.
I don’t want to affect anything else on the site. Just the banner. The width of it is correct on the live site https://www.PhysioWorldshop.Co.uk
Is that because the banner slider on your live website is outside of the tag
this is the screenshot of the live website where image slider is outside of the main tag
This is screenshot of your preview store here image is inside of the main tag
Because the image banner is in the main wrapper and there are css on the main wrapper which are not allowing your image to go on full width of screen, try placing the image along with the slider.
OK how do I get it out of that section?
This site works well: https://www.martinschocolatier.co.uk/
Can anyone advise on this?
From what I see, in your live store, the banner-section is part of the header that is why it’s able to stretch all the way. In your preview store, the banner-section is part of your , which is why it’s not able to stretch all the way. As what you’ve understood from Deepaksharma, you need to get the banner out of .
To answer your question: how do I get it out of that section?
