Adapting Table to Mobile

1

Hey everyone!

I am having an issue getting a table to adapt to the width of mobile devices, I need to adapt horizontally (avoid the scroll bar). It’s part of my first ever project, so it may have a simple solution, but I cannot get it to work. The snippet of code is as follows (I copied what I did to make the image adapt).

@media (max-width: 400px){/*Trying to adapt to mobile*/
  #tribute-info table{
    display: fixed;
    max-width: 100%;
    height: auto;
    margin: auto;
  }
}

Does anyone know how I could do this?
If you would like to review the whole project, you can find it here.

Thanks in advanced!

2

Hey,

One way to do it is to reduce some of your elements’ components sizes and the area they take up.
I suggest opening the developer tools and looking at all elements of the table (hover on them and see what is what). You should notice which one of them are taking up the space.

1 Like
3

Thanks kubus!
I appreciate your help, although I am afraid I still cannot figure this out.

This is precisely what I am trying to do.

What I cannot understand is the the ‘max-width’ I am using below, does not automatically adapt the table to be 400px wide. Any ideas?

@media (max-width: 400px){/*Trying to adapt to mobile*/
  #tribute-info table{
    display: fixed;
    max-width: 400px;
    height: auto;
    margin: auto;
  }
}

Thanks for anyones help!

4

Hey!
Just for future reference in case anyone is reading this issue.
The problem is that the table is larger than 400px, so whatever I did in terms of max-width would be ignored.
Managed to get this working by reducing padding and margins when on smaller devices!
Thanks!

1 Like