All comments

• 

  Guillermo Santos•10

  @guillermoSbSubmitted over 2 years ago

  • Is there a better way to handle responsiveness? I did it using 95vw but I feel there is a better option like: width: 100%; margin: auto 20px;

  

  HTML5, CSS, Javascript, Flexbox

  1

  30
  

  Gilberto Fernández•60

  @gfernan24373Posted over 2 years ago

  Great job!!! your did better than me! I think I forgot the responsive desing of my component on my challenge XD. But you can add a media querie to especify how you want to display the main container. You can use properties for: @media only screen and (max-width: 375px) { body { display: flex; justify-content: center: align-items: center: width: 100 vw; height: 100 vh; } }

  Regards!!!

  Marked as helpful

  0
• 

  Trey•290

  @willettoSubmitted over 2 years ago

  Update: Thank you for all the comments and links to helpful resources. I was able to fix both issues, although the animation isn't as smooth as I'd like it. I was able to implement a version of Christian's idea within my main element.

  //Original Post I have two areas I need help in:

  1. How can you consistently place the floating box in about the right area?
  2. How can you change an element, like the answers, from display: hidden to display: grid and have it transition in nicely?

  Thanks for your help and feedback!

  

  FAQ Card

  4

  40
  

  Gilberto Fernández•60

  @gfernan24373Posted over 2 years ago

  Hey!! nicely done!!! I gonna submit this challenge in a couple of hours, it was so hard but no imposible positioning the @ box, you can use position relative and absolute with relative values for the properties like width, height and the position for the top, botton, right and left. Feel free to review this material that I founded to solve this issue https://codepen.io/graup/pen/EPjNwr.

  In the JS document you can set the properties for the faqs answers in this case p tags. I don't know why the js script file cannot read the properties in the css files directly. I founded sites explaining the getComputedStyle and getPropertyValue methods to read the properties in the .css file but looks to hard to implement. if you select a p tag like this in the js file:

  let faqs = document.querySelectorAll('.p-faq'); //Select all the p tags for (answer of faqs) { console.log(answer.style.display): } //Console =

  So... All the properties are empty and you need to set it again like this: for (answer of faqs) { answer.style.display = 'none'; } . . ...rest of the code here And now, you can do whatever you want.

  Marked as helpful

  0