Skip to content
OverviewSolutions
7
Comments
18
Sam
@samd1a

All comments

  • EDllT•60
    @EDLLTSubmitted over 2 years ago

    Is using padding for the paragraph element the best way to make it look the way it looks?

    HTML & CSS

    3
    Sam•230
    @samd1aPosted over 2 years ago

    Hi EDllT, congrats on finishing your challenge it looks great!

    I would say padding is one of the best way to make the effectively wrap like the design, however a max-width or a margin would also work.

    Keep coding!

    0
  • Rayees ahmad rather•30
    @rayeesrather99Submitted over 2 years ago

    It's wasn't difficult too much but i found it little bit confusing while making a div.

    Css grid

    2
    Sam•230
    @samd1aPosted over 2 years ago

    Hi Rayees ahmad rather, congrats on finishing your challenge it looks great!

    A small suggestion I have is to use absolute positioning on your attribution div, this way it will not interfere with centering the card.

    Keep coding!

    0
  • Sam•230
    @samd1aPosted over 2 years ago

    Hi smkh, congrats on finishing your challenge it looks great! Some suggestion are:

    1. consider changing the media query to ~600px as this is when your design starts to shrink.
    2. add these styles to your .container class to create a border radius which will work for all screen sizes:
    border-radius: 10px;
overflow: hidden;
    1. Also i recommend removing the <br> from your paragraph as it makes the text wrap weirdly on mobile views.

    Hope this helps a bit, keep coding!

    Marked as helpful
    1
  • Sam•230
    @samd1aPosted over 2 years ago

    Hi Ebubedike Edwin, congrats on finishing your challenge it looks great!

    To improve, I recommend learning more about semantic elements and how they allow for the browser to better understand your webpage. If you have the time, this blog post might help aswell.

    In order to center your card, you can use flexbox on your .container class instead of margins:

    display: flex;
