Stack columns one below the other for small screen devices

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

In this tutorial – I would like to show you how to,

Stack columns one below the other for small screen devices

That is to say that – when your application is viewed in Mobile devices with Responsive environment the horizontal columns gets aligned vertically.

Want to know how this works when live? Please download the demo files.

 

How to stack left and right columns one below the other

Have a look at my previous tutorials on Responsive techniques. It might help you on that.

First of all – you need to have your media query within the style sheet or your embedded style section set to a max-width of 480px – if you applications is for iPhone. Else feel free to change to the maximum width of that device.

I’ll take up this scenario, where you have 2 columns. Also, for  example wherein you might have the left column with text/copy and the right column with Image. Please see below:

Using <div>

Using <table>

It is advised to use only <table> tags while you are building column stacks for Email newsletters. Because of browser compatibility issues with <div> tags.

Initially, you will need to float each <div> towards left to achieve left and Right sidebar to accommodate side by side. Please see below:

That makes your columns to render side by side using the float: left; property. Clear property is an optional property, you can feel free to use <br /> instead.

Now you have to apply Styles for the responsive version. Please see below:

That makes your columns to render one below the other. This time around using the float: none; property. Clear property is once again optional.

In the above Styles you will notice that I have floated both the <div>’s at the first instance. That was for the regular version. When we came across the responsive version – I made the float’s to go neutral i.e. float was set to none from left.

How does that work?

1. Initially in the regular version – both the Div’s are aligned one besides the other using float: left property. Without which it would have aligned one below the other. Since Div’s are block level elements by default.

2. When it came to responsive versionfloat was neutralized. So, that means to say that Div’s gained their default property [Block] and aligned one below the other.

What !important does here?

!important is telling the parser that instead of considering the styles that has been written for the desktop version, consider the styles that has been written for the responsive version, which has been coded within the media query.

!important – Telling the parser that the styles that has been embedded into the media query is important than any other style for that particular element in the whole web page.

Please download the demo files to see how it works when live

 

Hope that clears the doubt. If there anything that needs to be addressed. Please let me know.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

4 thoughts on “Stack columns one below the other for small screen devices

  1. I actually want to bookmark this blog, “Stack columns one below
    the other for small screens devices | PepFry” on
    my personal page. Do you care if perhaps I reallydo? Thank you -Alejandro

    • Hi Heather,

      I’ll be happy if you do that!!
      Where do you want to bookmark this post?
      Can you provide me the URL of your personal website….. I would like to have a look at your website.

      Thanks!
      Sumesh M.S

    • Hi Firoz,

      I have had put the source code for stacking layout using table tag just below the source using

      at the top of this tutorial.
      But, for some reason the
      version is not working.
      I’ll investigate on that and post it back here soon with new source for
      version! Thanks for your patience.

Leave a Reply to Firoz Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">