Responsive Horizontal Layout

In this tutorial we’ll create a horizontal website layout with individually scrollable content panels. We’ll change the layout for smaller screens, making it responsive.

Codrops

69 Comments

Copy and paste this URL into your WordPress site to embed

<blockquote class="wp-embedded-content" data-secret="FQ5BEazLGa"><a href="https://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/">Responsive Horizontal Layout</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/embed/#?secret=FQ5BEazLGa" width="600" height="400" title="&#8220;Responsive Horizontal Layout&#8221; &#8212; Codrops" data-secret="FQ5BEazLGa" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/* <![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
/* ]]> */
</script>

Copy and paste this code into your site to embed