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
OverviewSolutions5Comments19

All comments

  • Ka Wai Cheung• 65

    @Cheung-KaWai

    Submitted

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

    Posted

    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

    @Joffenhopland

    Submitted

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

    Posted

    It turned out really well. Great submission! 👏👏

    Marked as helpful

    1
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    I manage to make this website responsive without media queries. Feel free to take a look!

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Responsive 3 Column Card Component (No Media Queries)

    #accessibility#bem#lighthouse

    8

    Smita• 375

    @Smita-14

    Posted

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

    Posted

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

    Posted

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

    Posted

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

    Posted

    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

    @jgreilick

    Submitted

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

    Posted

    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

    @grizhlieCodes

    Submitted

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

    Posted

    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

    @leolilo

    Submitted

    Any feedback is welcome. Thank you 😊

    CSS, HTML

    2

    Smita• 375

    @Smita-14

    Posted

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

    Posted

    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

    @Floripin

    Submitted

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

    Posted

    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
  • Smita• 375

    @Smita-14

    Posted

    Nice work! Few things can be improved:

    • The image stretches up when you go on mobile screen or large screen size. Make it so the image doesn't stretches up no matter what screen size.
    • Add some line-heights to the paragraph.
    • Give some space to statsBox at the bottom.
    • Use semantic html where possible.

    Marked as helpful

    0
  • James• 45

    @magneticsands

    Submitted

    Had some trouble getting the image overlay just right, but this didn't look bad so I was happy with it.

    HTML/CSS

    1

    Smita• 375

    @Smita-14

    Posted

    Hey buddy! Just set the mix-blend-mode to multiply and set the opacity to .8 on img element. It will match the color as in the design just fine.

    0
  • Floripin• 60

    @Floripin

    Submitted

    I still have (at least) two imperfections on which I could use your help:

    1. I don't know why on desktop my "text" section and my "image_container" section are not respecting the 50% width that I gave them. The text section is wider!

    2. I don't know how to remove the purple line below the image on the mobile view. It seems to be the #image_container:after overlapping, but I do not see how I can fix it.

    Stats preview card component with html, css, flexboxes,...

    2

    Smita• 375

    @Smita-14

    Posted

    Hey Floripin! I too met with these scenarios and I was able to fix it so I'll try my best to help you out here:

    1. If you add max-width:40% to the text class, it will allow both the image_container and text class to fill in the 50/50 space. But sorry I am not sure why that happens. This could be because of the paddings and margins or it could be that the text area is taking as much space it wants and so does the image_container. Here the image does has a limit ( it has fixed pixels whether or not you specify it) but the text part doesn't so it takes the leftover space after the image_container is done taking the space it needs.

    2. The image is an inline element so properties like line-height and font-size would affect it. Setting display:block or display:inline-block would solve the issue. StackOverflow | IMG has 5px extra padding at bottom of div

    I hope that helps.

    Marked as helpful

    0
  • Smita• 375

    @Smita-14

    Posted

    Awesome work!

    0
  • Smita• 375

    @Smita-14

    Posted

    Hey! Some of the border radius is applied on wrong edges and the font on the button should also be Lexend Deca. Overall your solution is stellar and your skills are outstanding! Nicely done.

    1
  • Smita• 375

    @Smita-14

    Posted

    The color on titles and on the button texts need to be fixed other than that you did a good job. Keep it up!

    Marked as helpful

    0
  • Smita• 375

    @Smita-14

    Posted

    Your website shows mobile screen size even on the desktop screen size.

    0