HTML > CSS

[Hiker]

I could use some help converting obsolete html concerning tables to css for a responsive design site.  

 

Edited November 25, 2020 by Hiker

[JMRKER]

I don't think you have given enough information to help.

You show the errors, mostly on 3 lines of your code, but you don't show the code we could comment upon.
What do you mean by responsive table?  Show fewer rows when resized?  Where is break point determined?

Have you considered using a flexbox or grid layout yet instead of a table for the responsive layout?
Are the cells only images or do they also contain text?

BTW, welcome to the forums.

 

[Sunamena]

You can indeed use a flexbox

In very short: 
 

table {

width: 100%;

}

table tr {

display: flex;

}

table tr td {

flex 1;

}

In more detail: 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Hiker]

On 11/26/2020 at 4:46 PM, JMRKER said:

I don't think you have given enough information to help.

You show the errors, mostly on 3 lines of your code, but you don't show the code we could comment upon.
What do you mean by responsive table?  Show fewer rows when resized?  Where is break point determined?

Have you considered using a flexbox or grid layout yet instead of a table for the responsive layout?
Are the cells only images or do they also contain text?

BTW, welcome to the forums.

 

Sorry about that, there were errors for each image. The code is attached in a text file. The images are png's that link to pdf's. The table is from an older website, I copied into a W3 Schools template.  

 

table code.txt

Edited November 29, 2020 by Hiker
wrong image

[Hiker]

3 hours ago, Sunamena said:

You can indeed use a flexbox

In very short: 
 

table {

width: 100%;

}

table tr {

display: flex;

}

table tr td {

flex 1;

}

In more detail: 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks, I'll check it out.

[Hiker]

I got my flexbox half right. It displays fine on a laptop, two rows which stack if the window  is resized.  However it's just a single column on mobile (tablet of phone), whereas I rather have it stack two or three wide. Any help I find on Google seems to point me towards displaying a single column on mobile which I seem to have covered

I just changed servers so changes to code can take hours to take effect which is really frustrating.  If someone can give me a hand having it display the way I prefer, I'd really appreciate it.  If it's OK, I'll just post the link to the page I need help with. https://johnaldenclub.com/floorplans.html 

Here's the the code that I used for the flexbox on the member.css file.

 /* Flexbox row styles */
  .row-flex {
    margin: 20px auto;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
  }
  .row-flex div {
    border: 1px dashed gray;
    flex: 1 1 100px;
    text-align: center;
    padding: 12px;
  }

Also,
<meta name="viewport" content="width=device-width, initial-scale=1">