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
OverviewSolutions1Comments16

All comments

  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Balmores,

    You are missing the :hover state on buttons, which is a quick fix.

    Also in the responsive region < 1265px, there is a LOT of padding and margins. Just tweak it down a little bit.

    Other than that, Great.✌

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Fatima, I guess you started mobile first, which looks pretty solid.

    There were a few Issues I could spot.

    1.On a large screen, the section for content should have a max-width property set so the card doesn't take up the full available width.

    1. From 1300-1400px, the content of the card overflows the card.

    2. The image looks a lot stretched from 700-1300px. You can use a background image instead of a <img> tag.

    Marked as helpful

    0
  • Marlon• 50

    @Marlonsz36

    Submitted

    Hello, this is my second challenge, I would appreciate in advance some recommendation regarding the design, thanks.

    3-column-preview-card

    2

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi @Marlonsz36,

    Good to see the use of :first-child and :last-child selectors. Makes the solution way more flexible than mine.

    One thing that I spotted was

    1.On changing responsiveness, some cards have different heights do to the difference in content of each card.

    Different Height Card Fix.

    1.You know flexbox as you used it in you cards. You could use it in the card .card-body itself to line up the items vertically .

    . 2. Instead of of having a fixed margin-bottom on the paragraph, you can just have an defined height for your .card-body element and vary the padding between the elements using padding-bottom:auto.

    Marked as helpful

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi @@multidamsy,

    There are a few minor issue I could spot.

    1.On changing responsiveness, some cards have different heights do to the difference in content of each card.

    2.The button size on mobile is HUGE . You can make it consistent with the previous button.

    Different Height Card Fix.

    1.You know flexbox as you used it in you cards. You could use it in the card(.box-1, .box-2,.box-3) itself to line up the items vertically .

    . 2. Instead of of having padding :5%; overall, you can just have an defined height for your .box element and vary the padding between the elements.(you can visit my solution if you wanna do that way.)

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi @walmanjm,

    The implementation looks good for mobile as well as big screens. You might wanna look into the area of 770px-1000px where everything is too squeezed and starts overlapping.

    Good Work.!

    0
  • Paisley• 25

    @simpsonpaisley

    Submitted

    Hi,

    I hope this is mostly correct. One issue I am having is that the card heights are different when changing the size of the page. Once the page reaches a certain width, the cards are fine, but until then they seem to be different heights. Is there anything I can please do to change this?

    I also think I may have used too many classes, and could have used more specific selectors such as nth of type selectors or descendent selectors. Is the way I have done it easily readable?, or should I adjust it to make it easier to read and change for other people?

    Thank you very much, any feedback is definitely welcome.

    Responsive 3 Column Preview Card Using CSS Flexbox

    1

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Paisley,

    For the heights problem that you mentioned,

    1. You know flexbox as you used it in you cards. You could use it in the card itself .part to line up the items vertically .

    . 2. Instead of of having padding :10%; overall, you can just have an defined height for your .part element and vary the padding between the elements.(you can visit my solution if you wanna do that way.)

    For the second point that you mentioned, you might wanna look into the BEM framework( nothing to worry.. it's not like a JS framework😛). It just guides you for the naming convention of the CSS classes. There are alternatives available for BEM. Choose whatever you want.

    Marked as helpful

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Roshan,

    Great work! Good to see a slight variation from a flat to Shadow UI. It fits well I have to say.👌

    Specially the gradient on the on the hero section. It makes the navigation a whole lot readable compared to the low contrast navigation of the actual design.

    If I am being Nit-picky, sorry for that but the white space in the cards of the actual design is looking a little bit better😋

    Kudos!

    Marked as helpful

    0
  • Benjo Quilario• 1,810

    @benjoquilario

    Submitted

    This is my 10th fem challenge. I don't know why but this challenge really gives me a headache hahaha still needs an improvement.

    Suggestion and Feedback I really appreciate it.

    article-preview-component - HTML - CSS

    1

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Benjo, I've also been at this place where you want to use the <img> tags instead of using a background image.(feels like it would be more flexible)

    But I realized, the custom changes you can make with background images are way more than <img> tags...so I would suggest you to use them.

    1
  • Arif Noviarrizal• 10

    @noviarrizal

    Submitted

    This is my first solo project without seeing another person code or copy another person code, and i guess, i still need to learn a lot of things, because i think my code is not what it should be or like most people, and i'm having trouble understanding css, flexbox and i hope someone can give me some advice.

    First Solo Project HTML & CSS with Flexbox

    2

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hey Arif,

    Why do you sound so sad?.

    Cheer up. It's a start. It looks good. I have a feeling that you are trying to jump into CSS(flexbox) without getting the basics first or maybe you are just struggling with flexbox itself.

    There is a good amount of CSS material out there for you to explore. Just need to dive into it.

    I would suggest to check Kevin Powell (Youtube) to understand the CSS basics and flexbox from one of his old videos. Just need to a little.✌

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi @happy-phiri, Great work on that one.

    I couldn't help but notice that the site responds well till 1500px , but after the section around the footer starts overlapping. You might wanna look into that.

    Otherwise, Nicely done.

    Marked as helpful

    0
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Anurag, If I understood it correctly, you want the button's text to be a transparent and the background color should be the color showing up inside the text.

    Am I right?

    0
  • Bishal Mallick• 115

    @bishalmallick

    Submitted

    Please provide a feedback. Tried SASS for the first time and was able to get a satisfying results... Please do provide some feedback for this newbie... thanks in advance

    HTML, CSS & SASS

    2

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Bishal,

    Great work. Just around the media query( around 800px-900px), the text is really squished up and there is no white space between the heading, paragraph and the statistics. That section needs some rework.

    One suggestion, instead just of making the whole content section responsive, you can also make the image responsive and divide the width wisely.

    1
  • P
    Cezar Ganzon• 300

    @cganzon

    Submitted

    This was my first premium challenge. It was very fun using figma for the first time and I learned a lot from it.

    Looking forward to any feedback to improve my solution. Thanks!

    Meet landing page

    1

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Cezar, Congratulations on your first solution.

    A minor issue that I could identify was while every other components responds perfectly to change in screen size, the footer stops to cover the full width of the screen after a certain width(around 1530px.)You might wanna scale it up for bigger screens.

    Other than that, Great Work.👌

    1
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi Lesley,

    Amazing work. The issue @Aman brought up is also present in my recent solution and looking it up I found it can also be solved if :

    1. You already apply a transparent border to the button and have a colored border on hover.

    2. You could use box-shadow property to set an "inset" border (one which lies inside the button box) on the hover state.

    "box-shadow: 0px 0px 0px 1px white inset;"

    Marked as helpful

    0
  • ToNisamBioJa• 330

    @ToNisamBioJa

    Submitted

    Hello everyone!

    I have no specific questions. This one was fun and I tried to stick to the best practices and keep the code clean as possible. Also did my best to make the page responsive and look good everywhere.

    Would really appreciate if someone looked at this one and gave me any feedback.

    Thanks in advance!

    Responsive clipboard-landing-page solution using scss

    3

    Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    Hi ToNisamBioJa, you have nicely implemented the solution. The implementation is just a bit off in terms of vertical seperation of items. Looks like you could use a design app(Adobe XD or FIGMA) to perfect your design to every pixel.

    An observation about the section to the right side of the monitor image. On a bigger screen(1440px + size ), the whole website responds to the change in screen size except for the Quick search, iCloudSync etc. section.

    Other than that, Great WORK.

    Marked as helpful

    1
  • Yashasvi Singh• 235

    @Yashasvi2704

    Posted

    It seems you have scaled up all the content of the card on hover. For a better animation you can change the background color of the card. Something that you can find here. https://stackoverflow.com/questions/16178382/css-lighten-an-element-on-hover

    0