RESPONSIVE TABLE

Hello i am making an e commerce website, i have made the website but having trouble with who to make my table responsive . I will also paste a photo . Please help me with this problem.
25 Replies
Azyrum
Azyrum•17mo ago
add a width of 100% to the elements you have a max-width
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
@azyrum not the solution 😢
Jochem
Jochem•17mo ago
share your code in a way that people can run it, preferably in codepen or a codesandbox. It'll be much easier for people to help
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
Ok
Jochem
Jochem•17mo ago
check out #How To Ask Good Questions, there's some info in there as well
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
table{ padding: 0; margin: 0; margin: 50px auto; margin: 10px auto ; font-family: monospace; padding: 12px 0; color: #555; font-size: 29px; box-shadow: 0 5px 10px 15px black;

text-align: center; max-width: 1300px; background: rgb(240, 128, 128); } thead{ font-family: 'Coiny', cursive; width: 30%; color: #fff ; text-transform: uppercase; font-size: 40px; padding: 90px; text-align: center; padding: 30px; font-size: 30px;
} th{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} tr{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } td{ word-spacing: 5px; } @media screen and (max-width :1390px) { table{ max-width: 480px; height: 690px; } } I have try to minimise the size with width but no improvement in the size Tried *
Jochem
Jochem•17mo ago
please use a code block with syntax highlighting like described in the thread I linked, and you'll also have to include html, just CSS isn't super useful if people want to actually run your code
Jochem
Jochem•17mo ago
and a codepen (https://pen.new) is better still, so people can see your code live
CodePen
...
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
<table> <thead> <tr> <th >Images</th> <th >Name</th> <th >features</th> <th >quality</th> <th >case</th> </tr> </thead> <tbody> <tr> <td > <img class="earbud" src="54.jpg" alt=""></td> <td class="rr"> JVC Compact True Wireless Earbuds </td> <td class="rr"> LONG BATTERY LIFE,3 SOUND MODES </td> <td class="rr"> Fine</td> <td class="rr"> Fine</td>
</tr> <tr> <td > <img class="earbud" src="37.jpg" alt=""> </td> <td class="rr"> JLab Go Air True Wireless Bluetooth</td> <td class="rr"> LONG BATTERY LIFE,SMALLER DESIGN</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" src="53.jpg" alt=""></td> <td class="rr"> ORIbox Wireless Earbuds</td> <td class="rr"> Easy Touch Control,Easy Touch Control</td> <td class="rr">Best</td> <td class="rr">Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" id="fast" src="27.jpg" alt=""></td> <td class="rr"> Osdfono Wireless Earbuds Bluetooth 5.2 Headphones</td> <td class="rr"> IPX5 Sweatproof,Designed for Sports & Comfortable Fit</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td><img class="earbud" id="fast" src="31.jpg" alt=""></td> <td class="rr"> ekids Spiderman Wireless Bluetooth Headphones </td> <td class="rr"> Quality adjustable headband and padded ear cushions for maximum comfort, Foldable design ideal</td> <td class="rr"> Perfect</td> <td class="rr"> Prefect headset for Kids</td>
</tr> <tr> <td><img class="earbud" id="fast" src="46.jpg" alt=""></td> <td class="rr">Sam Gear USA Wireless Earbuds Bluetooth 5.0 Headphoness </td> <td class="rr"> Super-Strong Bluetooth,Ultra-large Battery Capacity,Lightweight and Comfortable Design</td> <td class="rr"> Perfect</td> <td class="rr"> Great Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="47.jpg" alt=""></td> <td class="rr">TOZO T10 Bluetooth 5.3 Wireless Earbuds </td> <td class="rr">Stereo Sound Quality,PX8 Waterproof, advanced Bluetooth 5.3 technology</td> <td class="rr"> Good</td> <td class="rr"> Great Case with Cool Charging port </td> </tr> <tr> <td><img class="earbud" id="fast" src="51.jpg" alt=""></td> <td class="rr">Skullcandy Dime True Wireless Bluetooth Earbuds </td> <td class="rr">Ultra comfortable design ,Rad Music Quality,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Cool Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="52.jpg" alt=""></td> <td class="rr">Skullcandy Jib True 2 Wireless Bluetooth </td> <td class="rr">Supreme Sound ,33 hour battery time,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Good </td> </tr> </tbody> <tfoot>
</tfoot> </thead> </table> I did use html it's just than the code was to long
Jochem
Jochem•17mo ago
that's why something like codepen is so useful as well, it's free to sign up
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
That* https://codepen.io/Hamza-Nawaz-the-solid/pen/oNQYWor Why isn't my css properties showing
Jochem
Jochem•17mo ago
you set the preprocessor to stylus you have to set it to none, you've just got vanilla css
Jochem
Jochem•17mo ago
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
How to be better at css . I have 6 month of experience but still i am at a medium level
Jochem
Jochem•17mo ago
"vanilla" in this context just means "doesn't use a preprocessor", not that it's bad or whatever. How to get better? Watch tutorials, build projects, repeat. anyway, regarding your code, what's wrong with it exactly? It shifts width at 1390px viewport width, what else do you want it to do?
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
To be responsive and to be shown at every mobile , tablet and many more
Jochem
Jochem•17mo ago
responsive isn't a magic word. If you take your max-width's off though, it'll shrink and grow width with the viewport
Chris Bolson
Chris Bolson•17mo ago
you will also need to reduce your font size - it is very large at the moment, which may be what you want on large screens, but it is preventing the table from reducing in width on smaller screens
Jochem
Jochem•17mo ago
you should also be setting your font-size in rem not px
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
I don't understand when do it in 1060 it ruining my website and disturbing my nav bar and showing white background
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
But the white background is still showing
Jochem
Jochem•17mo ago
right, but that's not part of your codepen. I'm really not sure what you expect it to do. "Responsive" effectively just means "it works on many screens", so it's not really enough for someone to solve the problem you're having without a lot of extra description and maybe also the context of the rest of your website. the table, without max-width set, is responsive. If it then doesn't fit with the rest of your site, we'll need to see the rest of your site to be able to help with that
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
https://codepen.io/Hamza-Nawaz-the-solid/pen/VwVmbJe This might help you @jochemm Anyone
Jochem
Jochem•17mo ago
you have a lot of media queries, why are you only setting the width on the table in one? I think what's happening is what Chris said, your table can't get narrower because the font size is too big. It won't shrink past a certain size simply because then the text would flow out of the table reduce the font size, and it should shrink further.
Want results from more Discord servers?
Add your server