Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
1

Alvin

@alvyynm140 points

IT Student

I’m currently learning...

HTML, CSS, JS, React, SCSS

Latest solutions

  • REST Countries API site with React, React-router and Tailwind

    #react#react-router#tailwind-css#axios

    Alvin•140
    Submitted over 2 years ago

    2 comments
  • Huddle landing page with a single introductory section

    #accessibility

    Alvin•140
    Submitted almost 3 years ago

    1 comment
  • Stats preview card component using HTML, CSS, Flexbox

    #accessibility

    Alvin•140
    Submitted almost 3 years ago

    3 comments
  • One-page website using vanilla CSS, JS

    #accessibility

    Alvin•140
    Submitted almost 3 years ago

    0 comments
  • Order summary component using pure CSS

    #accessibility

    Alvin•140
    Submitted almost 3 years ago

    0 comments
  • Responsive accordion using HTML, Vanilla CSS and JS

    #accessibility

    Alvin•140
    Submitted almost 3 years ago

    2 comments
View more solutions

Latest comments

  • Mohit Jain•190
    @MOHITBILALA
    Submitted almost 3 years ago

    Flex and grid are used

    1
    Alvin•140
    @alvyynm
    Posted almost 3 years ago

    Hey Mohit, thanks for working on the challenge. Just a few notes for you.

    Your code isn't responsive as required by the challenge. First, you're using a single image across all screen sizes. You need to use the desktop image (the one you're currently using) only on large screens, then a mobile image for smaller screens. Check out MDN's responsive image guide for more details.

    Secondly, you'll need to use media queries to adjust the layout based on the agent screen.

    Thirdly, your cart icon doesn't display on certain screen sizes. I would use a real button element:

    <div class="anchor">
      <button class="cart-btn"><img src="images/icon-cart.svg" alt="cart icon" />. 
      </span>Add to Cart</button>
     </div>
    

    and then style it as follows👇:

    .cart-btn {
      width: 100%;
      height: 50px;
      background-color: hsl(158, 36%, 37%);
      border-radius: 5px;
      color: hsl(0, 0%, 100%);
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      border: 0;
    }
    
    .cart-btn > img {
      margin-right: 20px;
      vertical-align: sub;
    }
    
    .cart-btn:hover {
      background-color: hsl(156, 42%, 18%);
    }
    

    I hope this helps! Keep crushing 💪

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