Skip to content
OverviewSolutions
7
Comments
13
kudos2Shef
@kudos2Shef

All comments

  • kudos2Shef•170
    @kudos2ShefPosted 2 months ago

    Hi @bakellian , you have done a great job in attempting this challenge 👏.

    In this challenge, we are provided with two images - product-mobile and product-desktop. product-mobile img is used for both mobile and desktop version in your code. <img src="./images/image-product-mobile.jpg">

    For landscape images just change img src , no need for zoom out.

    Hope this helps, Keep up the good work!!

    0
  • kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @leevaan your solution is commendable 👍, especially the comma after every three digits. Keep it up.

    1
  • kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @semer53, Congratulations on completing this challenge. Your solution is great👍

    Just a reminder the image src is not correctly mentioned try changing to this or copy GitHub image path

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

    also alt attribute shouldn't be empty at times like this when image is not loaded the text in alt attribute will be shown.

    Hope this helps, Happy Coding

    0
  • kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @mfq17s,

    I came across your solution its perfect . Just a reminder you forgot to add active state in Jules wyvern text.

    Keep up the good work!

    0
  • kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @Belgacem-Dahmen, Congratulations on completing this challenge. Your solution is perfect😊.

    You forgot to add hover effect also icon-view.svg is not used when hovered. Try adding it as it will make your solution even more better since it is one of the requirements.

    Hope it helps, keep up the good work

    Marked as helpful
    0
  • kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @Chuy-dev, Congratulations on completing this challenge!

    Your solution is great 👍. You completed this solution in a very short number of lines of code which is commendable. This one case when an operator like (+)or (.) is clicked multiple times consecutively it appears in display . If you can come with a solution for this then it will be good. Try rechecking style guide by mistake you assigned different color property to element like key button should have this color property :

    .container-key .key-button {
    background: var(--key-background-secundary);
    box-shadow: 0 5px var(--key-shadow-secundary);

    I had no idea multiple js file could be used to achieve this result, something I got to learn from your solution.

    Hope it helps, Happy Coding

    0
  • CodeCuriousCat•20
    @ANTHEIAMSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I got to use a little bit of flexbox and understanding how to align elements.

    What challenges did you encounter, and how did you overcome them?

    Flexbox, I have some troubles with it. I overcame them using google researches.

    What specific areas of your project would you like help with?

    I didn't use SASS or LESS, I would like to try it next time. But for help, no I didn't really need something particular.

    qr-code-component using CSS flexbox

    2
    kudos2Shef•170
    @kudos2ShefPosted 6 months ago

    Hi @ANTHEIAM, Congratulations on completing this challenge!

    Your solution is perfect just change the image tag src to this <img src="images/image-qr-code.png" alt="image-qr-code"> this will make image appear. Remove first slash before images from src as it is stopping from reading the source url <img src="/images/image-qr-code.png" alt="image-qr-code">

    Hope it helps, Happy Coding

    Marked as helpful
    0
  • Jimmy•60
    @MonetCode88Submitted over 1 year ago

    The part I found most confusing was properly sizing my image to fit within the white container. I'm still unsure of how to optimize it properly and I know my solution isn't a perfect replica. I would welcome any advice on how to make this better.

    HTML CSS QR Code Solution

    1
    kudos2Shef•170
    @kudos2ShefPosted over 1 year ago

    Hi @MonetCode88,

    Congratulations on successfully completing this project! 👍 Your solution is commendable.

    Here are some suggestions to further enhance your code:

    When it comes to sizing images, it's recommended to utilize object-fit: cover . Consider adjusting the width from 18em to 16em or 90%. This will fit within the white container. Here's an example:

    .inner img {
    width: 16em;
    object-fit: cover;
}

    Please note that the .attribution class, mentioning 'name' and 'frontend mentor challenge,' isn't a part of the challenge itself. It should be placed outside the .outer div class and positioned at the end of your code.

    I observed that you applied margin: none in .inner img and .inner, rather than specifying it separately for each class. You can simplify this by applying it globally to all elements. Example:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    To center the card effectively, consider utilizing flex or grid within the body. Here's a sample approach:

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

    While the project inherently possesses responsiveness, you might notice that the .container class width fluctuates across various dimensions. Modify the .outer width from width: 100vw to width: 200vh. This will ensure consistent sizing across all dimensions. The unit 'vw' is usually avoided since 100vw equates to 100% of the viewport width, leading to automatic adjustments based on dimensions.

    .outer {
    width: 200vh;
}

    I hope you find these recommendations valuable. Keep up the fantastic work!

    0
  • Favour Ukonu•60
    @Thatgirl9Submitted over 1 year ago

    • While building the project I found it hard to make it responsive.

    • I'm unsure of my Media Queries Section.

    • What's your advice on making Card Components like this responsive?

    Any suggestions on how to go about that would be very much appreciated.

    Order-Summary Component built with HTML / CSS :)

    2
    kudos2Shef•170
    @kudos2ShefPosted over 1 year ago

    Hi @Thatgirl9,

    Congratulations on completing this challenge! Your solution is perfect. This card component project of yours is responsive itself, so you need not worry about it.

    There is only one thing in your media query that I would recommend you to change. In your media query, the mobile background image is not appearing. So, in the body segment, instead of using background-image: none; try using the following code:

    body {
    background-image: url(./order-summary-component-main/images/pattern-background-mobile.svg);
    width: 100%;
}

    Also, please remove the background-image element from the HTML as it is not needed:

    <background-image src="./order-summary-component-main/images/pattern-background-mobile.svg" class="mobile--bg--img" alt="mobile-background-img"></background-image>

    Additionally, it seems that you forgot to add the Frontend Mentor icon in your code. You can include it using the following link tag:

    <link rel="icon" type="image/icon" href="images\favicon-32x32.png">

    I hope this helps! Great job on the project, and keep up the excellent work!

    0
  • kudos2Shef•170
    @kudos2ShefPosted over 1 year ago

    Hi @Ranty09,

    Congratulations on completing this challenge!

    I came across your solution and it is perfect, just that though you have added car icons in the code but it is not appearing in the site. I found that you haven't added car icons in the Github images folder.

    And alt attribute shouldn't be blank, it comes handy in situations like this if the image can not be displayed.

     <img src="images/icon-luxury.svg" alt="luxury">

    Also, you forgot to add background-color in the body segment.

    body{
background-color: hsl(0, 0%, 95%);
}

    Hope it helps

    Marked as helpful
    0
  • cheljee-mangulabnan•30
    @cheljee-mangulabnanSubmitted over 1 year ago

    When making responsive sites, is it recommended to have a min-width set on the mobile layout?

    3 column card

    1
    kudos2Shef•170
    @kudos2ShefPosted over 1 year ago

    Hi @cheljee-mangulabnan,

    It is not necessary to set min-width if the contents are purely to provide a desirable user experience on mobile devices. But you might have to add a media query to larger devices if the contents are to be viewed by devices like laptops or tablets .

    Also, you forgot to add background-color in the body segment.

    body{
  background-color : var(--clr-neutral-400);
}

    Hope it helps.

    Marked as helpful
    0
  • heykarannn•10
    @heykarannnSubmitted over 1 year ago

    it was my first project it was a little hard and even tho I still don't know most of things i did i jutst had bits of knowledge and i just played around to get the final result this project is not responsive. but in future i will improve and this is just my first project.

    Product Card using html and css

    1
    kudos2Shef•170
    @kudos2ShefPosted over 1 year ago

    Hi @heykarannn, Congratulations on completing your first challenge! This is perfect. Just writing this so that you don't have trouble after this like i had, this was my first project as well. To get the desired background color , text color, font-size or font-weight refer to style-guide. example:

    :root{
	--Dark_grayish_blue: hsl(228, 12%, 48%);
	--cream:hsl(30, 38%, 92%);

}
h1 {
        font-family: "Fraunces", serif;
        font-weight: 700;
        color: var(--Very_dark_blue);
      }

    Also remove margin: auto; , margin-top: 170px; from .container use flex in body to center items. Example:

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: var(--cream);
      }

    Apply box-sizing: border-box; to all elements.

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

    First project is always special! Congratulations again! Happy Coding.

    0