Skip to content
OverviewSolutions
12
Comments
8
Mohammed Ahmad Hussain
@mah07308

All comments

  • Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    You need flexbox on the body to center div both horizontally and vertically within it.

    body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
    Marked as helpful
    0
  • Masood Acheampong•210
    @Masood-zoneSubmitted over 1 year ago

    I have been able to build this QR component as closely as it has been given me but what I still don't have a lot of control over is the usage of 'Media queries' and what factors or basic understanding you should have about it, although it talks about breakpoints and specifying/optimizing and prioritizing screen size. I want to really know more on it.

    QR Code Component using CSS flex.

    2
    Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Media queries are basically used when the designs are different for different devices(mobiles, tablets, desktop etc).

    Example: If we're making a website for a mobile and a desktop. We can first write the code for the mobile device and then make the appropriate layout changes to switch to the desktop design at a specific width. This width for desktops/laptops is usually 1028px.

    So in our code to seperate the mobile design and the desktop design, We'll use a media query.

    @media(min-width: 1028px) {
/* changes for desktop here */
}

    Whatever changes are needed for our desktop design will be written inside the curly braces of the media query and will be implemented whenever the browser width is more than 1028px.

    You can go through this responsive web design RWD tutorial to learn more.

    I hope this helps.

    0
  • Sador•200
    @SadorDevSubmitted over 1 year ago

    One element I found difficult was understanding the box shadow property. I couldn't get the shadow effect needed for my results section.

    I adopted a mobile first approach for this and I think I done a good job. I feel my CSS can improve.

    Overall, I understood this project relatively well. Good sharpening my HTML and CSS skills. If I can get feedback to know how to get the box shadow property working.

    Results Summary Component

    2
    Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Hey,

    Check this tutorial on w3schools to learn how to use box-shadow.

    https://www.w3schools.com/css/css3_shadows_box.asp

    0
  • Hadijatu Mohamadu•10
    @hadijah10Submitted over 1 year ago

    Looking forward to everyones feedback.Also tips on best practices and for mobile first design approach would be appreciated.Thank you in advance

    QR-code-component

    2
    Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Hey,

    Well done on completing this challenge. It looks great!

    I have a few suggestions:

    You don't need to set the min-height for all the different devices. You can set the max-width and control the height with margin and padding.

    Also, its better to follow the sequence of your html when writing your css. This organises your code and makes it easier to read especially in bigger projects.

    I hope this helps.

    1
  • Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Hey,

    Great job on completing this challenge.

    You can use a min-height: 100vh; and give minimal margin on your container class to place the card in the center.

    The current designs margin is very big for smaller screens and requires some scrolling to be able to view the card.

    0
  • Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Hello,

    Great job completing your first challenge. It looks great on the desktop, but not so good on the mobile because you used margin: 10rem auto; on your main .container.

    I have a few suggestions to fix that :

    • Add to your main tag min-height: 100vh; This will center your card without having to add margins.

    • Remove from your main .container : min-height: 45vh; margin: 10rem auto; padding-top: 0px;

    • Add to your main .container : margin: 1rem;

    This will make the design look good both on small screens and large screens.

    Hope this helps.

    Marked as helpful
    1
  • Cody Ivy•250
    @codyivy0Submitted over 1 year ago

    I hand placed these background images, any tips or better ways to go about the placement? Thnx

    Responsive profile card

    1
    Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    Hey,

    Check how Grace used pseudo elements (::before and ::after) and absolute positioning to place those background images relative to the card here.

    Marked as helpful
    1
  • Mohammed Ahmad Hussain•200
    @mah07308Posted over 1 year ago

    The images folder is missing in your repository. That is why the qr image is not showing up in your live site.

    Add the images folder containing the qr image to your source folder, commit, and push to github again to solve this.

    Marked as helpful
    1