Showing different modal background on laptop and smartphone

1 reply · opened Dec 14, 2017

JjuniobagusDec 14, 2017

hello guys, i'm one step closer to launching my website with this incredible template, this canvas just unbelieveable work, great work semicolon!

so i'm having this issue, i want to show a different image subscription modal on laptop, tablet and smartphone.

i mean, in laptop i want to show, laptop.jpg. , on tablet tablet.jpg, on smartphone smartphone.jpg. how can i achieve this?

my url https://kamirangkai.com/landing

SSemicolon WebSTAFFDec 14, 2017

Hello,

Thank You so much for the Kind Words! :)

This is Definitely Possible and can be achieved using the Responsive Classes:

  1. Add a Custom Class on the Modal Content:

	
		A Simple Example of a Text Modal
		
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!

	
	
		[Close this Modal](#)
	
  1. Then use the following CSS Code:
.device-lg .custom-modal-bg { background-image: url(images/bg-desktop.jpg); }

.device-md .custom-modal-bg { background-image: url(images/bg-notebook.jpg); }

.device-sm .custom-modal-bg { background-image: url(images/bg-ipad.jpg); }

.device-xs .custom-modal-bg { background-image: url(images/bg-iphone-landscape.jpg); }

.device-xxs .custom-modal-bg { background-image: url(images/bg-iphone-portrait.jpg); }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard