Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions7Comments18

All comments

  • EDllT• 60

    @EDLLT

    Submitted

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

    HTML & CSS

    3

    Sam• 230

    @samd1a

    Posted

    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

    @rayeesrather99

    Submitted

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

    Css grid

    2

    Sam• 230

    @samd1a

    Posted

    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

    @samd1a

    Posted

    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

    @samd1a

    Posted

    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

    @Peteonthebeat

    Submitted

    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

    #styled-components

    4

    Sam• 230

    @samd1a

    Posted

    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-petty

    Submitted

    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

    @samd1a

    Posted

    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

    @samd1a

    Posted

    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

    @pain3pain

    Submitted

    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

    #accessibility#express

    4

    Sam• 230

    @samd1a

    Posted

    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

    @goushaa

    Submitted

    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

    @samd1a

    Posted

    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-sek

    Submitted

    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

    @samd1a

    Posted

    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

    @yoriss67

    Submitted

    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

    @samd1a

    Posted

    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

    @samd1a

    Posted

    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
  • Sam• 230

    @samd1a

    Posted

    Good work!

    my suggestion would be to add some more padding onto the top of the card. Aswell as that, you can add a text-transform: uppercase; onto your .card__top class, this makes the Advice text automatically in full caps similar to the initial design.

    Hope this helps a little bit. Keep going!

    0
  • Glow• 140

    @TheAwesomeTechGirl

    Submitted

    I find the style difficult,can you help me with that? I'm unsure of the CSS @media

    QR-code-component

    1

    Sam• 230

    @samd1a

    Posted

    Good work!

    if you want to center your card in the page, you can use flexbox: remove the margin from your .container rule and add

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;

    Also you do not need to declare the font-family for each tag, a simple font-family: 'Outfit', sans-serif inside of a body rule would work, allowing for the font to be easily changed in the future!

    Hope I can help a little bit! Keep coding.

    Marked as helpful

    0
  • Mostafa Karem• 80

    @Mostafa-Alfiky

    Submitted

    This is my first project in frontendmentor,

    As a beginner, I faced a lot of problems I could not solve and raised a lot of questions, those are some of the issues I faced and I will be very happy if you help me solve and understand them:

    1- My project looks a bit bigger when hosted on github than the original project 2- It was difficult to position elements vertically, I used position, left, top, and transform properties, but I could not understand them in-depth enough to feel comfortable with using them freely, so if you have a link to a course or a book that makes it easy to understand positioning, I would appreciate your help. 3 -What are your tips to write clear code?

    I faced a lot of technical issues, But there are a lot of helpful developer communities that make it easier to find the answers, and I am happy I joined that huge community as a beginner developer.

    QR Code component

    3

    Sam• 230

    @samd1a

    Posted

    Hello Mostafa Alfiky, Good work finishing your project it looks great!

    An easier way to centre the card is to use flexbox:

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

    Also, in most cases, I only recommend setting a max-width rather than a fixed height allowing for different screen sizes to be responsive aswell.

    A good place to learn more about CSS is Kevin Powell's videos. Hope I can help a bit!

    0
  • luizrangeldev• 10

    @luizrangeldev

    Submitted

    As mentioned earlier, putting elements side by side was a concept which I wasn't aware of.

    Newbie challenge

    #materialize-css#styled-components

    1

    Sam• 230

    @samd1a

    Posted

    Good work!

    setting a max-width on the p tag would make the page more responsive at different screen sizes rather than adding new <p> or <br>.

    i would suggest changing the color of the text inside of the .container2 a rule rather than changing the color for each state, this would allow for the color of the text to be updated alot easier.

    hope i can help a little bit !

    1
  • Sam• 230

    @samd1a

    Posted

    Hello 👋

    Good work on finishing your project!

    My only suggestion is to include a minimal box-shadow on your container class.

    Keep up the good work!

    2
  • Sam• 230

    @samd1a

    Posted

    Hello 👋

    Good work on finishing your project!

    You can set a max-width: 100% on the img so it will adapt to fit the card instead of manually setting width & height. It also allows it to scale down to fit for mobile aswell.

    1