Skip to content
OverviewSolutions
7
Comments
1
Hamidar
@MementoMori2323

All comments

  • Tom Kelly•40
    @tom-kelly9Submitted over 1 year ago

    I think I used margins when I should have used padding which may be affecting the sizing when in mobile view. please advise. Any other advice welcome

    html, css, grid, flexbox

    2
    Hamidar•160
    @MementoMori2323Posted over 1 year ago

    I verified your code and I think is great, however I'd lie to provide you with some feedbacks and advises!

    Adjust the media query size using the devs tool resizing the screen. You can also use clamp on font (e.g. font-size: clamp(12px, 2vw, 16px); for a more smooth resizing. You can also use the <picture> tag to manipulat how pictures behaves.

    e.g:

    • <picture>
    • <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    • <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    • <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    • </picture>

    [text]https://www.w3schools.com/tags/tag_picture.asp

    this will allow to automatically switch between images depending on the screen size without using media query for it.

    You can also use the following CSS config as default lines. It helps a lot when manipulating CSS in general by setting a default confg then customizing with your sections/divs

    • *{ -padding: 0; -margin: 0; -box-sizing: border-box; }
    • html{ scroll-behavior: smooth; }
    • img, svg, picture{ display: block; max-width: 100%; }

    This can be like the very first CSS code you use, then you continue working on everything else.

    Keep up the great work!

    2