Skip to content
OverviewSolutions
25
Comments
16

Yasmine

@Yasmine10Belgium710 points

Hi! 👾 I currently work as a frontend developer. On here trying to improve my skills and learn new things.

I’m currently learning...

React and animations

Latest solutions

View more solutions

Latest comments

  • Yasmine•710
    @Yasmine10

    Hi @CuriousFullStacks

    When you remove the width: 70% in your <p> element and add padding-inline: 2rem; , the text should look the same as the design.

    Hope this helps 😊

    Marked as helpful
  • Yasmine•710
    @Yasmine10

    Hi @cacti00

    An easy way to display your image and content side by side is to use grid, you could do something like this in your .product-card class:

    display: grid; 
grid-template-columns: repeat(2, 1fr);  /* use grid-template-columns: 1fr; for mobile view */

    I also saw that you're using divs with an img inside to display the image in your html. There is an html element for that actually: '<picture>'

    Here's an example of what that would look like for this project:

    <picture>
  <source srcset="images/image-product-desktop.jpg" media="(min-width: 50em)" />
  <img src="images/image-product-mobile.jpg" alt="" /> 
</picture>

    Hope this is helpful 😊

    Marked as helpful
  • Yasmine•710
    @Yasmine10

    Hi @bilguun1130

    The reason for the spacing issue is because you used grid and then you downsized the icon image with percentages. It doesn't recognise that the icon image is not at 100% anymore, but if you use for example height: 3rem on the avatar image it should work just fine.

    To prevent that issue in the future you could also add align-items: flex-start to your .main-content class, that way you can also see that the image is still height: 100% instead of 30%

    Otherwise great solution!

    Hope this helps 😊

    Marked as helpful
  • Yasmine•710
    @Yasmine10

    Hi @atmaram-kambli,

    Great job on your first project!

    To center the main container you could change the following in your code:

    • in the body:
    body {
font-family: 'Roboto Slab', serif;
text-align: center;
background-color: hsl(212, 45%, 89%);
height: 100%;    // -> remove this and replace with min-height: 100vh;
display: flex;
flex-direction: column;     // -> remove this because this doesn't do anything
align-items: center;
justify-content: center;
}
    • in your .main class:
    .main {
background-color: hsl(0, 0%, 100%);
border: 2px solid red;
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 450px;
width: 350px;
margin-top: 100px;   -> remove this line
display: flex;
align-self: center;
flex-direction: column;
align-items: center;
}

    I also saw that your qr code image is a little stretched, to fix that you could add the following in your css:

    #qr {
width: 100%;
object-fit: cover;     // -> add this line
}

    Hope this helps!

    Marked as helpful
  • Yasmine•710
    @Yasmine10

    Hi @ClaireLise-dev 👋

    Congratulations on finishing the challenge! It looks really good!

    I don't see any problems with scrolling in a 1440px screen. To me it looks good.

    For the mobile menu you actually don't need to write a second <nav> like you have done. You can just use a media query and change the styling when it's below or above a certain breakpoint.

    And to make the mobile menu with only HTML and CSS, you can use a hidden checkbox with a label. In the label you place the hamburger icon and depending on when the checkbox is checked or not, you can show or hide the mobile menu. I've got a codepen that shows you how to do this 😊

    Hope this helps!

    Marked as helpful
  • Yasmine•710
    @Yasmine10

    Hi @Billygotclout 👋

    Good job on finishing this project!

    To make the navbar responsive with HTML and CSS you can use a hidden checkbox and a label. Inside the label you place the hamburger icon and depending on when the checkbox is checked or not you show or hide the navbar.

    I also have a codepen that could help explain how to do this exactly 😊

    Hope this helps!

View more comments