Solved

Different Banner Sizes Mobile & Desktop Vintage Theme

ChrisW3
Pathfinder
213 1 9

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

Accepted Solution (1)
deepaksharma
Shopify Partner
448 62 92

This is an accepted solution.

Is that because the banner slider on your live website is outside of the <main> tag

this is the screenshot of the live website where image slider is outside of the main tag

deepaksharma_0-1709639912362.png

 

This is screenshot of your preview store here image is inside of the main tag

deepaksharma_1-1709639981255.png

 

 

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.

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com

View solution in original post

Replies 11 (11)

PaulMartin
Shopify Partner
193 34 62

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.

ChrisW3
Pathfinder
213 1 9

It's up, but needs some additional styling as you can see

https://puk916ybhxo7qgau-40186413217.shopifypreview.com

 

Desktop:

ChrisW3_0-1709633418364.png

 

Mobile:

ChrisW3_1-1709633440348.png

 

 

 

 

 

blink-image-display-liquid

   {%- liquid
      if section.settings.alttag
        assign alt_tag =  alt
        else
        assign alt_tag = img1.alt
        endif
    -%}
    <picture>
        {% if mobimg %}
          <source media="(max-width: 320px)" srcset="{{ mobimg | img_url: '320x' }}">
          <source media="(max-width: 480px)" srcset="{{ mobimg | img_url: '480x' }}">
          <source media="(max-width: 600px)" srcset="{{ mobimg | img_url: '600x' }}">
          <source media="(max-width: 1000px)" srcset="{{ mobimg | img_url: '1000x' }}">
        {% else %}
          <source media="(max-width: 320px)" srcset="{{ img | img_url: '320x' }}">
          <source media="(max-width: 480px)" srcset="{{ img | img_url: '480x' }}">
          <source media="(max-width: 600px)" srcset="{{ img | img_url: '600x' }}">
        {% endif %}
        <source media="(max-width: 900px)" srcset="{{ img | img_url: '900x' }}">
        <source media="(max-width: 1200px)" srcset="{{ img | img_url: '1920x' }}">
        <source media="(max-width: 1500px)" srcset="{{ img | img_url: '1920x' }}">
        <source media="(max-width: 1700px)" srcset="{{ img | img_url: '1920x' }}">
        <source media="(max-width: 1920px)" srcset="{{ img | img_url: '1920x' }}">
        <!-- Fallback img element -->
        <img width="{{ img.width }}" height="{{ img.height }}" data-src="{{ img | img_url: '1200x' }}"  alt="{{ alt_tag }}" style="width: 100%;height:auto;"  loading="lazy" >
    </picture>

 

blink-full-width-image.liquid

{% if section.settings.blockwidth == "constrained" %}<div class="page-width">{% endif %}  
    <a href="{{ section.settings.link }}">

      {% render 'blink-image-display', alt: section.settings.alttag, img: section.settings.image, mobimg: section.settings.image_mob %}

    </a>
{% if section.settings.blockwidth == "constrained" %}</div>{% 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 %}

 

deepaksharma
Shopify Partner
448 62 92

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

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
ChrisW3
Pathfinder
213 1 9

Sorry, how do I change this then?

deepaksharma
Shopify Partner
448 62 92

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.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
ChrisW3
Pathfinder
213 1 9

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

deepaksharma
Shopify Partner
448 62 92

This is an accepted solution.

Is that because the banner slider on your live website is outside of the <main> tag

this is the screenshot of the live website where image slider is outside of the main tag

deepaksharma_0-1709639912362.png

 

This is screenshot of your preview store here image is inside of the main tag

deepaksharma_1-1709639981255.png

 

 

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.

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
ChrisW3
Pathfinder
213 1 9

OK how do I get it out of that section?

ChrisW3
Pathfinder
213 1 9

This site works well: https://www.martinschocolatier.co.uk/

ChrisW3
Pathfinder
213 1 9

Can anyone advise on this?

PaulMartin
Shopify Partner
193 34 62

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 <main>, 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 <main>.

To answer your question: how do I get it out of that section?
- Follow how your live store added the banner image, then apply that to your preview store.