Skip to content
OverviewSolutions
14
Comments
8
Rohit Kumar Saini
@rockingrohit9639

All comments

  • John Soto•130
    @Soto-JSubmitted over 2 years ago

    Hello everyone,

    • Having difficulties keeping the content and the image size the same in flexbox.

    any feedback would be greatly appreciated.

    Flexbox

    1
    Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @Soto-J

    I saw your submission and found some issues. I am giving you some suggestions which will help you in improving your design.

    Suggestion 1

    Instead of giving the class card-container to the body give this class to the div inside body. Then you can give the following styles to this class -

    .card-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    This will make sure that all your content is in the center of the screen. Then you can give property flex:1 to both of your sections inside the main. This will make sure that both of your sections have equal width.

    Suggestion 2

    To make the overlay effect you can do the following.

    • Add an empty div as <div class="overlay"></div> in your picture section.
    • Add the following style to picture section
    .picture {
    position: relative;
}

    Then you can give the following styles to overlay

    .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsl(277, 64%, 61%);
    mix-blend-mode: multiply;
}

    You can also try different values of mix-blend-mode.

    I hope this will help you in improving your design.

    Marked as helpful
    1
  • Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @joaojgabriel

    Your background does not match the provided design. There are two approaches to doing this.

    First Approach

    • You can use background-image to set the background images and play with background properties like background-size, background-repeat, etc. to make your background look like a design.

    Second Approach

    • You can give position: relative; to the parent element and can have two img with the source of images and you can position them accordingly.
    .parent {
    position: relative;
}

.img-top {
    position: absolute;
    width: 100%;
    top: -50%; /* this can be different according to you.*/
    left: -50%; /* this can be different according to you.*/
}

.img-bottom {
    position: absolute;
    width: 100%;
    bottom: -50%; /* this can be different according to you.*/
    right: -50%; /* this can be different according to you.*/
}

Hope this will help you in improving your design.
    Marked as helpful
    0
  • Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @Soto-J I have some suggestions for you.

    • You can use background-repeat: no-repeat; which will make sure that your background image does not repeat.
    • You can use background-size: contain; which will maintain the aspect ratio of the image, you can also use background-size: cover; according to your need.
    • You can give a background color to the body from the style guide. I think the color is hsl(245, 75%, 52%);

    Only these changes will make your design a lot better.

    • To remove the report warning you can give an alt text in your image.

    Hope this helps you.

    Marked as helpful
    1
  • Kachi•20
    @IAmKachiSubmitted over 2 years ago

    Hey Guys, I just completed the product preview card project. I'm a newbie and my code is filled with errors and bad practices. I'll love criticisms and reviews on the code and how I can improve in the future. My questions for this challenge are:

    1. I found media queries difficult to understand. two images were provided for the desktop and mobile designs respectively. I didn't know how to change the image responsively based on the screen size. I'll need all the help I can get on this. Thanks.
    2. I'll love to know more on how to handle events with JavaScript.

    Product Preview Card Challenge

    3
    Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @IAmKachi

    Media queries are difficult at first but when you get to know about they become a lot easier. You can refer to this link to learn about media queries -> Media Queries

    Firstly learn about these two media queries and more than half of the work will be done -

     @media only screen and (min-width: 900px) {}
 @media only screen and (max-width: 900px) {}
    • You should use semantic HTML tags, they define the meaning to both the developers and browsers. Some tags are - `main, section, article, header, footer, etc. To learn more HTML, CSS or JavaScript follow this link - w3schools
    1
  • Isaac•210
    @IsaaclkmSubmitted over 2 years ago

    Should I give a class name to all my elements? I struggled a lot with making the content not go beyond the div, is there a way to make it say within the div at all times?

    Responsive Layout using Flex-box

    2
    Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @Isaaclkm, It is good to have classes on all of your HTML elements, but there are some CSS Selectors which are very helpful while working and styling using CSS. To learn about different CSS Selectors you can go with the following link. CSS Selectors

    Apart from it, some issues which I found are:-

    • You should use semantic HTML tags like main, section, footer, etc in your HTML.
    • You should use / in image src not \ E.g. Use this
    <img src=`images/perf1.jpg` alt=`perfume bottle`>

    not this

    <img src=`images\perf1.jpg` alt=`perfume bottle`>
    Marked as helpful
    0
  • Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey, @Mosestule2003 Congratulations on your submission.

    I looked at your design and found that it could be improved more. The things which you can improve are --

    • Use the font-size of paragraph to be 18px and don't have any <br> in your <p>. It will automatically fit with the container width.
    • The color of the paragraph also does not match, you can change it too.
    • You should have all the content in <main> and you should also have <footer>. So your report will not be having any issues.
    • Add <!DOCTYPE html> at the top of your HTML document.
    • You should have width: 100% in the CSS not at the direct element.
    • You should not have <p> inside H3 or any other heading element, instead you can use <span>.

    I hope this feedback will help you a little bit in improving your design. All the best.

    0
  • Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hello Nino, I think your live site url is not working fine. It is giving a 404 page not found error. You should update this.

    0
  • Rohit Kumar Saini•270
    @rockingrohit9639Posted over 2 years ago

    Hey @superschooler,

    You can use

    body {
      display: flex;
      align-items: center;
      justify-content: center;
}

    This will immediately make your solution more accurate to the design.

    0