Archived topic
Something on this page is breaking my menu or page width?
3 replies · Started by Matt on June 2, 2020
Something on this page is breaking my menu or page width on mobile?
https://imgur.com/6qzNe68
Desktop looks perfectly fine. Mobile is breaking. Not sure what's causing it.
Tables are kind of a pain in the butt but I wouldn't think my table would break my mobile page. :/
Hi there,
it is the Table - they are not responsive at all. Best to use a plugin like tablePress:
Update: By adding <div style="overflow-x: auto;"> above table it fixed the menu not fitting 100% on the page but the tables are still a little off but I adjusted it with changing the margins to auto and lowering the text size so it would all fit on the page and all seems well enough now. Do you see any foreseeable problem in the future doing it this way?
<style>
table, th, tr, td {
border: 1px solid black !important;
padding: 1px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 10px !important;
}
table {
border-spacing: 1px !important;
}
</style>
</head>
<body>
<div style="overflow-x: auto;">
<h1 style="text-align: center;">Echo Duck Calls Pro Staffing</h1>
<table>
<tbody>
<tr><th ><strong>Elite Pro Staff: (50% Discount)
</strong></td>That just makes it so the table is scrollable horizontally. No issues with it if it works for you :)
