Profile Card, Semantic HTML5 and CSS Custom Properties

Community feedback

• 

  Milos•330

  @MilosSimic994Posted over 3 years ago

  Hello Joshua, you can add to the `.paga { display: flex; align-item: center; justify-content: center; } it will solve the problem of centering card on all screens.

  as @pikamart mentioned you can definitely explore @media.

  1

  ---

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @MilosSimic994 I've tried that out and findout that {top: 50%;} is the top card box that placed 50% in mid screen. How to position card exactly 50% of the screen

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @jojomanurung if you want to align at that way, you could do. {transform: translate()}. This accepts two arguments, the first one is the x-axis, second y-axis. This moves the item's axis based on it own size and not the parent. So if you do {top: 50%}, then {transform: translate(0, -50%)}, it will be centered or you could do {transform: translateY(-50%)} to position only on the y-axis

  1

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @pikamart that really help me to understand {transform: translate()} very much appreciated for your explanation, sir

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @jojomanurung welcome, just ask if need help^

  0

  

  Milos•330

  @MilosSimic994Posted over 3 years ago

  @jojomanurung i think @pikamart explained to you very well, but try to use flex-box more then position...

  1

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @MilosSimic994 alraight thanks for the tips

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  You should add @media . These are media queries so that your page will be adaptable based on the size of the media query that you made. You can search for more info, w3schools have a lot of information about things in development^^

  1

  ---

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @pikamart Thanks for pointing that out. One more question if we must create certain screen resolution using @media is it a bit redundant to make it responsive?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @jojomanurung it's not that it's "redundant", the point of creating @media queries is to be responsive itself. But it if you properly adjusted some codes, then the codes that you will write at the media queries will be lesser

  1

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @pikamart I've included bootstrap.min.css for easy way to code @media queries, is that a sin?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @jojomanurung well it's not haha, frameworks makes things much easier. But if you were to create your own portfolio website for example, it will be better to not use any framework so that you could show others that you can make those complex things without having to use frameworks such as bootstrap

  1

  

  Joshua Melvin•35

  @jojomanurungPosted over 3 years ago

  @pikamart haha yeah you right. thank you now I understand what @media query purpose, tried it several times and the result really amaze me. Thanks again pikamart

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @jojomanurung Your welcome on that^^

  0