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

Sahil Satpute

@exploresahilNagpur, Maharashtra, India80 points

I'm a person who loves to take pictures and make things look pretty. I'm also a developer with a passion for front-end development and design.

I’m currently learning...

React

Latest solutions

  • Frontend Mentor - Blog preview card solution | Used Flex-Box

    #sass/scss

    Sahil Satpute•80
    Submitted over 1 year ago

    1 comment
  • My News homepage solution

    #gulp#sass/scss#node

    Sahil Satpute•80
    Submitted over 2 years ago

    1 comment
  • My Chat app CSS illustration solution

    #gulp#sass/scss#node

    Sahil Satpute•80
    Submitted over 2 years ago

    0 comments
  • My order summary card solution

    #sass/scss

    Sahil Satpute•80
    Submitted over 2 years ago

    1 comment
  • My QR code component solution

    #sass/scss

    Sahil Satpute•80
    Submitted over 2 years ago

    0 comments

Latest comments

  • Lea•160
    @Hatchino
    Submitted over 2 years ago

    Order-summary CSS

    2
    Sahil Satpute•80
    @exploresahil
    Posted over 2 years ago

    Hello Lea, I saw your code for this challenge. I think you need to define Height to the body element. And position: absolute to .attribution class (if you want it to be included in browser, other wise remove the - div class attribution - from html and css).

    You can try these changes,


    body {
         height: 100vh; /*----------------------> Add height 100% of Viewport---*/
         font-size: 16px;
         display: grid;
         place-items: center;
         font-family: 'Red Hat Display', sans-serif;
         color: var(--Dark-blue);
         background: url(images/pattern-background-desktop.svg) no-repeat;
         background-color: var(--Pale-blue);
         background-size: contain;
     }
    
    .attribution {
         margin-top: 2rem; /*----------> can remove, not needed ---*/
         color: var(--Desaturated-blue);
         position: absolute; /*-----------------------> Add Position - Absolute ---*/
         bottom: 0; /*-----------------------> Will make sure attribution stay at the bottom ---*/
         height: 40px;
     }
    

    I think these changes will center the card to the browser-viewport. Thank you and have a good day.

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