Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
23

Snehamoy Bag

@snehamoybagWest Bengal, India600 points

Learning Front-end

I’m currently learning...

React JS, Node Js

Latest solutions

  • IP Address Tracker using Ipify and Leafletjs

    #accessibility#bem

    Snehamoy Bag•600
    Submitted about 2 years ago

    0 comments
  • Rock, Paper, Scissors game using HTML SCSS JS

    #accessibility#vite#bem

    Snehamoy Bag•600
    Submitted over 2 years ago

    0 comments
  • Advice Generator App using HTML CSS JS API

    #accessibility#bem

    Snehamoy Bag•600
    Submitted over 2 years ago

    0 comments
  • News Homepage Main section using HTML SCSS JS

    #accessibility#sass/scss#vite

    Snehamoy Bag•600
    Submitted over 2 years ago

    0 comments
  • Insure Landing Page using HTML SCSS JS

    #accessibility#sass/scss#vite

    Snehamoy Bag•600
    Submitted over 2 years ago

    1 comment
  • Clipboard landing page using HTML SCSS BEM

    #accessibility#bem#sass/scss#vite

    Snehamoy Bag•600
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • Alejandro25A•220
    @Alejandro25AR
    Submitted about 2 years ago

    Age calculator with React + TS, Atomic desing and mobile first

    #bem#itcss#sass/scss#typescript#react
    1
    Snehamoy Bag•600
    @snehamoybag
    Posted about 2 years ago

    Man this looks incredible! Great job

  • Efere Precious•580
    @justEfere
    Submitted over 2 years ago

    Responsive four card feature using flexbox and grid

    #styled-components
    1
    Snehamoy Bag•600
    @snehamoybag
    Posted over 2 years ago

    Hi @justEfere, 🙋‍♂️

    Congratulations on completing this challenge! 🎉 You did a great job on the layout, it looks great! 👏

    You can use percentage units to give relative size to the children 😄

    <div class="container">
       <div class="container-item"></div>
    </div>
    
    .container {
        width: 100px;
    }
    
    .container-item {
        width: 50%;
    }
    

    This will make the .container-item to be 50% of its parent. So if you change the width of .container, the .container-item's width will also change.

    Marked as helpful
  • edivaldojrdev•90
    @edivaldojrdev
    Submitted over 2 years ago

    Stats Preview Card Component

    1
    Snehamoy Bag•600
    @snehamoybag
    Posted over 2 years ago

    Hi @edivaldojrdev,

    Great job completing this challenge! 👏

    Answering to your question, since you have only set the img {height = 100%}, it only stretched the image that is inside of your <img> tag. The mobile version of the image is actually inside the <source> tag within the picture.

    Therefore, in order to target both img and source tag you can use this selector :

    picture > * {
        height: 100%;
    }
    

    This (picture > * { }) will target all element that is a direct child of the <picture> element. 😄

    Also, I just noticed that you are using order property to shift the layout 😯 as a disclaimer I'd recommend you not use it often, as it can mess up the actual order of html document which can cause major confusion to someone using an assertive technology 😅

  • P
    Dave Quah•650
    @Milleus
    Submitted over 2 years ago

    Ping single column coming soon page

    #cube-css#accessibility
    2
    Snehamoy Bag•600
    @snehamoybag
    Posted over 2 years ago

    You're an inspiration.. always learn something useful from you

  • lieneil•560
    @NJVS
    Submitted over 2 years ago

    Huddle Landing Page

    #sass/scss#animation
    2
    Snehamoy Bag•600
    @snehamoybag
    Posted over 2 years ago

    Woah those waves are so cool 😍 love it!

  • dvbenthem•110
    @dvbenthem
    Submitted almost 3 years ago

    four-card-feature-section-master

    2
    Snehamoy Bag•600
    @snehamoybag
    Posted almost 3 years ago

    Hi @dvbenthem, Congratulations on completing the challenge! Good Job! 👏

    Answering to your query

    Setting a fixed height can be problematic.

    In small screen devices the content's height increases as the content's width shrinks, so if you have a element with set height the content inside of it overflows out of it.

    In your case as you have set a height on body, the extra content overflows out of the body and everything overflowing out of the body gets cropped. 😅

    To fix the issue

    Try to stick with min-height when setting a height on a element. Setting a min-height will give the element the minimum desired height and it'll strech if the content inside of it increases, so it won't cause any overflow.

    In short always use min-height unless you have a solid reason not to. 👍

    Marked as helpful
View more comments

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