[Resolved] Need some help with CSS and tables

Home Forums Support [Resolved] Need some help with CSS and tables

Home Forums Support Need some help with CSS and tables

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1263427
    Matt

    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>
    #1263489
    David
    Staff
    Customer Support

    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%;
        }
    }
    
    #1263553
    Matt

    Awesome! Thanks bud!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.