Hey there! I'm currently working on a webpage layout that includes a logo and a table. To achieve this, I've used display flex for the wrapper element. However, I've noticed that when viewing the page on mobile devices, the padding of the table seems to disappear. Can anyone help me figure out how to fix this issue? Here is what my layout looks like normally: https://i.sstatic.net/PhJ4a.png And here is what I am aiming for: https://i.sstatic.net/8I8TO.png Unfortunately, this is what happens with the current code: https://i.sstatic.net/C5ESb.png
Here's a snippet of my code:
.wrapper
{
min-height: 100%;
overflow: hidden;
}
._container
{
max-width: 1310px;
margin: 0px auto;
padding: 0px 45px;
box-sizing: content-box;
}
.main_section{
width: 100%;
display: flex;
}
.table_text table{
width: 100%;
display: block;
}
.table_text tbody,
.table_text th{
width: 100%;
display: block;
}
.table_text tbody{
overflow-x: auto;
}
.table_text tbody tr{
width: 100%;
display: table-cell;
}
.table_text td{
width: 100%;
display: block;
}
.table__container {
padding: 0px;
}
.yacheika td{
padding: 34px 25px;
}
.yacheika th{
padding: 34px 25px;
text-align: left;
}
.title {
text-align: center;
padding-bottom: 40px;
} <div class="wrapper _container">
<div class="main_section ">
<div class="header__container ">
<img src="logo.svg" alt="logo" class="header_img">
</div>
<div class="table__container">
<div class="title">Table name</div>
<div class="table_text">
<table>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
</div>
</div>