Help with responsive code for table |
Help with responsive code for table |
PuertoN |
Feb 3 2023, 07:08 AM
Post
#1
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hello,
i am currently in the process of programming a new website for myself and for this i am using a Wordpress template, filling it with some individual HTML/CSS code. My biggest problem is the site is not responsive / the content is too big :-( Please have a look at this, while resizing your window: My Webpage Here’s the code: CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html {height: 100%;} body {min-height: 100%;} table {border: hidden;} p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;} </style> </head> <body> <div style="overflow-x:auto;"> <table> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></td> <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></td> </table> </div> </body> </html> I guess this has to do with the min-width of the pictures in my table…? Ideally the images should always fit the screen in height, while the width of the whole table can vary, making it scrollable sideways. Is there a maybe better way to give the pictures a size-attribute which is fluid on different screen sizes? Or any other way to make this work? I’ve tried so much already. Some help would be greatly appreciated! |
coothead |
Feb 3 2023, 10:45 AM
Post
#2
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there PuertoN,
coothead |
coothead |
Feb 3 2023, 12:09 PM
Post
#3
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there PuertoN,
coothead |
Christian J |
Feb 3 2023, 02:47 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
|
PuertoN |
Feb 4 2023, 05:20 AM
Post
#5
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Ideally the images should always fit the screen in height Do you mean, fit the entire height of the viewport with no other content visible? (I'm asking, since there's CSS for P elements in your code example.) Sorry, no of course all the other elements, like p and h1 above my table should also be visible |
PuertoN |
Feb 4 2023, 05:32 AM
Post
#6
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hi there PuertoN,
coothead thanks a lot for your help! one question remains for me: in this example, how do i set the size of my pictures inside the <li>? because sometimes they vary from portrait to landscape mode |
coothead |
Feb 4 2023, 06:48 AM
Post
#7
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there PuertoN,
coothead This post has been edited by coothead: Feb 4 2023, 06:50 AM |
PuertoN |
Feb 4 2023, 07:59 AM
Post
#8
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hi there PuertoN,
coothead Thanks a lot! The resizing works like a charm, but the ul with li-entries now makes it a vertical view, instead of my desired horizontal 'grid'. That's actually why i choose to use a table to begin with... |
coothead |
Feb 4 2023, 11:03 AM
Post
#9
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Thanks a lot! The resizing works like a charm, but the ul with li-entries now makes it a vertical view, instead of my desired horizontal 'grid'. That's actually why i choose to use a table to begin with...
coothead |
Jason Knight |
Feb 4 2023, 09:20 PM
Post
#10
|
Advanced Member Group: Members Posts: 103 Joined: 25-December 22 Member No.: 28,719 |
I do not see sufficient reason for any of this to have all that excess markup. Table or list it's a waste of code.
Assuming you want them to be columnar but stretch to width: CODE <div class="visionImages"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"> <!-- .visionImages --></div> CODE html, body { height:100%; } .visionImages { display:flex; align-items:stretch; height:100%; } .visionImages img { width:auto; height:100%; } Note you want that 100% on html and body so you can use 100% on the DIV, as 100vh doesn't account for scrollbars in their height, resulting in it being taller than the viewport. One of the things that actually makes vw and vh kinda useless. |
PuertoN |
Feb 5 2023, 09:21 AM
Post
#11
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
I do not see sufficient reason for any of this to have all that excess markup. Table or list it's a waste of code. Assuming you want them to be columnar but stretch to width: CODE <div class="visionImages"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"> <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"> <!-- .visionImages --></div> CODE html, body { height:100%; } .visionImages { display:flex; align-items:stretch; height:100%; } .visionImages img { width:auto; height:100%; } Note you want that 100% on html and body so you can use 100% on the DIV, as 100vh doesn't account for scrollbars in their height, resulting in it being taller than the viewport. One of the things that actually makes vw and vh kinda useless. Unfortunately this does the same a.k.a. displaying the images among themselves, not in a row... Also it seems like this something doesn't respond: for example if I change the height of .visionImages img, there's no change at all in size So frustrating |
PuertoN |
Feb 5 2023, 09:24 AM
Post
#12
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Thanks a lot! The resizing works like a charm, but the ul with li-entries now makes it a vertical view, instead of my desired horizontal 'grid'. That's actually why i choose to use a table to begin with...
coothead That's really strange! I actually don't know if there's a css conflict, but my initial hope was for an easy way to add to my current code |
PuertoN |
Feb 7 2023, 02:19 PM
Post
#13
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Thanks a lot! The resizing works like a charm, but the ul with li-entries now makes it a vertical view, instead of my desired horizontal 'grid'. That's actually why i choose to use a table to begin with...
coothead That's really strange! I actually don't know if there's a css conflict, but my initial hope was for an easy way to add to my current code ? |
Christian J |
Feb 7 2023, 03:11 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Here's another idea. I'm not familiar with CSS Flex or Grid so I tried using calc() instead. It might work with images that are wider than tall as well (haven't tried), if so perhaps the UL width needs to be extended if there are more or wider images). I also made the images appear close to each other.
CODE * {box-sizing: border-box;} html {height: 100%;} body { margin: 0; padding: 0; height: calc(100% - 22px); /* Subtracts at least the assumed thickness of the horizontal scrollbar. */ color: #fff; background-color: #545557; font: normal 1em / 1.5 sans-serif; } h1 { font-size: 1.5em; font-weight: normal; text-transform: capitalize; text-align: center; } ul { width: 450vw; margin: 0; padding: 0; list-style: none; overflow-x: hidden; height: calc(100% - 4em); /* Subtracts at least the assumed height of the H1 element and its vertical margin. */ } ul li {display: inline;} ul li img { height: 98%; margin: auto; } HTML: CODE <body> <h1>"tunnel vision"</h1> <ul> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></li> <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></li> </ul> </body> |
coothead |
Feb 7 2023, 08:05 PM
Post
#15
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there PuertoN,
as you seem to be having problems with the codes that have been presented to you I thought that a working example my be of help to you, so check out the following links... The web page https://www.coothead.co.uk/PuertoN/ Zipped files https://www.coothead.co.uk/PuertoN.zip coothead |
PuertoN |
Feb 8 2023, 08:36 AM
Post
#16
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hi there PuertoN, as you seem to be having problems with the codes that have been presented to you I thought that a working example my be of help to you, so check out the following links... The web page https://www.coothead.co.uk/PuertoN/ Zipped files https://www.coothead.co.uk/PuertoN.zip coothead Wow, that's a real class act, really kind! Will report back... |
PuertoN |
Feb 8 2023, 11:52 AM
Post
#17
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hi there PuertoN, as you seem to be having problems with the codes that have been presented to you I thought that a working example my be of help to you, so check out the following links... The web page https://www.coothead.co.uk/PuertoN/ Zipped files https://www.coothead.co.uk/PuertoN.zip coothead Wow, that's a real class act, really kind! Will report back... Working great so far, thanks! May I ask one more question: I've also good some pictures in landscape mode, but of course they don't fit in size to the portrait-mode pictures now: Is there some way to give those pictures an individual size? |
coothead |
Feb 8 2023, 09:05 PM
Post
#18
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE . May I ask one more question: I've also good some pictures in landscape mode, . but of course they don't fit in size to the portrait-mode pictures now: . Is there some way to give those pictures an individual size? Like this possibly... The web page https://www.coothead.co.uk/PuertoN/ Zipped files https://www.coothead.co.uk/PuertoN.zip I have used the same aspect ratio for all the images- portrait 2:3 and landscape 3:2, and would suggest that you follow suit. coothead |
coothead |
Feb 9 2023, 12:01 PM
Post
#19
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there PuertoN,
If you are wondering what the relationship of this value.... CODE #image-gallery img { width: 24vw; } ...is to this one... CODE #image-gallery img.landscape { width: 54vw; } ...then you need to look at this image... ...which depicts a portrait and landscape image with identical aspect ratios. The landscape image's width is 2.25 times that of the portrait when their heights are identical. Setting the portrait images width to 24vw is arbitrary but does mean that the landscape image's width must be set to ( 2.25 x 24vw ) or 54vw. coothead This post has been edited by coothead: Feb 9 2023, 12:02 PM |
PuertoN |
Feb 10 2023, 01:45 PM
Post
#20
|
Newbie Group: Members Posts: 17 Joined: 3-February 23 Member No.: 28,784 |
Hi there PuertoN, If you are wondering what the relationship of this value.... CODE #image-gallery img { width: 24vw; } ...is to this one... CODE #image-gallery img.landscape { width: 54vw; } ...then you need to look at this image... ...which depicts a portrait and landscape image with identical aspect ratios. The landscape image's width is 2.25 times that of the portrait when their heights are identical. Setting the portrait images width to 24vw is arbitrary but does mean that the landscape image's width must be set to ( 2.25 x 24vw ) or 54vw. coothead Thanks you so much for your help, I owe you more than one beer! To be honest, I've also got some images that don't fit these two aspect ratio, think about a panorama picture... Do you maybe see a way to add something to the code to display these individual dimensions correct without 'destroying' the other images? Also: there've been some captions to the images which I've added via simple <p> inside the <li> before, but since there's no list anymore i'm struggling with adding them simply below each image. |
Lo-Fi Version | Time is now: 28th April 2024 - 07:29 AM |