HTML & CSS any feedback appreciated.

Community feedback

• 

  Higor Neves Marques•45

  @higormarquesPosted over 4 years ago

  Hi Nico, your project is so good but has some alignment issues.

  I recommend you wrap the four cards into a div element and set this one as position: relative to be the reference for the absolute cards.

  Add the following code to fix the alignment of the cards,

  Top and Bottom cards:

  left: 50%;
  /* it set the element to align according to the center of the page */
  
  transform: translateX(-50%); 
  /* it drawback te element 50% of its own width, setting the element centralized */
  

  Left card:

  left: 50%;
  transform: translateX(calc(-50% - 365px));
  /* same from the top and bottom cards, but adding the size os one card + margin (340px + 25px) */
  

  Right card:

  right: -50%;
  transform: translateX(calc(50% + 365px));
  

  If you have any doubt, please message me and I will try to help you :)

  1

  ---

  

  Nico Meyers•50

  @NicoMeyersPosted over 4 years ago

  @higormarques Thanks for the feedback, I am unfamiliar with the transform property but I will apply it. Can you check out my huddle landing page as well ? I have some alignment issues on that screenshot as well but not my live site.

  0
• 

  tspinjac•140

  @tspinjacPosted over 4 years ago

  Hi,

  absolute position makes it. In general, that's not the way to go for some mayor layout.

  0
• 

  Nico Meyers•50

  @NicoMeyersPosted over 4 years ago

  Not sure why the calculator div is so far right, doesn't look like that on my live site. Any feedback is appreciated.

  https://nicomeyers.github.io/Four-Card-CSS-HTML/ direct link to my live site.

  0