Skip to content
OverviewSolutions
5
Comments
19
Smita
@Smita-14

All comments

  • Ka Wai Cheung•65
    @Cheung-KaWaiSubmitted about 3 years ago

    Hi, I have just completed my second challenge but i'm still having 2 problems that I couldn't solve:

    -How can I give the image a purple layer on top of it?

    -When I resize my screen to mobile it cut some parts of on the top and bottom of the page if the height of my screen is not big enough.

    If you have some spare time to look at it, I would much appreciate it! If there are any things that I could code better please also let me know.

    Thank you in advance :)

    HTML and CSS only, layout with flexbox and css-grid

    2
    Smita•375
    @Smita-14Posted about 3 years ago

    Hi Cheung-KaWai! You've done really nice work! ✨ There are many ways to color the img, I'll talk about the one that I figured would be easy :

    • Apply background-color: var(--softViolet); to section tag.
    • Add mix-blend-mode: multiply; and opacity: .8; to the img tag.

    I used different method for my solution. I used div tag in html as an img overlay and position property in css to align it on top of it and then adjusted the colors. If you need to look at it here's the link for live site and github-repo.

    As for your second problem change the height: 100vh; property to min-height:100vh; in the main tag.

    Marked as helpful
    0
  • Joffen Hopland•50
    @JoffenhoplandSubmitted over 3 years ago

    This was a great challenge! I learned how to better use flexbox, CSS grid, media queries and how to add multiple background images in CSS. I also properly planned out the project before I started coding, which made the process more smooth.

    Mobile first using pure CSS

    2
    Smita•375
    @Smita-14Posted over 3 years ago

    It turned out really well. Great submission! 👏👏

    Marked as helpful
    1
  • Smita•375
    @Smita-14Posted over 3 years ago

    It's surprising to know that you coded this on a phone so well!✨✨ It is brilliantly done! 👏👏

    Marked as helpful
    0
  • Smita•375
    @Smita-14Posted over 3 years ago

    Hey Asif! The reason is that the image is an inline element and properties like font size and line heights can affect it causing it to have little space (padding) beneath it. Set the display: block; to the image element and the issue will be fixed.

    Marked as helpful
    1
  • Smita•375
    @Smita-14Posted over 3 years ago

    Hey CJ Castillo! Awesome submission! 👏 There's minor issues that you need to look at though:

    • border radius is being applied on wrong edges on smaller screen size.
    • The size of the cards increases from the bottom the moment the layout hits size smaller than 1440px.
    Marked as helpful
    0
  • Smita•375
    @Smita-14Posted over 3 years ago

    Hey Geoff! You did an excellent work on this challenge. I noticed one issue that on smaller mobile screen size some part of text-block is clipped or it becomes hidden. Hope you take a look on that. Keep it up!

    Marked as helpful
    1
  • Smita•375
    @Smita-14Posted over 3 years ago

    Hey Jimender! Your submission is great and almost pixel perfect! Just a few things I would like to point out:

    • The attribution part is floating over the card on the mobile screen size.
    • The card is trimmed from top on smaller screen size.
    • Use semantic html wherever possible. It will help you avoid many issues like the accessibility and html issues.
    0
  • James Greilick•50
    @jgreilickSubmitted over 3 years ago

    Completed my second 'Newbie' challenge.
    Any comments on CSS organization or best practices that might help are welcome! Please feel free to point out any other issues found. Thanks!

    Responsive Card with CSS Grid and Flexbox

    1
    Smita•375
    @Smita-14Posted over 3 years ago

    Hey James! Your submission is excellent! It is almost similar to the design. I just want to say this that you don't have to generate more colors as all the design specs are already mentioned in the style guide. Matching the color of the image seems tricky and for that you can take a look at mix-blend-mode and background-blend-mode. Both can be useful in matching the color of the image. Keep it up!

    Marked as helpful
    1
  • Rafal•1,395
    @grizhlieCodesSubmitted over 3 years ago

    Howdy gang,

    As a rule I avoid pixel-perfection and tend not to use heights to keep everything as responsive and scalable as possible.

    Another example of a basic component coded in the most responsive fashion I currently understand. If you look through the code and find any improvements that pop to mind immediately please share!

    I don't think that I used 'height' for anything in this project to keep it responsive. Whilst not going for pixel-perfection I got pretty close. Think the height of the entire component in desktop is 5pixels short, I left it as such 😁.

    Cheers,

    Rafal

    Stats Preview Card - Grid & Flexbox

    1
    Smita•375
    @Smita-14Posted over 3 years ago

    I don't know what you're talking about but this seems pixel perfect to me. That is an outstanding piece of work! One thing you might wanna look into is that the site cuts off from top and bottom on some mobile screen sizes.

    Marked as helpful
    1
  • leo_lilo•60
    @leoliloSubmitted over 3 years ago

    Any feedback is welcome. Thank you 😊

    CSS, HTML

    2
    Smita•375
    @Smita-14Posted over 3 years ago

    Hey @leolilo Your work is pretty awesome! There's one issue that you might wanna address. On mobile screen size the border radius is applied on the wrong edges.

    0
  • Smita•375
    @Smita-14Posted over 3 years ago

    Hey Chandima! Congrats on your first awesome submission. It is nicely done. You could increase size of texts and buttons as they look smaller than in the design. Also I noticed that you have accessibility issues to address. You can do the following to fix them:

    • Landmark issue - Wrap the whole body using semantic html element such as main, section, article etc. and try to use semantic html instead of div wherever possible.

    Example

    <body>
  <main class="container">
    . . . 
  </main>

  <section class="attribution">
    . . .
  </section>
</body>
    0
  • Floripin•60
    @FloripinSubmitted over 3 years ago

    There is one thing I would like to optimize but don't know how: when hovering on the buttons, the text slightly moves right-down. I had the same problem with the button, which I resolved by putting it's position to absolute and adding some padding at the bottom of the container to keep it at the right place. But with the text, the problem is that the button is sized based on its content and it seems having an absolute inside an absolute does not work. Any ideas? :)

    Also, shoot all your other improvement comments! :D

    My second challenge: 3 column preview card component

    1
    Smita•375
    @Smita-14Posted over 3 years ago

    It is the border property that you have applied on button pseudo class that shows up making it look like it expands from right and down. Just remove the border properties from pseudo class and add it to the button instead. It works.

    Marked as helpful
    1