Skip to content
Submitted over 3 years ago

3 Columns Preview Cards mobile first with SCSS and a custom function

Filippo•375
@Filippo-B
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I wrote a simple function in SCSS to convert any px value into rem. I would like to have some feedbacks on that. Also, often I have difficulties centering the main container vertically. What method do you use? Thanks.

Community feedback

  • Kristian Kalvå•360
    @kkalvaaPosted over 3 years ago

    The simplest way to align anything vertically is with flexbox and "align-items: center;", You can do the same with grid, but it doesn't make sense to go grid for just one element.

    Marked as helpful
    1
  • david688888•35
    @david688888Posted over 3 years ago

    to align the flex item vertically, first you need to adjust the flex container height. im using vh css unit for my code. i set it to min100vh because 100vh = your device screen height, so the height of the flex container is automatically adjusted to your screen height. Im sorry for the bad explaination because im not from a english speaking country

    heres some resource: https://www.w3schools.com/cssref/css_units.asp https://www.w3schools.com/css/tryit.asp?filename=trycss3_align_flex

    1
    Filippo•375
    @Filippo-BPosted over 3 years ago

    @david688888 That's clear enough, thank you!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord