1 Attachment(s)
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:
Attachment 17400
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!
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.
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.
Re: Responsive CSS Table: How to emulate columns?
Quote:
Originally Posted by
lat9
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. :)
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>).
Re: Responsive CSS Table: How to emulate columns?
AWESOME IDEA! Thank you so much!
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. :(
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..
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.
Re: Responsive CSS Table: How to emulate columns?
Quote:
Originally Posted by
davewest
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!