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:
www.nico-schlegel.de/tunnel-vision/
Here’s the code:
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!
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:
www.nico-schlegel.de/tunnel-vision/
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!