Forums

Responsive landing page

Permalink
I have a client who wants a landing page with two buttons the visitor can choose to take them into two different areas of the site. The challenge is that the animated graphics on the landing page will need to change depending on the device or width of the screen in which it is viewed.

My hope is to buy a responsive theme here and plug in the animation on a blank index page. But I'm needing to find some code or something which will swap out these animations if viewed in a vertical format vs. horizontal.

Anyone pull off anything like this? Any tips are appreciated. Thanks.
jfuqua
 
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Do you mean flash animations or jquery animations?

Rony
jfuqua replied on at Permalink Reply
jfuqua
I'm not creating the animation so not sure though don't want flash since it needs to work on iPad/iPhone.

Would it help to pin down the format first?

Thanks.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
If it is a jquery animations, then you will find a lots of examples in google. Also if you need any professional help, you can PM me with details.

Rony
juliandale replied on at Permalink Reply
juliandale
Try this as a starting point:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
<style>
/* set some defaults */
.portrait_only { display: none; }
.landscape_only { display: block; }
.mobile_only { display: none; }
@media only screen (orientation : portrait) {
  /* STYLES FOR A DEVICE IN PORTRAIT ORIENTATION */
  .landscape_only { display: none !important; }
}
@media only screen (orientation : landscape) {
  /* STYLES FOR A DEVICE IN LANDSCAPE ORIENTATION */
Viewing 15 lines of 37 lines. View entire code block.
jfuqua replied on at Permalink Reply
jfuqua
Thanks for this. I'm beyond my coding abilities here so might need to see about hiring someone for this portion of the project.