Skip to content
OverviewSolutions
13
Comments
7
Nathan Ray
@NathanRayM

All comments

  • NBD•240
    @bdal90Submitted about 1 year ago

    Dear All,

    Here is my very first project EVER, I'm an BASOLUTE newbie, I am insanely glad I could get this far with my very first project. Looking forward to getting better and better, step by step. I am so new I don't even know what questions to ask. :D Unfortunately the QR-code image doesn't show on the GitHub URL, I am trying very hard to fix it, but also try to add a print screen version.... I am open to any suggestions, feedback, criticism (though I know it is highlighted to be more specific than this, but maybe in my later projects. :) )

    Wishing us all great practice,

    Dalma

    My Very First Flexbox Mini-Challange EVER

    4
    Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello! Great job on your first challenge. It looks like the QR code may not be showing due to the way you have it in your html. In your github you don't have an images folder but have your html pointing to an images folder.

    Here is what you currently have.

    <img class="container__qr-code" src="images/image-qr-code.png" alt="QR-code">

    You can change it to this and it should resolve the issue.

    <img class="container__qr-code" src="image-qr-code.png" alt="QR-code">

    Another option would be to add an images folder to the main root in github and place the QR code picture in the folder.

    I hope this helps.

    2
  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello,

    Really great job! I have a suggestion that you may find helpful. Currently, it appears that your background image is repeating. You can remedy this by applying background-repeat to no-repeat. I hope this is helpful.

    Example:

    body{
background-image: url(./images/pattern-  background-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
}
    Marked as helpful
    0
  • SuperJulia2024•220
    @SuperJulia2024Submitted about 1 year ago

    Which is the best approach to follow to set the margins between paragraphs and titles ?

    1. Set a border-bottom to every element ?; or
    2. Set a border-top and a border-bottom to the central element and then set the rest of margins for the other elements ?

    Which properties should be set in "rem" and which ones in "px" ? Do we only use "rem" for properties related to html font-size ? What about width/height for an img, borders, margin, etc.

    Thanks !

    Product Landing page using media queries

    2
    Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello,

    Great job! I have a suggestion that you may find helpful. Instead of using margin to space the paragraphs, you can set the div container to either display flex or grid, use column, and then use gap to create even spacing between them. I hope this helps.

    Example:

    div{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
    Marked as helpful
    0
  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello,

    Really nice job! I have a suggestion for the image that may be helpful to you. Instead of using the overlay, in CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

    Example:

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
    0
  • Sindy857•110
    @Sindy857Submitted about 1 year ago

    Every challenge is great exercise for me. I keep reaching my limits. The overlay caused me particular problems and I still find the responsive design difficult. Feedback is always welcome.

    stats-preview-card-component / HTML CSS Flexbox

    1
    Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello,

    Great work! I have some suggestions that you may find helpful. Instead of using overlay for the image and background color, in CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity. I hope this helps.

    example:

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
    0
  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello, Your design looks good on mobile devices that this design was based off of. Nice work! The size of the challenge itself is small enough that you shouldn’t need a media query in terms of screen size. You can check how your design will look by using the dev tools in your browser. Here is an article on how to do so. I hope this helps.

    In Chrome: In DevTools, click Toggle Device Toolbar or press Ctrl+Shift+M (or Cmd+Shift+M on macOS). In Edge: In DevTools, click Toggle device emulation or press Ctrl+Shift+M (or Cmd+Shift+M on macOS)

    0
  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello, In CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
    1