Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
71
Yashasvi Singh
@aUnicornDev

All comments

  • ritik jain•200
    @theritikshah
    Submitted almost 3 years ago

    Ecommerce Product Page - React

    #react
    2
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 3 years ago

    Hi Ritik,

    The solution looks great on Desktop and Tablet mode ✨✨✨.

    The responsiveness can be improved between 770-1150px. The cart dropdown overflows the viewport when opened in this range..

  • Veronica Ulrikkeholm•40
    @veronisab
    Submitted almost 3 years ago

    Interactive Rating Component

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 3 years ago

    Hi Veronica,

    Great solution 🔥🔥!!!

    Just a few points...

    The selected rating does not go back to normal when I select another rating. You can do this by removing the "selected" class from all the buttons first, and then adding the "selected" class on the clicked element.

    The hover on Rating does not change the font color to white.

  • Rachana Hegde•155
    @rachanahegde
    Submitted almost 4 years ago

    Order summary component using CSS Grid

    3
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    The font-family for the links(change, proceed payment and cancel) can be set to "Red Hat Display" to match the design.

    Not an overuse of ''DIVS" but some extra "buttons" that could have been just replaced with divs(plan-btn) or a tags(cancel-btn). Semantically speaking, buttons should be signifiers that something can be clicked.

    Marked as helpful
  • Michelle•20
    @michellewongi
    Submitted almost 4 years ago

    Mobile First Page with Flexbox, Grid, and Vanilla js

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    You have border-bottom for the underline so it will take the complete width of the text. For variable widths, you can use ::after pseudo element.

    You can also change .hamburger position from fixed to absolute, because the fixed hamburger appears even after scroll.

    You should set a fixed max-width on the .container so that it does cover the whole screen on bigger viewports.

    Marked as helpful
  • Jugo-JS•145
    @Jugo-JS
    Submitted almost 4 years ago

    Loopstudios-landing-page with CSS grid and flex

    2
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Looks good on desktop as well as mobile...

    Just around 1200px to the mobile breakpoint.. things are a little squeezed and start overlapping/overflowing. You can look into that area..

    Marked as helpful
  • OK169•605
    @olgak169
    Submitted almost 4 years ago

    Responsive tip calculator using JS, Sass

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Great work man. ✌✌✌

    This is by far the best solution for this particular challenge that I've seen.

    Just a minor issue is that when changing the tip, the counter starts from undefined to and reaches upto the final calculated value. It's barely visible because of the speed of the counter but i thought I should mention it.

    Few improvements apart from this challenge would be to have a default tip and an active state for the bill input field after website load.

  • anas ali•415
    @anas-cd
    Submitted almost 4 years ago

    responsive crowdfunding page, using SCSS, flex, jquery

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Okay so I looked into the issue regarding the radio buttons, tweaked some properties and may have found a fix.

    Use a border

    .selectionContainer_background .selectionContainer .rewards .csections .radio__control {
        border: .125em solid #bdbdbd;
    //other properties
    }
    
    .circule{
    height:23px;
    width:23px;
    //other properties
    }
    

    This might center things exactly. Also, there can be an issue that will be resolved by removing the transform: translateY(1px);

    Marked as helpful
  • Michaela Kleer•60
    @michaelakleer
    Submitted almost 4 years ago

    Stats preview card component - HTML & CSS

    2
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Set a max-width to your .card-container.

    The site looks good on both 1440px and 375px but is not fully responsive in the tablet sections. Also in these sections you will find the image is not covering the whole section of the container so you can try and use background images to fix those issues.

    Marked as helpful
  • SnowFox•100
    @ISnowFoxI
    Submitted almost 4 years ago

    Responsive tip calculator, using html, sass, js, bootstrap.

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    When typing a large amount(>99), the total/person amount is not completely visible due to overflow..

    Everything else seems good and Thank God you have used a default Tip(5%) selected before hand. One minor improvement you can do is just turn the state of Bill amount input field to active.

    Marked as helpful
  • Angelika Jarosz•60
    @Guin-
    Submitted almost 4 years ago

    Responsive landing page using css and flexbox

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Hey,

    The site perfectly matches on 1440px so kudos on that.

    But if we move to a larger screens or smaller screens, the site isn't fully responsive because you have a breakpoint on 1024px and a min-width:1440px

    On mobile view, use background-position:center with background-image:url(...) because the images(hero, transform etc.) are pushed down

  • Tom•245
    @tttinh
    Submitted almost 4 years ago

    3-column preview card component

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Few things to point out,

    1.Don't go to mobile view so early, you can shrink to upto 1000px and then go mobile

    2.You probably used outline property on hover because you didn't want the content to move the layout which would have happened in case you used border property.

    But the outline does not create a rounded hover but a rectangular one.

    A fix to that is.. use box-shadow: inset 0px 0px 0px 2px #fff; instead of a border or outline..

    Marked as helpful
  • Siva kumar Katari•150
    @sivakumarkatari2020
    Submitted almost 4 years ago

    Loop studios landing page

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    The site is not mobile responsive.. so you can work on that.

    Also, set a max-width on your items as everything is stretched out on bigger viewports.

  • Jose Chaparro•455
    @jchapar
    Submitted almost 4 years ago

    Desktop First Solution Using CSS Grid and Flexbox

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    The height of 100vh on .columns limits sets a fixed height on columns grid and therefore the attribution is placed right next to the end of the 100vh of the grid.

    Try using a smaller height viewport and you will notice that the attribution sits just after a smallest vertical scroll.

    Remove that height.

    That also does not fix the issue because the first card will go above the screen which is even more confusing.

    And that is caused by another 100vh given to the .container. Because you have centered the flex within a 100vh, such misalignment occurs.

    Remove both the 100vh and this will work fine.

  • spyder•315
    @ratan17
    Submitted almost 4 years ago

    3 Column Preview Card Component using FlexBox

    4
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    You have used position: absolute; on the Learn More button with a bottom:5%.

    This takes the button out of the normal flow of the card and fixes the button on the card. Changing the height of the button will not affect the height of the .items

    So, the content that remains in the card is just the SVG, the heading and the paragraph and the button is placed in the 5% padding given to .items

    When on smaller viewport, the value of 5% decreases, whereas the the dimensions of the button remain the same.

    Head over to my solution if you like, I've used flex in the card itself.

    Marked as helpful
  • Irinella B.•80
    @3vilBonobo
    Submitted almost 4 years ago

    3-column preview card component made with HTML and CSS, part of Fronte

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    You card does not have a fixed height to begin with. All the content in the cards and the padding, margins etc. of that content make up the height of the card.

    Due to different content in the <p> tag as you said, the height of the card varies.

    One solution to this is

    Use a fixed height card.. And set flex on the card in the column direction. Then you can use the padding to position the elements in the cards. Can set padding/margin to auto if you want to use variable padding/margin.

    Marked as helpful
  • Angela Lin•10
    @xup6u600504
    Submitted almost 4 years ago

    3-column-preview-card-component by using html and css in pycharm

    3
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    These 3 items are flex items... and you always want to keep them in a single row. So get rid of flex-wrap as that will push a single item out of the row as it does in viewport <1420px.

    For rounded columns, you can use one of the below

        border-radius: 10px 0px 0px 10px;
    }
    .column3{
        border-radius: 0px 10px 10px 0px;
    }
    
    .flex-container>*:first-child
    {
     border-radius: 10px 0px 0px 10px;
    }
    .flex-container>*:last-child
    {
        border-radius: 0px 10px 10px 0px;
    }
    
  • Smita•375
    @Smita-14
    Submitted almost 4 years ago

    Mobile-first responsive site using BEM and CSS Flexbox

    1
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    Set a max-width on the container as it stretches out on bigger screens.

    Everything else looks good.👍

    Marked as helpful
  • spyder•315
    @ratan17
    Submitted almost 4 years ago

    3 Column Preview Card Component using FlexBox

    4
    Yashasvi Singh•890
    @aUnicornDev
    Posted almost 4 years ago

    On smaller screens, the buttons are overlapping the content of the card because of the absolute positioning given to them.

    Instead, use flex on the .items class so that you can position them in accordingly.

    Set a max-width to the cards as they keep on stretching on bigger screens.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub