- This topic has 2 replies, 2 voices, and was last updated 3 years, 11 months ago by Matt.
-
AuthorPosts
-
April 30, 2020 at 9:11 am #1263427Matt
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 #1263489DavidStaffCustomer SupportHi 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 #1263553MattAwesome! Thanks bud!
-
AuthorPosts
- You must be logged in to reply to this topic.