justify-content: center;
align-items: center;

    Good practices are to use relative units over absolute units as they allow for more flexibility between different screen sizes.

    Hope this helps a bit. Keep it up!

    0
  • POTB•330
    @PeteonthebeatSubmitted over 2 years ago

    I wouldn't say I found anything particularly difficult. Probably, the most challenging was to figure out how to get the <hr> tag to look as close to the provided designs. I never really did any work with this one prior to this challenge. It also took me a bit longer to figure out that the <div> holding 'Etherium' and 'Clock' icons and their text must use: display: flex; justify-content: space-between

    I'd be happy to hear some opinions on the transitions of the media queries.

    I hope everything displays as expected. Other than that, I am open to suggestions about doing things more efficiently with fewer lines of code.

    Regards! POTB

    NFT Preview Card Component

    4
    Sam•230
    @samd1aPosted over 2 years ago

    Hi POTB, congrats on finishing your challenge it looks great!

    I would remove the margin-right: 4em on your .eth-span class as its making the spans text wrap weirdly as the viewport width decreases.

    Other than that good work, keep coding!

    Marked as helpful
    0
  • Jonas Felix de Souza•20
    @Jonas-pettySubmitted over 2 years ago

    1. There's a small space underneath the image on the desktop layout, I tried many things to solve it but failed, I would like to know a solution for that matter.

    2. I see that on the desktop layout the image and the information have the same width, in my code the information is slightly wider, I would like to know I a could've done different.

    Thank you!

    Responsive page using display flex, picture tag to alternate images

    5
    Sam•230
    @samd1aPosted over 2 years ago

    Hi Jonas Felix de Souza, congrats on finishing your challenge it looks awesome!

    To answer your questions:

    1. I see you already tried using the height property, however if you changed it to height: 100%, the image would fill up the div. the image stretching to fill can be resolved using object-fit: cover
    2. I would use display: grid to make both columns have the same width: grid-template-columns: repeat(2, 1fr);

    Hope this helps a bit!

    Marked as helpful
    2
  • Sam•230
    @samd1aPosted over 2 years ago

    Hi nelson, congrats on finishing the card it looks great!

    To make the page more accessible to search engines, change your <span class="weight-text"> to a <h1 class="weight-text"> and your <div class="lighter-text"> to a <p class="lighter-text">

    Also, I wouldn't recommend using CSS Grid for this project. Simply adding a margin-bottom on your .weight-text class would work better as the viewport width gets smaller, the card would expand vertically to fit all of the text in, which doesn't currently happen in this example.

    Hope this helps, happy coding!

    0
  • pain3pain•10
    @pain3painSubmitted over 2 years ago

    Hello, this is my first challenge done for fronted mentor. I tried to do my best for this qr code challenge, but sorry for my mistakes... here is my work : https://github.com/pain3pain/pain3pain.github.io I found the font part quite hard (almost fisrt time), do you think there is a best practice to do it ? I also wonder how to put (or fix) the image in the center of the div ? The colors I found in the "style-guide" were unusable for me, do you know how to use them ? thanks a lot !

    Html page using a bit of CSS

    4
    Sam•230
    @samd1aPosted over 2 years ago

    Hi pain3pain, congrats on finishing your challenge it looks great!

    I managed to access your website via this link To answer your questions:

    1. The way I tend to find font sizes is by working with the size provided in the style guide, here it gives you the size of the paragraph, then using trial and error the sizes of the other elements can be worked out.
    2. I believe you have centred the image the best way in this solution. However in general, flexbox's justify-content: center; align-items: center works too.
    3. You can use the colours in style guide by replacing the hex color codes with the hsl values. e.g. background-color: hsl(220, 15%, 55%); for the background color etc.
    4. There isn't really a set way in saying which tag is better to use, however the most important text in the webpage should have the <h1> and work down from there. I recommend giving this blog post a quick read if you have time.

    Hope this helps, keep going!

    Marked as helpful
    0
  • Kady•10
    @goushaaSubmitted over 2 years ago

    If anyone sees this project. This is my first project and I'd like to know how to make this website more responsive?

    QR-CODE Project using HTML & CSS.

    1
    Sam•230
    @samd1aPosted over 2 years ago

    Hi ELKady, congrats on finishing your first challenge it looks great! To answer your question, removing the height: attribute from your #bold and #light properties will allow for the text to expand down as the viewport width gets smaller, it also prevents the overlapping you have.

    Also swap your <section> landmark for a <main> landmark, this allows for the page to be more accessible to screen readers. I would suggest changing your <p id="bold"> to a <h1 id="bold"> for the same reason.

    You were so close to centring your card, just add:

    html {
    height: 100%;
}

    Hope this helps, keep coding!

    Marked as helpful
    0
  • sek-devops•110
    @devwinner-sekSubmitted over 2 years ago

    Hello. For this challenge, please :

    1. How can i manage mobile display ? (I used media queries, is there other solutions)
    2. Make the background image full screen was a big issue because of its size.

    Sek - HTML + CSS: Responsive Order Summary

    2
    Sam•230
    @samd1aPosted over 2 years ago

    Hi sek-devops, Congrats on finishing your challenge, it looks great! To answer your question.

    I tend to use media queries to make shifts in the layouts only as min() and clamp() can be used to make the font size smaller as the page's size gets smaller.
    A good video summarizing this is by Kevin Powell: https://youtu.be/U9VF-4euyRo

    0
  • Yoriss0607•40
    @yoriss67Submitted over 2 years ago

    Since this is my first challenge, I even don't have enough amount of knowledge to come up with a question. There are tons of stuff I need to learn and acquire.

    HTMLand CSS

    1
    Sam•230
    @samd1aPosted over 2 years ago

    Hi Yoriss, Congrats on finishing your first challenge, it looks great!

    my only suggestion is to add a small box-shadow to your .card class

    0
  • Sam•230
    @samd1aPosted over 2 years ago

    Hi Christopher! Your design is brilliant.

    Box & drop shadows both achieve similar results, however box-shadows can be used to create inner inset shadows inside of a element which currently cannot be done in drop-shadows.

    However, drop-shadows can generate shadows around irregular shapes & the alpha channel inside the image, whereas a box-shadow would create a rectangular shadow completely ignoring the alpha channel.

    A more in-depth comparison can be found here: https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/

    Hope i can help a little bit. Keep coding!

    0