Jump to content

HTML > CSS


Hiker
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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 by Hiker
wrong image
Link to comment
Share on other sites

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">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...