Skip to content
OverviewSolutions
7
Comments
16
spyder
@ratan17

All comments

  • spyder•315
    @ratan17

    I see that you've used flexbox to center the card container which is a right approach. Your flexbox is only horizontally centered but not vertically. That's because you have to set height to the flex container which is your
    body element and then use another flexbox property align-items: center. This will center your card container both horizontally and vertically.

    It would look like this:

    body{
    min-height: 100vh;
      display: flex;
      justify-content: center;
   align-items: center;
}

    use min-height instead of just height.

    If you want to get a good grip on flexbox I would suggest you to play this game: Flexbox Zombies Game

    Marked as helpful
  • spyder•315
    @ratan17

    you have used vh units everywhere, unnecessary divs to wrap content. avoid setting height use instead padding property with rem values eg ) button{ padding: 1rem; }

    Marked as helpful
  • spyder•315
    @ratan17

    dude nice work. i would like to give you a notice about scrolling to your site.

    and one interesting part (🤔) in your code i noticed is that you have used margin:auto to your #mainContainer

  • spyder•315
    @ratan17

    congratulations on completing your first challenge on frontendmentor 👏👏

    I would like to give you a notice about responsiveness. The code is not fully responsive. And one more thing about the background-image. In design the background-image is styled differently and in your preview its different. Was that intentional or you couldn't find the way to do it?

    Marked as helpful
  • spyder•315
    @ratan17

    the problem with your image size is because you have used a pixel value. you have set the conatiner's size to 450px so it will ALWAYS TAKE 450px width of the screen no matter which device you are using

    pixel value is an absolute value.

    to overcome your problem you may use a relative unit like %, em, rem, vh, vw etc.

    I would suggest you to read this article about absolute units and relative units :

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

    Marked as helpful
  • spyder•315
    @ratan17

    1. avoid using pixel values

    2. and while using flex there's no need to everytime to enclose the flex-items in a div... when you set a div parent to display:flex the children inside it will be set to flex-items

    3. margins, padding are part of BOX MODEL. so read about that on MDN's website and also read about 'box-sizing' css property

    4. get used to getting frustrated while coding 😁

    If you have more questions ,I'd be really glad to answer them

    Marked as helpful
  • spyder•315
    @ratan17

    there's overflowing issue with the text content

  • spyder•315
    @ratan17

    between 992px to 1200px device width the text-content below OUR CREATIONS is overflowing

  • spyder•315
    @ratan17

    avoid using pixel values for sizing the elements, use relative values such as vh,vw, %, em,rem

    link for relative units : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

    if you update the following values your .row container will be exactly centered on the screen :

    1. body element :

    a ) remove these properties align-items: center; align-content: center;

    these properties don't have any effect in your code since they work only when you have set the element to display:flex

     b) set height to 100%
 c) lastly set flex properties to center the content

    this is what it would look like if you update body element as above :

    body { background-color: hsl(233, 47%, 7%); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    1. .row container - a) remove margin and padding b) update width to 65%

    this is what it would look like if you update .row conatiner as above :

    .row{ display: flex; align-items: center; align-content: center; width: 65%; }

    And if you are struggling to understand flexbox , play this flexbox zombie game by mastery games. It helped me alot to understand flexbox

    link: https://mastery.games/flexboxzombies/

    Marked as helpful
  • spyder•315
    @ratan17

    may i know why you didn't go flex properties to center your .cards container ?

  • spyder•315
    @ratan17

    IGNORE the HTML and ACCESSIBILITY ISSUES . I will fix it myself.

    Give feedback apart from the above mentioned issues

  • spyder•315
    @ratan17

    Update : flex properties used for the bottom content

  • spyder•315
    @ratan17

    you could have used flexbox for centering your cards

    Marked as helpful
  • spyder•315
    @ratan17

    About centering issue :

    1. to center the content using flexbox you have to first set parent's width and height . I can see that you've set only width but not height.

    2. you have not used correct flex properties to center the content/children

    Marked as helpful
  • spyder•315
    @ratan17

    I have UPDATED MY SOLUTION GUYS !! PLEASE HAVE A LOOK

  • spyder•315
    @ratan17

    looks like you are also facing issue with svg element position