Results 1 to 10 of 10
  1. #1
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Responsive CSS Table: How to emulate columns?

    I'm trying to move items around on a list of products for my categories.

    My site is a zc155e and my template is a clone of Responsive Classic:
    https://001mc.justmedical.biz/index....index&cPath=65

    I mocked up what I'm trying to do in Photoshop:
    Name:  goal.jpg
Views: 67
Size:  19.7 KB

    I can't for the life of me figure out how to do that without table references (td, etc). The closest I can get is by adding this to my css:
    .list-model,.list-price,.list-more{float:right;clear:both;width:15%;}

    If somebody could school me, I'd really appreciate it!

  2. #2
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Responsive CSS Table: How to emulate columns?

    Ok, HUGE progress!

    By applying floats and widths, I was able to get things in the order I want (this is a dif staging site):
    https://002mc.justmedical.biz/index....index&cPath=77

    But now I have a problem with descriptions in the center column bumping right up to the stuff in the right column.

    Here is a more clear illustration:
    https://002mc.justmedical.biz/index....sort=3d&page=2

    Please, dear Lord, somebody help me!

    Edit: Btw, I intentionally sent price to the top, above model.

  3. #3
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    6,979
    Plugin Contributions
    63

    Default Re: Responsive CSS Table: How to emulate columns?

    One comment (and I know it doesn't answer your question): You really don't want to be applying widths to page elements in a responsive design as the widths tend to mess up the displays on the smaller screens.

    If you use FireFox (I'm sure there are similar commands in other browsers), press Ctrl+Shift+M to bring up a size-reduced view and see how your changes have affected the small-screen display.

  4. #4
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Responsive CSS Table: How to emulate columns?

    Quote Originally Posted by lat9 View Post
    You really don't want to be applying widths to page elements in a responsive design as the widths tend to mess up the displays on the smaller screens.
    For a while I was trying to address address issues at the same time by sticking that stuff inside @media xxx {}, but then even those fixes were disappearing.

    For now I'm just trying to fix the desktop version. When I find my solution, I'll work on only applying it to larger screens.

    Thanks for looking in. :)

  5. #5
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    6,979
    Plugin Contributions
    63

    Default Re: Responsive CSS Table: How to emulate columns?

    You could use the CSS display-like-table (https://www.w3schools.com/cssref/pr_class_display.asp) styling to apply a display: table; rule to the outer div, then display: table-row; and display: table-cell; to style the rows (like <tr>) and columns (like <td>).

  6. #6
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Responsive CSS Table: How to emulate columns?

    AWESOME IDEA! Thank you so much!

  7. #7
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Responsive CSS Table: How to emulate columns?

    I added *some* table elements and seem to have made progress...
    https://002mc.justmedical.biz/index....index&cPath=70

    But I'm clearly doing it wrong. When I add margin above price, it bumps my model out of place.

  8. #8
    Join Date
    Dec 2007
    Location
    Acton, California
    Posts
    606
    Plugin Contributions
    6

    Default Re: Responsive CSS Table: How to emulate columns?

    Your after a grid pattern, but your not using containers.. Tables was a easy way of creating grids without allot of work. Tables can be made responsive with some work. I use grids for my shopping cart that when the screen change to a smaller size well stack using @media .. this is a good site to start with responsivegridsystem(DOT)com

    google for responsive grids and you will find many others...

    I'm not a fine of rows and use the grid layout myself.. you can find it in the download section..
    Dave
    Working on a new project... MySite..

  9. #9
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Responsive CSS Table: How to emulate columns?

    That sounds pretty cool.

    I just looked it up:
    https://www.zen-cart.com/downloads.php?do=file&id=3

    Unfortunately, I'm not up for an even deeper challenge.

  10. #10
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    6,979
    Plugin Contributions
    63

    Default Re: Responsive CSS Table: How to emulate columns?

    Quote Originally Posted by davewest View Post
    Your after a grid pattern, but your not using containers.. Tables was a easy way of creating grids without allot of work. Tables can be made responsive with some work. I use grids for my shopping cart that when the screen change to a smaller size well stack using @media .. this is a good site to start with responsivegridsystem(DOT)com

    google for responsive grids and you will find many others...

    I'm not a fine of rows and use the grid layout myself.. you can find it in the download section..
    Thanks for the reference, @davewest; I've got that bookmarked!

 

 

Similar Threads

  1. v155 Basic Questions about Responsive CSS
    By Feznizzle in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 27 Oct 2017, 10:01 PM
  2. v155 Customize Per Page responsive css?
    By soxophoneplayer in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 29 Jun 2017, 03:25 PM
  3. Replies: 4
    Last Post: 28 Sep 2016, 03:13 AM
  4. v139h How to separate product name and description into different table columns?
    By kbrown in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 13 Jun 2012, 08:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR