Skip to content
OverviewSolutions
26
Comments
16
Marley Semende
@Marley-Semende

All comments

  • Marley Semende•570
    @Marley-Semende

    Thank you!

  • Marley Semende•570
    @Marley-Semende

    Hello @Omar-Miled. Your site looks good on big screens, for smaller screens styling you can use the CSS Media queries. Below are some free resources where you can learn about media queries and how you can start using them in your projects: https://css-tricks.com/a-complete-guide-to-css-media-queries/ https://www.w3schools.com/css/css3_mediaqueries.asp And I highly recommend this free course below:

    https://courses.kevinpowell.co/conquering-responsive-layouts I hope this will be helpful. Happy coding:)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @dpiskov. Nice work! Here is my recommendations for learning responsivity. Checkout this free course by Kevin Powell. It really helped me when I was struggling with responsive layouts. I highly recommend checking it out if you havent already. https://courses.kevinpowell.co/conquering-responsive-layouts And also I use an app called Responsively, it's a great tool for checking if your sites are responsive. Happy coding:)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @Lawrencekalaw. nice solution! I found a few issues with your css. In your .container{} you used properties like justify-content and align-items but I noticed that your .container{} is not defined as a flex container. To define a flex container you need to set the display: flex; first. However according to the structure of your HTML file, .home{} is the one to be defined as the flex container not . container{}. Another thing I noticed is that in your media query your .home{} margin is set to 30px 500px 0. This margin may cause .home{} to extend beyond the viewport width on smaller screens. You should adjust the margins to fit the smaller screen sizes.

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @Lerato123. This free tutorial by Kevin Powell, really helped me master responsiveness. I recommend checking it out if you havent already. https://courses.kevinpowell.co/conquering-responsive-layouts

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @EdwinMugo, nice work! In-order to position the button correctly you can make use of the CSS Position property. For example:

    section {
position: relative
} 
button {
position: absolute
/*then you can make use of the top, right, left, bottom properties accordingly in the way you want to position your button */
}

    You can check out this resource to learn more about the CSS Position property: https://developer.mozilla.org/en-US/docs/Web/CSS/position I hope this helps. Happy coding :)

  • Marley Semende•570
    @Marley-Semende

    Hi @Rrdesh07. The issue you encountered with the footer appearing between testimonial cards when resizing for smaller views may be related to the use of height: 100vh for the body and height: 100% for the main container. The problem arises when the body height is constrained to 100% of the viewport height, and there might be other elements such as headers, footers, or margins that are also taking up space. When you set height: 100% for the main container within the body, it means the main container will take up 100% of the height of its parent, which is the body in this case.

    You might consider using min-height: 100vh

    instead of height 100vh on the body, as using min-height on the body guarantees that the body will be at least as tall as the viewport height, but it can expand further if needed to accommodate its content.

    I hope this helps. Happy coding:)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @noelhoppe. Nice work on your project. I checked out your CSS and I noticed that your hover: rule is targeting the <li> elements when hovered, but it's not targeting the <a> (anchor) elements within those <li> elements. If you want to change the text color of the links when hovering over the list items, you should adjust your CSS like this for example:

    li:hover {
    background-color: green;
}

li:hover a {
    color: black;
}

    I hope this helps. Happy coding :)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @PrimeHouston. Nice work on your project. You can add CSS media queries to adjust your styling for different screen sizes. Here are some resources I found quite helpful with learning responsive layouts and the CSS @media :

    • https://courses.kevinpowell.co/conquering-responsive-layouts

    • https://www.w3schools.com/css/css3_mediaqueries.asp

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @Karimullabegamch. To arrange name and image in the same line in CSS you can achieve that using a combination of the display property and inline value and you can also use the vertical align property to ensure that they have the same alignment vertically, for example :

    .name {
display: inline;
vertical-align: middle;
}

    This should give you your desired results. I hope this helps.

  • Marley Semende•570
    @Marley-Semende

    Hi @Abdulrazaq-abunuqta. Nice work overall on your project. However you can make use of the align-items property to align items along the cross axis. This would center your card vertically. For example:

    main {
min-height: 100vh;
align-items: center;
justify-content: center;
}

    I hope this helps. happy coding :)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @SharmarkeAhmed12. Nice work. Adding a border radius to your QR image will make it look as much closer to the original design.

  • Marley Semende•570
    @Marley-Semende

    Hi @jcad57. You can solve the footer issue by using flexbox to layout your page. for exampl if you get rid of the position absolute properties your code would look like this :

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

    I've removed the position: absolute and top, right properties and the 92% width on the card and just stuck to a body width of 100vw;. Margin-right of -50% is also affecting the placement of your card, I'd just stick to the above highlighted display: flex for placement. The transform translate property is also affecting your placement, I'd also get rid of it and stick with just display: flex for the card placement and by removing those properties and using flexbox you will get your desired results. I hope this helps. Let me know if anything is unclear.

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Hi @majdiachour1. Nice work, here is some feedback: Instead of giving your entire .grid container a border-radius at once, you could target the image container and text container seperately and use the border-top-right-radius property for only the top right border and border-bottom-left-radius to target the left bottom radius and the same for the other borders that needs a border-radius. As you can see that by targeting the entire grid container, it gives your inner borders a radius which is different from the original design. try this:

    .pic { border-top-left-radius: -- px; border-bottom-left-radius: -- px; } And do the same for the info selector on the right side. You will notice that this will give your design a straight border in the middle as with the original design. I hope this helps. Happy coding:)

  • Marley Semende•570
    @Marley-Semende

    okay that’s great to hear. If you go below your solution there is a line that says “Design Comparison “, below it you can see a red button that says “Generate New Screenshot”. It allows you to generate a new screenshot for your code updates:)

    Marked as helpful
  • Marley Semende•570
    @Marley-Semende

    Good job overall !! you can also add margins to your card containers to position your elements for example adding a margin to your buttons will make your buttons go a little more inside the card containers, and you can also try text-align: center; to center your text within the container. I hope this helps.