change mobile header from desktop header

Develop, Build & Integrate CMS Development
1

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

2

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.

3

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

4

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

5

@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.

6

@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

7

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

8

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