I have a cshtml page and the html below renders great on a PC/laptop browser. But on a mobile phone browser like an iphone the jpg Yl8a7fN.jpeg (550x550px) doesn't fit, which forces the user to scroll to the right. The same thing happens to the four jpgs on the element table2 (the user scrolls horizontally to see all 4 images).
So the question is: how can I edit the HTML below so that the 550x550px is reduced to the space in the browser and moves below the first block of text (instead of to the side)?
In the case of the second table "table2", instead of the four jpgs displaying next to each other horizontally, each would also be resized to the available space and they would display vertically instead of horizontally (i.e. one below the other).
In other words, the user would only have to scroll down instead of horizontally.
This is the html (I'm also including a version in codepen):
<table id="table1" style="padding-bottom: 40px;vertical-align: top; margin-left:0; padding-left:0">
<tbody>
<tr>
<td style="text-align: right;">
</td>
</tr>
<tr>
<td width="60%" style="vertical-align: top;">
<span style="line-height: 1.3; font-size: 30pt;font-family: Arial;color: #000000;">
Excepteur sint occaecat cupidatat non proident
</span>
<br />
<br />
<br />
<span style="font-size: 24pt;font-family: Arial">
occaecat cupidatat non
</span>
<br /><br />
<span style="font-size: 20pt;font-family: Arial; line-height: 1.2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</span>
<br /><br />
<span style="font-size: 20pt;font-family: Arial; line-height: 1.0;">
Lorem ipsum dolor sit amet
</span>
<br /><br />
<img src=".jpeg" width="310" height="50" alt="" title="">
</td>
<td width="50%" style="vertical-align: top; overflow:hidden; ">
<div style="text-align: right">
<img src=".jpeg" width="550" height="550" id="img_3c89489e" alt="" title="">
</div>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<table id="table2" cellpadding="3" cellspacing="1" style="padding-bottom: 40px">
<tbody>
<tr>
<td style="vertical-align: top; ">
<hr>
<br><br>
<table>
<tbody>
<tr>
<td style="padding:15px">
<img src=".jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src=".jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src=".jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src=".jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>I have a cshtml page and the html below renders great on a PC/laptop browser. But on a mobile phone browser like an iphone the jpg Yl8a7fN.jpeg (550x550px) doesn't fit, which forces the user to scroll to the right. The same thing happens to the four jpgs on the element table2 (the user scrolls horizontally to see all 4 images).
So the question is: how can I edit the HTML below so that the 550x550px is reduced to the space in the browser and moves below the first block of text (instead of to the side)?
In the case of the second table "table2", instead of the four jpgs displaying next to each other horizontally, each would also be resized to the available space and they would display vertically instead of horizontally (i.e. one below the other).
In other words, the user would only have to scroll down instead of horizontally.
This is the html (I'm also including a version in codepen):
<table id="table1" style="padding-bottom: 40px;vertical-align: top; margin-left:0; padding-left:0">
<tbody>
<tr>
<td style="text-align: right;">
</td>
</tr>
<tr>
<td width="60%" style="vertical-align: top;">
<span style="line-height: 1.3; font-size: 30pt;font-family: Arial;color: #000000;">
Excepteur sint occaecat cupidatat non proident
</span>
<br />
<br />
<br />
<span style="font-size: 24pt;font-family: Arial">
occaecat cupidatat non
</span>
<br /><br />
<span style="font-size: 20pt;font-family: Arial; line-height: 1.2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</span>
<br /><br />
<span style="font-size: 20pt;font-family: Arial; line-height: 1.0;">
Lorem ipsum dolor sit amet
</span>
<br /><br />
<img src="https://i.imgur/YlFZ0iX.jpeg" width="310" height="50" alt="" title="">
</td>
<td width="50%" style="vertical-align: top; overflow:hidden; ">
<div style="text-align: right">
<img src="https://i.imgur/Yl8a7fN.jpeg" width="550" height="550" id="img_3c89489e" alt="" title="">
</div>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<table id="table2" cellpadding="3" cellspacing="1" style="padding-bottom: 40px">
<tbody>
<tr>
<td style="vertical-align: top; ">
<hr>
<br><br>
<table>
<tbody>
<tr>
<td style="padding:15px">
<img src="https://i.imgur/Nxdh1jV.jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src="https://i.imgur/Nxdh1jV.jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src="https://i.imgur/Nxdh1jV.jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
<td style="padding:15px">
<img src="https://i.imgur/Nxdh1jV.jpeg" style="border: 1px solid gray" width="250" height="541" alt="" title="">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>It would look something like below on my iphone so that the user only has to scroll down and not to the right.
Share Improve this question asked Feb 16 at 18:22 fdkgfosfskjdlsjdlkfsffdkgfosfskjdlsjdlkfsf 3,3014 gold badges49 silver badges120 bronze badges1 Answer
Reset to default 0You can use @media CSS to ensure that images and tables are properly arranged on mobile devices.
If you want to add code in HTML, use tag
<style>
@media screen and (max-width: 768px) {
#table1, #table2 {
width: 100%;
}
#table1 tr {
display: flex;
flex-direction: column;
align-items: center;
}
#table1 td {
width: 100% !important;
text-align: center;
}
#table1 img {
max-width: 100%;
height: auto;
}
#table2 table tr {
display: flex;
flex-direction: column;
align-items: center;
}
#table2 table td {
display: block;
width: 100%;
text-align: center;
padding: 10px 0;
}
#table2 img {
max-width: 100%;
height: auto;
}
}
</style>
<table>
...your table code
</table>