Ambadi M P• 380
@Soaphub
Posted
Hey Mudasser Khan, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.
- I reviewed your index.html page and found the use of an internal style sheet which was fine. But I highly recommend an external style sheet for an easy understanding of CSS hierarchy.
- You could media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens.
- Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.
@media (max-width: 575.98px) { ... }
// Small devices (landscape phone)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablet, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }
// XX-Large devices (large desktops, 1400px and up)
@media (min-width: 1400px)
Hope it was helpful...
Marked as helpful
0
