Make slides mobile or desktop only- Boundless

[dontwantthisseo]

I got a picture on my website that works PERFECT for the mobile version as the first picture you see on the website. But on desktop the picture look horrible. How can i make images in the hero slideshow show on mobile or desktop only?

Thank you :)

[FirstWireApp · Accepted solution]

Hi 

Brooklyn does not support different images for mobile and desktops . But you can customize the code and get it done. Please follow the instructions below to change the code (Please make sure that you first take a backup before doing any changes. I do not take any responsibility if the code is broken, so please do not forget to take a backup first )

1. Open your slideshow.liquid Section, find the <style> element at the top of the file and add this  above the closing </style> tag:

.slick-initialized .hero__slide:not(.slick-slide) {    display: none;
}

2. Find this code towards the bottom of the file 

        "name": "Slide",
        "settings": [

and insert this code right below:

		  {
			"type":		"select",
			"id":		"show_on",
			"label":	"Show this slide:", 
			"default":	"Desktop Mobile",
			"options": [
				{
					"value":	"Desktop Mobile",
					"label":	"Show On Both"
				},
				{
					"value":	"Mobile",
					"label":	"Show On Mobile"
				},
				{
					"value":	"Desktop",
					"label":	"Show On Desktop"
				}
			]
		  },

3. Now find this line (replaced rest of the line with  ... ):

<div class="hero__slide slide--{{ block.id }} ...

and add {{ block.settings.show_on }} after the hero__slide:

<div class="hero__slide {{ block.settings.show_on }} slide--{{ block.id }} ...

4. Save this file and open theme.js.liquid Asset. Find this line below the "Init slick slider" comment (around line 1837?)

onAfterChange: this.afterChange

and add the following right below (first comma is important):

,      responsive: [
        {          breakpoint: 10000, settings: { slide: '.Desktop'}
        },
        {          breakpoint: 480,   settings: { slide: '.Mobile'}
        }      
      ]

Save the Asset.

Now in Theme Customizer, in the properties of the slideshow section, you will be able to change the settings for each slides. Set it whether it will be Shown on Mobile, Shown on Desktop or Shown on Both.