Jump to content


Photo

Responsive comparison tables


  • Please log in to reply
5 replies to this topic

#1 ShaneO

ShaneO

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 10 August 2017 - 11:00 AM

Hello

 

I'm building a comparison table for a site I'm working on, and I'm trying to achieve a similar result to THIS.

 

I can build the desktop version no problem, but when the table is viewed on mobile/tablet, the different elements in the table aren't lining up as I would like (similar to uSwitch example with the credit card image on top left, and 'apply' button at the top right).

 

Can anyone advise on the best way to achieve this? I've tried Googling but haven't been able to find anything.

 

My web design / coding knowledge is basic / intermediate. 

 

Thanks very much.



#2 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,116 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 10 August 2017 - 11:10 AM

I'd suggest looking into responsive tables, see https://css-tricks.com/responsive-data-tables/. 



#3 ShaneO

ShaneO

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 10 August 2017 - 11:44 AM

I'd suggest looking into responsive tables, see https://css-tricks.com/responsive-data-tables/. 

 

Thanks for that, I had seen it before.

 

I'm really trying to understand how to position certain elements of a table in a certain order once in mobile / tablet view. I don't think that guide covers it - unless I've missed something?



#4 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,116 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 10 August 2017 - 12:58 PM

In the example you gave that sort of collapsing is done with breakpoints and float. Note the card size doesn't change; that's their set size the rest floats and uses media queries to cancel the float i would hazard a guess.

<div class="image">
Image Here
</div>
<ul class="list">
<li>Point: 1</li>
<li>Point: 2</li>
<li>Point: 3</li>
</ul>

and css ...

.image {
  width:200px;
  height:100px;
  background:pink;
  float:left;
}
.list {
  background:green;
  margin:0;
  list-style:none;
}
@media all and (max-width: 600px) {
  .image {
    float: none;
  }
}

Fiddle Here.

 

Edit: You can multi stack side by side and float either way. Work out what the collapsed order would be, then work out which should float where and until when.

 

Extra Edit: Sorry also see they decide to dump the 'transfer fee' from display on smaller screens to keep a nice 3 x 3 layout. Also note each only has 3 bullet points, again fits their sweet spot. Remember to check the info you can rely on coming out a dataset, missing information or clients wanting to throw in an extra field can end up the proverbial in in the ass.


Edited by BrowserBugs, 10 August 2017 - 01:05 PM.


#5 ShaneO

ShaneO

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 10 August 2017 - 01:06 PM

In the example you gave that sort of collapsing is done with breakpoints and float. Note the card size doesn't change; that's their set size the rest floats and uses media queries to cancel the float i would hazard a guess.

<div class="image">
Image Here
</div>
<ul class="list">
<li>Point: 1</li>
<li>Point: 2</li>
<li>Point: 3</li>
</ul>

and css ...

.image {
  width:200px;
  height:100px;
  background:pink;
  float:left;
}
.list {
  background:green;
  margin:0;
  list-style:none;
}
@media all and (max-width: 600px) {
  .image {
    float: none;
  }
}

Fiddle Here.

 

Edit: You can multi stack side by side and float either way. Work out what the collapsed order would be, then work out which should float where and until when.

 

Extra Edit: Sorry also see they decide to dump the 'transfer fee' from display on smaller screens to keep a nice 3 x 3 layout. Also note each only has 3 bullet points, again fits their sweet spot. Remember to check the info you can rely on coming out a dataset, missing information or clients wanting to throw in an extra field can end up the proverbial in in the ass.

 

Thanks very much for taking the time. I'll have a play with the code and see if I can crack it.



#6 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,116 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 10 August 2017 - 01:16 PM

 

Thanks very much for taking the time. I'll have a play with the code and see if I can crack it.

 

No problem. I was taught "anything is possible it just costs more *insert word*". The easiest way to work is backwards. Start with the dataset and see what info needs to go in what order, then work it out. We have nth:child, display and float at our disposal, experiment ;)






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users