Jump to content
Lizard Wizard Coding Club

Is It Possible To Change Number Of Columns According To Device?


Recommended Posts

I have a table with 2 columns which looks good on a desktop but when I look at it on a mobile the columns overlap.

 

Is it possible to have 2 columns on a desktop and 1 on a mobile device?

 

My theme is responsive but the table is created via a plugin. I added the padding to the table as a fixed value (padding: 30px;) maybe there is a better way to do it such as a percentage? I don't know if this is possible but it might also solve the problem.

 

http://www.creative-printables.com/autonav/

 

Any help will be much appreciated.

Link to post
Share on other sites

First of all you do not want to use tables for webpage layout, the are for Data Tables only. Early in web design, when there was no other options and website design was static, tables had been used for layout. It's best to use DIVs and CSS to layout the page where DIVs can be dynamically sized and positioned in relation to one another. If you are using Wordpress and your theme does not come with Column shortcodes, noting that columns are not the same as tables, there are several plugins to add this functionality. Some others may have some other options for you as well.

Link to post
Share on other sites

If you're using http://wordpress.org/plugins/autonav/, it appears that the plugin also supports outputting the content in lists, rather than tables. By default, that would show one image per line, but with a little bit of CSS, you should be able to customize the list items to form columns (using "float:left" in the CSS)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...