Archived topic

Need some help with CSS and tables

2 replies · Started by Matt on April 30, 2020

Viewing posts 1–3 of 3

April 30, 2020 at 9:11 am #1263427

I'm slowly learning CSS but i'm starting to get the hang of it. I've worked on this stupid table issue for over 24 hours now before asking for help. I am having a problem with getting my sponsor images to display correctly for mobile. I fix it for desktop and it is too small for mobile. I fix it for mobile it's too big for desktop. I'm ripping my hair out cause the things I thought should work don't and I can figure out how to do the tables correctly in div format but it won't allow for opening links in a new window to our sponsors website.

If the tables need to be swapped to div that is fine. I don't know how to work with div quite yet I haven't played with it much. I can read and edit them I just don't trust myself using them. It is showing 2 tables at the moment filled with our sponsors images and links to their website. I need 1 table for desktop to show on desktop and 1 table to show on mobile. I have the inline styling set to make width and height 100% but I can and plan on editing those from 100% to actual pixel size if needed later for mobile. I just need them separate so can size them correctly for mobile separately from desktop and do the same for desktop separate from mobile.

I know the tables aren't separated at the time by the @media and i've tried that but I can't get it to work. I just gave you a cleaner version of what I've been messing with. I'm just not smart enough to get it to work.

At the moment this is my code is:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
@media only screen and (max-width: 678px) {
display: none;
        
}
@media only screen and (min-width: 679px) {
display: none;
}

table {
  font-family: arial, sans-serif;
  box-sizing: border-box;
  border-collapse: collapse;
  width: 100%;
  height: auto;
box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.8);
padding-top: 5px;
}
td, th {
  border: 5px solid #FAFAFA;
  text-align: center;
  padding: 8px;
background-color: white; 
}
</style>

<table>
<h1 style="text-align:center">Sponsors</h1>
<tr>
<td><a href="https://excelboats.com/" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Excel Boats" src="/wp-content/uploads/2020/03/Excel-Boats.png" alt="Excel Boats" /></a></td>
<td><a href="https://www.mudbuddy.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Mud Buddy Outdoors" src="/wp-content/uploads/2020/03/Mud-Buddy.jpg" alt="Mud Buddy Outdoors" /></a></td>
<td><a href="https://www.drakewaterfowl.com/" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Drake Waterfowl" src="/wp-content/uploads/2020/03/Drake-Waterfowl-Systems.jpg" alt="Drake Waterfowl" /></a></td>
<td><a href="https://www.hevishot.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Hevi-Shot" src="/wp-content/uploads/2020/03/Hevi-Shot-Hevi-Metal-Logo-e1588193318723.jpg" alt="Hevi-Shot" /></a></td>
<td><a href="http://www.robrobertsgunworks.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Rob Rober Gun Works" src="/wp-content/uploads/2020/03/Rob-Roberts-Gun-Works.jpg" alt="Rob Roberts Gun Works" /></a></td>
<td><a href="https://j2outdoorsllc.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="J2 Outdoors" src="/wp-content/uploads/2020/03/J2-Outdoors-Logo.png" alt="J2 Outdoors" /></a></td>
</tr>
</table>

<table>
<h1 style="text-align:center">Sponsors</h1>
<tr>
<td><a href="https://excelboats.com/" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Excel Boats" src="/wp-content/uploads/2020/03/Excel-Boats.png" alt="Excel Boats" /></a></td>
<td><a href="https://www.mudbuddy.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Mud Buddy Outdoors" src="/wp-content/uploads/2020/03/Mud-Buddy.jpg" alt="Mud Buddy Outdoors" /></a></td>
<td><a href="https://www.drakewaterfowl.com/" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Drake Waterfowl" src="/wp-content/uploads/2020/03/Drake-Waterfowl-Systems.jpg" alt="Drake Waterfowl" /></a></td>
<td><a href="https://www.hevishot.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Hevi-Shot" src="/wp-content/uploads/2020/03/Hevi-Shot-Hevi-Metal-Logo-e1588193318723.jpg" alt="Hevi-Shot" /></a></td>
<td><a href="http://www.robrobertsgunworks.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="Rob Rober Gun Works" src="/wp-content/uploads/2020/03/Rob-Roberts-Gun-Works.jpg" alt="Rob Roberts Gun Works" /></a></td>
<td><a href="https://j2outdoorsllc.com" target="_blank" rel="noopener"><img class="aligncenter" style="width: 100%; height: 100%;" title="J2 Outdoors" src="/wp-content/uploads/2020/03/J2-Outdoors-Logo.png" alt="J2 Outdoors" /></a></td>
</tr>
</table>

</html>

April 30, 2020 at 9:37 am #1263489

Hi there,

Tables are terrible for responsiveness. Try this instead:

HTML

<div class="logo-wrapper">
    <div class="logo-item">
        <a href="https://excelboats.com/" target="_blank" rel="noopener">
            <img title="Excel Boats" src="/wp-content/uploads/2020/03/Excel-Boats.png" alt="Excel Boats" />
        </a>
    </div>
    <div class="logo-item">
        <a href="https://www.mudbuddy.com" target="_blank" rel="noopener">
            <img title="Mud Buddy Outdoors" src="/wp-content/uploads/2020/03/Mud-Buddy.jpg" alt="Mud Buddy Outdoors" />
        </a>
    </div>
    <div class="logo-item">
        <a href="https://www.drakewaterfowl.com/" target="_blank" rel="noopener">
            <img title="Drake Waterfowl" src="/wp-content/uploads/2020/03/Drake-Waterfowl-Systems.jpg" alt="Drake Waterfowl" />
        </a>
    </div>
    <div class="logo-item">
        <a href="https://www.hevishot.com" target="_blank" rel="noopener">
            <img title="Hevi-Shot" src="/wp-content/uploads/2020/03/Hevi-Shot-Hevi-Metal-Logo-e1588193318723.jpg" alt="Hevi-Shot" />
        </a>
    </div>
    <div class="logo-item">
        <a href="http://www.robrobertsgunworks.com" target="_blank" rel="noopener">
            <img title="Rob Rober Gun Works" src="/wp-content/uploads/2020/03/Rob-Roberts-Gun-Works.jpg" alt="Rob Roberts Gun Works" />
        </a>
    </div>
    <div class="logo-item">
        <a href="https://j2outdoorsllc.com" target="_blank" rel="noopener">
            <img title="J2 Outdoors" src="/wp-content/uploads/2020/03/J2-Outdoors-Logo.png" alt="J2 Outdoors" />
        </a>
    </div>
</div>

CSS:

.logo-wrapper,
.logo-item {
    display: flex;
}
.logo-item {
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    flex: 1 0 16%;
    border: 1px solid;
}
.logo-item img {
    width: 100%;
    max-width: 180px;
}

/* Mobile 3 columns */
@media (max-width: 768px) {
    .logo-wrapper {
        flex-wrap: wrap;
    }
    .logo-item {
        flex: 1 0 33%;
    }
}

April 30, 2020 at 10:22 am #1263553

Awesome! Thanks bud!

This archived topic is closed to new replies.

Start building better websites today.