Show message based on mobile screen orientation

Support
#1

Hello there,

I wanted to show a message just on mobile that first detects on which layout orientation the mobile device is and if it’s not on landscape, will show a message that suggest to do so to experience the homepage at its best, otherwise anyway give the option to go on.

I’m aware that this require some JS and that, this is normally beyond the scope of the support here, but being the case that, this is something quite simple that with a bit of time and trial and error I could implement myself (and I already found several possibilities from which I could start from), I wanted to try to ask here anyway, if somebody would like to chime in and give me advises on how to implement this the best way possible with Pro.

Thanks!

#2

Hello Alberto,

Thanks for writing in!

To accomplish what you have in mind, please insert the messages in the page and assign them with a unique custom ID. You can then use css media queries to hide or show the images. For example, you have message-1 and message-2 as the IDs of the messages. You can make use of this custom css as an example code:

#message-1,
#message-2 {
  display: none;
}

@media (orientation: landscape) {
  	#message-1{
	  display: block;
	}

	#message-2 {
	  display: none;
	}
}

@media (orientation: portrait) {
	#message-1{
	  display: none;
	}

	#message-2 {
	  display: block;
	}
}

For more details, please check this out:

Hope this helps.

#3

Hey! :slight_smile:

Thanks for your answer, yes, that’s helping. But I wanted to have more a pop up like message, would that be possible?

#4

Hi Alberto,

You can try convertplus plugin, It comes bundled with the theme and can be installed via Pro > Validation

Create a modal pop up and make it visible in mobile only

For more information, kinldy refer to the links below


https://cloudup.com/cZUV_E0U-iD

Hope this helps

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.