change mobile header from desktop header

[stanyul]

Is there any way to make my mobile version have a static image while my desktop view is an image slider?

[TRooInbound · Accepted solution]

@stanyul 

'mob-hide' class need to give in Image module and 'desk-hide' class give to Images slider 

than put above CSS in your CSS file 

Simple!

Thanks  

[TRooInbound · Accepted solution]

Hi @stanyul,

Is this helpful in your page/website?

let me know if any of help needed from our side we are here to happy to help!

If above code not working that please provide us page URL?

Thanks,

Team TRooInbound

[TRooInbound]

Hi stanyul,

Yes, there is way to make Slider For desktop and Image for Mobile,

you have to take both Image Slider Module and Static Image Module,

now add a class in Image Module "*if you don't know how to add a class in a module click here

after adding the class you have to add CSS like this,

.mob-hide {display:none !important}

@media{max-width:640px} {
      .mob-hide {display:block !important}
      .desk-hide {display:none !important}
}

Hope this work!

thanks

[stanyul]

@TRooInbound -

Does the class need to be added to both Image Slider and Image modules.

And the CSS added to the primary style sheet?

I thought I had this but when viewing in preview mode - mobile image not displaying.

Thank you for you help.

[TRooInbound · Accepted solution]

Hi @stanyul,

Is this helpful in your page/website?

let me know if any of help needed from our side we are here to happy to help!

If above code not working that please provide us page URL?

Thanks,

Team TRooInbound

[stanyul · Accepted solution]

Thank you for following up.  I could not get that particular code to work but I did find another way by implementing HubL code.

[TRooInbound · Accepted solution]

@stanyul 

'mob-hide' class need to give in Image module and 'desk-hide' class give to Images slider 

than put above CSS in your CSS file 

Simple!

Thanks  

[stanyul]

I'll give it a go - thanks.  Will let you know what happens

[ashleyidesign]

You can do this with some CSS to hide the slider and show the image on mobile, or build it into a custom module that allows you to change the image per page.