Skip to content
OverviewSolutions
0
Comments
2
Higor Neves Marques
@higormarques

All comments

  • ttran247•10
    @ttran247Submitted over 4 years ago

    I'm used react because I am trying to challenge myself. I know its not perfect. But for some reason, I could not get the font-weight to work. If you know what's wrong please leave me a comment.

    React

    1
    Higor Neves Marques•45
    @higormarquesPosted over 4 years ago

    Hi, ttran247!

    Your code is careless about the mobile version, you should think in mobile-first every time that you are developing a responsive web page.

    You had set all to be applied only after 480px breakpoint, but we have a lot of mobile phones running with a 320px screen.

    the best approach to deal with it is:

    /* style.css */


/* mobile first */
.some-class {
  ...
}

/* tablet */
@media screen and (min-width: 768px) {
  .some-class {
    ...
  }
}

/* small desktop */
@media screen and (min-width: 1024px) {
  .some-class {
    ...
  }
}

/* desktop */
@media screen and (min-width: 1366px) {
  .some-class {
    ...
  }
}

    Best regards.

    1
  • 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