Plan HTML and CSS, No JS.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Layout in desktop is good and the mobile state is fine as well, though the image on the top is pushed and can't be scrolled down.

  Suggestions would be that:

  1. I really recommend this, though this line is overused now, but please refrain from using height: 100vh. Using that limits your component size, in your case, the body tag. If you inspect it, from the bottom, you will see that your layout is pushed on to the top and the component's size is reduced. Why? Because you are only getting dimension based on the viewport, and if the screen of a device is small, then it will adjust based on that screen and make your layout not consistent. I recommend to omit/remove it.

  1.1 Just add some paddings to the top and bottom of the body tag. Remove the overflow in the body tag. You don't really need that in here.

  2. I don't prefer using a tag in this challenge, radio boxes or checkbox will be really ideal on this one. Okay, so when user clicks, it changes the size right thus shaking the image on the left. What you can do is that, set a max-height on your card-body selector and add overflow: hidden. This way your container won't get that shake effect when an answer shows up. But still, you will be translated upwards, because you are using a tags, which is a link.

  Regarding your query, I think you cannot achieve that by that just using css. If you are using checkbox then that is not a problem.

  If you need any help, just drop your query okay^

  0

  ---

  

  Cromix•40

  @iCromixPosted over 3 years ago

  @pikamart Hey pikamart, thanks for the feedback!.

  1. About the height property, if i remove it the layout gets 'cutted in half', didn't find a workarround for this, and adding padding to the body to move the image away from the top doesn't work because the image has position: absolute;.

  2. Thanks for this, i'll check the "checkbox way" of doing it. In fact, i've found one of this using checkbox in codepen i guess, but i refrain from doing it because i didn't understand how it was done. I'll check it out again.

  Thanks again for the feedback!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @iCromix Hey, like what I said, if you were to follow my suggestion.

  Remove the height and overflow in the body tag. Upon doing so, you will now be able to scroll in the main layout. Then just add padding to the top and bottom of the body tag.

  The image will still work and I don't really see any position: absolute declaration on your solution

  0