Skip to content
OverviewSolutions
25
Comments
23
Snehamoy Bag
@snehamoybag

All 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
  • Snehamoy Bag•600
    @snehamoybag

    Daaaaaaamn! The animations are so cool 😍

  • Snehamoy Bag•600
    @snehamoybag

    Hi @Peteonthebeat

    Looks like your site is not loaded as the index.html is inside of a folder/directory. I'd recommended you to put the files outside of the Qr~Code-Component folder and then update the solution 👍

    And also answering to your query, justify-content: center and align-items: center should center a div both horizontally and vertically when the parent container has a set height. If the parent container doesn't have a height, align-items property won't work when flex-direction is set to row. Similarly, justify-content won't work when the parent container doesn't have a height and its flex-direction is set to column. 😄👍

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi @Fidget836 🙋‍♂️

    Congratulations on completing your first challenge 👏 really good stuff 👏

    Usually <br> tag is used to signify a line break so using it in a single sentence is semantically a bad idea. Instead you can set the title a max-width using the super useful ch unit, where ch stands for characters.

    h1 { max-width: 15ch; }

    LEARN MORE

    And if you want change the width of the title for wider screens you can use the media queries

    @media (min-width: 720px) { h1 {max-width: 10ch;} }

    *This change of style will appear when the screen resolution is 720px or more 😄 *

    Learn more about Media Queries

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi Ayush 🙋‍♂️

    Great job completing the challenge 👏

    You can use media queries to style your page for big screens. Alternatively you can use non-fixed units such as percentages % to set the widths and heights of an element 😄👍

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi @hWeitian, Congratulations on completing on your first project 👏 I really liked how you used Flex-box efficiently to match the desired outcome. Great job!

    One concern i can notice in your css is the html { width: 100vw; height: 100vh } 😅 as i've learnt earlier from a fellow frontend mentor dev that setting a fixed width and height can give scroll bars to some device and worse.. the content might even get cropped. So i'd recommend you to never use width to set the pages cause width is by default 100% on all devices and is responsive. On the other hand setting a fixed height can cause the content to overflow or get cropped.. so whenever you need to set a height.. always use the min-height property 😄👍

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi Chan 🙋‍♂️ Great try attempting this challenge 👏 I too struggled positioning the background-circle images 😂 its no big deal though as a developer we learn new things when we get stuck 😁

    So for your queries you don't actually have to place the images on your html. You can set multiple background images separating them with commas ,. Like this background-image: url(images/1st-img.svg) , url(images/2nd-img.svg);

    Similarly to position the two images separately you can do something like this background-position: right 52vw bottom 35vh, left 49vw top 49vh ; As you can see, we used , to position the two different images seperately. 😃

    To make the profile card responsive, You can set its default width to something like width: 90% and to make the card not get too wide add a calculated max-width, like max-width: 21rem

    Here are few documents you can check to learn more about this:

    And as a final note, You don't really have to create a separate css file for the mobile version . You can add as many media queries you want in a single css file. 👍

    Feel free to reply if you need any further help 😄

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Damn this is so cool! 😯🔥

  • Snehamoy Bag•600
    @snehamoybag

    Hi Sam 🙋‍♂️ Great job on completing this challenge it looks awesome 👏 Keep going!

    Answer to your query : If you're talking about the "quote" background image then you can use background-size css property to resize your background images. For the units you can use rem/ em/ % / px etc.

    And similarly if you want to place background image at a certain area in your page then you can use the background-position css property

    Here are few useful links to learn more about them

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Great job! Keep on going 🔥

  • Snehamoy Bag•600
    @snehamoybag

    Great Job Cameron 🙌 Congratulations on completing your first challenge 🙌

    And yes it is better to markup your html first then do the css, well atleast some of the basic structural html (i.e. divs, h1, paragraph etc). You can later change, add, remove or edit the html if you have to 😄 and it is completely normal for a web developer to switch between tabs again and again in order to make sure everything looks and works fine.. so don't worry about it 😁

    Marked as helpful
  • Snehamoy Bag•600
    @snehamoybag

    Hi Mani! You can add multiple background-images by separating them with commas

      background-image:  url('/first_image'), url('/second-image');
}

    Similarly they can be positioned separately using commas

    background-position: right 52vw bottom 35vh, left 49vw top 49vh ;

    😄

  • Snehamoy Bag•600
    @snehamoybag

    Hi Lewis, Great job on the challenge 🙌 Me too got stuck in this challenge for a while and then I found this video from Kevin Powell where he discusses more about the background image positioning. It was super helpful 😄

    Marked as helpful