Skip to content
OverviewSolutions
25
Comments
23

Snehamoy Bag

@snehamoybagWest Bengal, India600 points

Learning Front-end

I’m currently learning...

React JS, Node Js

Latest solutions

View more solutions

Latest comments

  • Snehamoy Bag•600
    @snehamoybag

    Man this looks incredible! Great job

  • Snehamoy Bag•600
    @snehamoybag

    Hi @justEfere, 🙋‍♂️

    Congratulations on completing this challenge! 🎉 You did a great job on the layout, it looks great! 👏

    You can use percentage units to give relative size to the children 😄

    <div class="container">
   <div class="container-item"></div>
</div>

    .container {
    width: 100px;
}

.container-item {
    width: 50%;
}

    This will make the .container-item to be 50% of its parent. So if you change the width of .container, the .container-item's width will also change.

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi @edivaldojrdev,

    Great job completing this challenge! 👏

    Answering to your question, since you have only set the img {height = 100%}, it only stretched the image that is inside of your <img> tag. The mobile version of the image is actually inside the <source> tag within the picture.

    Therefore, in order to target both img and source tag you can use this selector :

    picture > * {
    height: 100%;
}

    This (picture > * { }) will target all element that is a direct child of the <picture> element. 😄

    Also, I just noticed that you are using order property to shift the layout 😯 as a disclaimer I'd recommend you not use it often, as it can mess up the actual order of html document which can cause major confusion to someone using an assertive technology 😅

  • Snehamoy Bag•600
    @snehamoybag

    You're an inspiration.. always learn something useful from you

  • Snehamoy Bag•600
    @snehamoybag

    Woah those waves are so cool 😍 love it!

  • Snehamoy Bag•600
    @snehamoybag

    Hi @dvbenthem, Congratulations on completing the challenge! Good Job! 👏

    Answering to your query

    Setting a fixed height can be problematic.

    In small screen devices the content's height increases as the content's width shrinks, so if you have a element with set height the content inside of it overflows out of it.

    In your case as you have set a height on body, the extra content overflows out of the body and everything overflowing out of the body gets cropped. 😅

    To fix the issue

    Try to stick with min-height when setting a height on a element. Setting a min-height will give the element the minimum desired height and it'll strech if the content inside of it increases, so it won't cause any overflow.

    In short always use min-height unless you have a solid reason not to. 👍

    Marked as helpful
View more comments