Skip to content
OverviewSolutions
29
Comments
42

Raphael Holzer

@DigitaleWeltLibraryÖsterreich850 points

I create YouTube Tutorials about Full Stack Developer and IT topics. Prospective Full Stack Developer.

Latest solutions

View more solutions

Latest comments

  • Tarek Islam•220
    @tarekul
    What challenges did you encounter, and how did you overcome them?

    I was challenged by using CSS Flexbox to vertically and horizontally center the card component.

    Responsive QR code using CSS flex

    2
    Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey, good solution 😉.

    I have a little tip for you. In most cases you don't need a media query for cards, like in this case. Add these lines to the classic .card and it should have the same effect.

    margin: 1rem;
max-width: 350px;

    With these two lines you have made the card responsive for all devices. The max width means that the card cannot get larger. The margin, in contrast, is the distance to the edge of the screen when you make the browser window smaller. Now you can delete the media query.

    I hope I could help you

    Happy coding 😊

    Marked as helpful
  • Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey 👋, i like your solution.

    Maybe you forgot to center the card vertically. To center the card give the main element a height of 100dvh. Then can you center it. I like to use grid but you can use flex as well. With display grid you say that all elements in the main tag are grid children. For centering (vertically and horecontely) you use place-items center.

    The style which you can add to your main tag:

    main{
    display: grid;
    place-items: center;
    height: 100dvh;
}

    Happy coding 😉

    Marked as helpful
  • Gian Ramelb•160
    @rame0033
    What are you most proud of, and what would you do differently next time?

    The use of pseudo-code ::before and ::after helped me to add content like accent designs and radio button for the choices in the message container.

    The snippet below will show how I did the styling for the mockup radio button

    .time:before {
  content: '';
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border: 0.1rem solid var(--radio-btn);
  border-radius: 50%;
  margin-right: 0.5rem;
}
    What challenges did you encounter, and how did you overcome them?

    I was hesitant to do the phone app but I discovered to make a container that will have respective divs for every element and class to style each individual properly.

    Solution to Chat App Illustration

    1
    Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey, good soluten.

    I have two points for improvement:

    • Give the main element a height. Then you can't see the footer on the screen.
    • The violet banner on the left side is on the mobile version smaller. Then you can read the text easier.
    main{
      min-height: 100dvh;
}

    I hope i could help you to improve your skills. 😉

    Happy coding 😊

    Marked as helpful
  • Levi Mwendwa•30
    @levit3
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to do this without any frameworks as I have been struggling a bit with plain css. I would like to use frameworks like bootstrap or tailwind css next time.

    What challenges did you encounter, and how did you overcome them?

    I could not center the qr code elements to the center of the page. I managed to center it horizontally using flexbox but failed to do so vertically.

    What specific areas of your project would you like help with?

    Centering of components on the page for it to also be responsive on mobile screens

    A qr-code page designed using plain css

    2
    Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey, good soluten but i have some points for improvment.

    • For centering the card vertically too, you have to set up a height.
    body {
  min-height: 100dvh;
}
    • Never use a fix width. If you want to make the card responsive then use the min function, it will always use the lower width. When the width of the screen is lower than 350px the card get a width of 90dvw. (Learn about the min function)
    #container {
    width: min(350px, 90dvw);
}
    • Making the image responsive too. Firstly i give it a width of 90%. Then i want every side of the image the same size and therefore i use aspect-ratio. Lastly i center the image with margin. (Don´t forget the display: block; for it)
    img#qr-code {
    /* position: relative; */
    /* margin: 17px; */
    aspect-ratio: 1 / 1;
    width: 90%;
    margin: 1rem auto;
    display: block;
}

    My solution of the challenge.

    I hope i could help you to improve your skills. 😉 Happy coding 😊

  • Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey, good soluten but i have some points for improvment.

    • Firstly i want to center the card in the middle of the screen. Therefore i use grid . Then i have to to say that every element in the grid container should be centered verticaly and horicontaly. Normaly every adult container has the height of all the children. We want the full theefore we use height (you can use min-height) too. 100dvh is the full height of the screen without the searchbar.
    body{
    display: grid;
    place-items: center;
    height: 100dvh;
}
    • The card: The gridcentered the card in the middle of the screen, therefore we didn`t need the margin anymore. Never declare the height, because when the headline or the paragraf is longer the content overlaps.* Instead of using pxuse the min function. It means when the screen is widther than 350px the width is equale to 350px. When it´s no widther than 350px it´s 96dvw of the screen width. (The min function makes it easier to make websites responsive. 😉)
    .back{
    /* width: 300px; */
    /* height: 450px; */
    /* margin: auto; */
    padding: 10px;
    width: min(90dvw, 350px);
}
    • The img: As i said before never use px. The best choose is to use % as i used in the CSS. Then use aspect-ratio to make the width and the height the same. And again it´s responsive 😉.
    img {
    border-radius: 20px;
    /* width: 280px; */
    /* height: 280px; */
    aspect-ratio: 1 / 1;
    width: 90%;
}
    • You didn´t need the div with the img in it. This is how I would set it up
           <section>
            <img src="PATH" alt="TEXT" >
            <h1>TEXT</h1>
            <p>TEXT</p>
        </section>

    Maybe it helps you to see my solution of the challenge.😁

    I hope i could help you. Happy coding 😊

    Marked as helpful
  • Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey good solution.

    Small suggestions for improvement:

    • Remove this from your CSS to make both card parts the same size
    • this is how you add the shadow
    // ------------------------------------- remove ------------------------
@media screen and (min-width: 768px){
     .card__puntuation {
        // height: 90%;
       }

       .card__summary {
         // height: 90%;
         // padding: 60px 20px 60px 0px;
// -------------------------------------------------------------

       // the shadow
         box-shadow: 0.5rem 0.5rem rgb(0 0 0 / 10%);
         border-radius: 2rem;
        // end shadow
       }
}
// ------------------------------------- remove ------------------------
.card__puntuation {
   //  height: 50%;
}
// -------------------------------------------------------------

    Happy Coding 😉

    Marked as helpful
View more comments