Vanilla HTML,CSS,JS with animated quote display

Community feedback

• 

  NinfarZ•80

  @NinfarZPosted over 1 year ago

  Hello there! Good job on the challenge, I liked the quote displaying effect. I have used it myself on a personal project before. As for how it could be accomplished better, I'm not sure. I had the text with a position absolute and the container with a position relative. Maybe you could try something like this and see if you like, and then position the adviceText as needed. This would probably affect the before:: and after:: you set here, though.

  .adviceCard {
    background-color: hsl(217, 19%, 24%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
    position: relative;
    min-width: 40ch;
    aspect-ratio: 10/9;
  }
  
  
  
  #adviceText {
    font-size: 2rem;
    position: absolute;
  
  }
  

  As for keeping the cards within the screen size, from what I've tested, it seems to be the divider img's doing. It overflows on mobile. There should be two images in the folder project, one for desktop and another for mobile. I think using a media query to switch between the two images would help. By doing so, you'd probably not need most of the widths and heights you set on many of the elements, as well as that media query. Good job and keep it up! :) And take all of this with a grain of salt as I'm not too experienced in the subject yet haha

  0