Skip to content
OverviewSolutions
7
Comments
16
spyder
@ratan17

All comments

  • spyder•315
    @ratan17Posted over 3 years ago

    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
    1
  • spyder•315
    @ratan17Posted over 3 years ago

    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
    2
  • spyder•315
    @ratan17Posted over 3 years ago

    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

    0
  • Yassine•35
    @yassinelk2020Submitted over 3 years ago

    Hello everybody this is my first shot with this challenge, your feedback is really appreciated.

    Stats Card

    1
    spyder•315
    @ratan17Posted over 3 years ago

    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
    0
  • nauski•80
    @nauskiSubmitted over 3 years ago

    What I didn't understand is that while the mobile view is under 375px, the hero image is still 450px wide in the image. So that should probably be scaled somehow. Or is the whole design just slightly narrower.

    Basic HTML and CSS

    1
    spyder•315
    @ratan17Posted over 3 years ago

    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
    0
  • Shardul Mulay•70
    @sh4rdu1-gitSubmitted over 3 years ago

    That took me longer than I expected. Never knew I would struggle this much while setting margins and padding. Suggest me some tutorials or blogs which can help me understand those things clearly. You can also give constructive criticism on my design.

    Stats Preview Card Component

    1
    spyder•315
    @ratan17Posted over 3 years ago

    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
    1
  • spyder•315
    @ratan17Posted over 3 years ago

    there's overflowing issue with the text content

    0
  • spyder•315
    @ratan17Posted over 3 years ago

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

    0
  • MaryF•350
    @JanselinSubmitted over 3 years ago

    I had some hard times with the pictures and the responsive design. I would be happy to know some of your opinions and tips for this project!

    How can I make the whole card to be centered vertically and horizontally? that's my question to the community! :)

    Flexbox Column, Pure CSS, background blending mode

    1
    spyder•315
    @ratan17Posted over 3 years ago

    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
    0
  • Rachana Hegde•155
    @rachanahegdeSubmitted over 3 years ago

    This was my first time using CSS flexbox to build a website but I used media queries to make it fairly responsive to most screen sizes. Any feedback on ways to make this website more responsive or accessible would be helpful. Thanks! :)

    Update: Thank you all for the feedback so far. I have addressed the accessibility issues and looked into the resources that were recommended.

    3 column card using CSS Flexbox and Media Queries

    3
    spyder•315
    @ratan17Posted over 3 years ago

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

    1
  • spyder•315
    @ratan17Posted over 3 years ago

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

    Give feedback apart from the above mentioned issues

    0
  • spyder•315
    @ratan17Posted over 3 years ago

    Update : flex properties used for the bottom content

    0