Latest solutions
News Homepage Main section using HTML SCSS JS
#accessibility#sass/scss#viteSubmitted over 2 years agoClipboard landing page using HTML SCSS BEM
#accessibility#bem#sass/scss#viteSubmitted over 2 years ago
Latest comments
- @Alejandro25AR#bem#itcss#sass/scss#typescript#react@snehamoybag
Man this looks incredible! Great job
- @justEfere@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 - @edivaldojrdev@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 thepicture
.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 😅 - P@Milleus@snehamoybag
You're an inspiration.. always learn something useful from you
- @NJVS@snehamoybag
Woah those waves are so cool 😍 love it!
- @dvbenthem@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