Submitted almost 3 years ago

Card in CSS (First challenge ever)

MSA-new• 30

@MSA-new

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone.. I'm new in web development.. this is my first challenge from https://www.frontendmentor.io ever.

Here is a list things I didn't know how to do XD:

How to center the card vertically in the page.
How to center the content of the card horezontally.
How to center the content of the card vertically.
How to change the color of the horezontal line.
How to make some paragraph on the same line to another paragraph inside the card.

Please look at the picture in "Design" folder to see how the card is supposed to look like. Note: I didn't do anything about the responsive design because I wanted to finish the desktop design first. Thank you...

Community feedback

salem moqa• 240

@moqasalem

Posted almost 3 years ago

Hello MSA-new welcome to frontendmentor

I think the problems 1,2,3,5 which you are facing can be solved with "flex" element like this:

.class-name{ display: flex; flex-direction: ... ; justify-content: ... ; align-items: .... ; }

for problem 4 you can give border-bottom to your class to make line below it .

MSA-new• 30

@MSA-new

Posted almost 3 years ago

@moqasalem Hi Thank you for your answer

.direct-parent-to-content {
   display: flex;    /* When I used this the image was gone :-( */
   justify-content: center;
   align-content: center
}

Where should I use it ?

salem moqa• 240

@moqasalem

Posted almost 3 years ago

@MSA-new it depends on your classes and how many columns or rows you wanna use Take look to me solution and open the style code to see the Flex components https://www.frontendmentor.io/solutions/nft-preview-card-component-with-html-and-css-vnXq65DVb

Coder Suresh• 870

@coderSuresh

Posted almost 3 years ago

Hey there, I hope this answer will be helpful for you.

First of all, there are different ways to center things in CSS. You can use a table, you can use the grid as well as a flexbox, and a position too.

Among them, I love to center things using CSS FlexBox because I know how to use it. You can try any of the methods and use whichever you like.

The block of code for CSS FlexBox is:

div {
        display: flex;
        align-items: center;  /*centers div vertically*/
        justify-content: center; /*centers div horizontally*/
     }

You can see this detailed guide for CSS flexbox.

Now, to change the color of the horizontal line (while using <hr> tag), you can remove its border, give it the desired height, and change its background color. Below is the code:

hr {
        border: none;
        height: 1px;
        background-color: purple;
    }

Sorry, I didn't understand your last question. Feel free to ask any question, I am always ready to help you.

MSA-new• 30

@MSA-new

Posted almost 3 years ago

@coderSuresh Hi Thank you for your answer.. I did try to center it using CSS FlexBox but it didn't work,, Here is what I've tried:

.content {
  display: flex;
  justify-content: center;
  align-items: center
}

I tried it on the direct parent of the content. Thank you

Please log in to post a comment

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