Skip to content
OverviewSolutions
14
Comments
12

Rino

@Rhinozer0sMunich340 points

Hi coders,👾✌️

I’m currently learning...

Building responsive websites using HTML and CSS... | Look at my projects and give me suggestions for improvement if you want to. | I would be very grateful about that. | If you want to connect with me, feel free to reach me out 🤝

Latest solutions

View more solutions

Latest comments

  • Rino•340
    @Rhinozer0s

    Hey, i also have some suggestions for improvement for you.🙃

    Espacially for responsive images, there is the <picture> element. The code for it could look like this:

    <picture>
<source media="(min-width:40em)" srcset="image-desktop"> // media query
<img src="image-mobile"> // fall-back image
</picture>

    You can read more about the picture-tag here

    What has always bothered me a lot is the little white border under the image. You can fix this by assigning the display: block; property to the image.

    i hope you find this helpful mate 🤝

    Marked as helpful
  • Rino•340
    @Rhinozer0s

    Hey @Ferabel,

    I'm back and identified your gap-problem. You gave every box a specific width. Remove that and give your parent container a max-width (for example 65rem). Now every box take the given space which is provided by the columns.

    This should fix it ✌️

    Marked as helpful
  • Rino•340
    @Rhinozer0s

    Hey, i can fix your centering issue.

    Use the min-height property for the body and center the minibody with place content This sould look like this:

    body{
min-height: 100vh;
display: grid;
place-content: center;
}

    with min-height: 100vh; you can be sure that the body always has at least the height of the browser window. You can implement it in every project before you start styling.

    and what strikes me is that you created the columns of the minibody with auto. Instead of this you can use the fr Unit. This allows you to divide the available space into as many equal sections as you like. You can read read more about this here: https://css-tricks.com/introduction-fr-css-unit/

    If you have specific questions feel free to reach me out 🤝

    Marked as helpful
  • Rino•340
    @Rhinozer0s

    Hi coder, 👾

    your solution is great! You have a good eye for the details. I have some recommondation for you.

    Grid & Gap

    Remove the margin of your <p> elemets. It is a popular technic to remove the margin of all elements before you start styling. To create the distances you could use the gap property in combination with display: flex; or display: grid; This could look like this:

    *{
margin: 0;
padding: 0;
}

.modal{
display: flex;
flex-direction: column;
align-content: center;
row-gap: 1rem;
}

    Semantic HTML

    Also you sould use semantic html tags like <main> for your modal or <h1> for your headline. Here you can read more about that: https://www.w3schools.com/html/html5_semantic_elements.asp

    I hope you find this helpful 🤝😉

  • Rino•340
    @Rhinozer0s

    Hi @ELU,

    your solution looks great! I have some recommendations for you.

    Centering

    You should remove the width, margin and padding of your <body>. The body should always be on width: 100% (which is the standard for block-elements). Use this to center your main-section:

    body{
display: grid;
place-content: center;}

    Aspect-ratio

    Instead of setting a width and a heigh´t, you could use use aspect-ratio property. Use this in combination with the width of your element and the height will always increase proportionally.

    width: 200px;
aspect-ratio: 1 / 1;

    In addition your sould use responsive untis like rem or em for building your website. Here you can read more about css units: https://www.w3schools.com/css/css_units.asp

    i hope you find this helpfull 🤝

    Marked as helpful
  • Rino•340
    @Rhinozer0s

    Hey @iWatt92 , 😎

    I have a little improvment for your button. You could remove the margin-right property on your <img> element and add this to your button:

    display: flex;
justify-content: center;
align-items: center;
column-gap: 0.5rem;

    Now your content ist centered. Another useful tip relates to the responsive image. For responsive images you should use the <picture> element. This could look like this:

    <picture>
<source media="(min-width:600px)" srcset="image-desktop">
<img src="image-mobile">
</picture>

    you can read more about the picture-tag here: https://www.w3schools.com/tags/tag_picture.asp

    feel free to ask if there are any other questions. If you are not shure how to implement this, you can look over for my project.

    i hope you find that helpfull 🤝

View more comments