Skip to content
OverviewSolutions
10
Comments
5
Daniel Chettiar
@dannyboi07

All comments

  • RTX3070•490
    @RTX3070Submitted almost 3 years ago

    Feedbacks are welcome! : )

    HTML5 CSS

    6
    Daniel Chettiar•140
    @dannyboi07Posted almost 3 years ago

    When will you be back in stock? :p

    1
  • Daniel Chettiar•140
    @dannyboi07Posted almost 3 years ago

    You should look into what media queries are in css and responsive web design (this is a concept in frontend web dev).

    Media queries are how you set different versions of a layout for different screen sizes.

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Best links for you to get up and running with basic media queries.

    1
  • Daniel Chettiar•140
    @dannyboi07Posted almost 3 years ago

    Just add another media query that sets the layout in the intermediate duration between the desktop version and mobile version. Good responsive sites that I've seen have three media queries on average. You could use 4. Desktop, laptop, tablet and mobile.

    It would be nice if there was another media query that modifies the layout around the time when the Sign up button breaks into two lines.

    Also don't modify the body element and include it into the layout. Instead have a master card container, set the widths etc. Then you could flex the body element and set centering css properties.

    0
  • Brendan Hyde•330
    @hyde-brendanSubmitted almost 3 years ago

    First time doing JavaScript, and I would appreciate any feedback, but especially for: a] How to do a wipe animation when opening / closing a tab; b] If there's a better way to orient the images (had to set the mobile-to-desktop breakpoint really high because the images would completely break otherwise :V)

    FAQ accordion card

    1
    Daniel Chettiar•140
    @dannyboi07Posted almost 3 years ago

    You can transition the height property with css. Use 'transition: height <insert animation time>; You also have to add it to two places, the closed state css class of the div (or whatever you placed it in), and the expanded state css class.

    But since you used max-height, I don't think it can be done. I tried a lot. To have animation I went the JS way of adding extra ems to the answers that had a lot of words, depending on the screen width.

    The font-size needs to be a bit bigger tho. Btw how hard was it to manage those images?

    0
  • Christ Kevin Touga Watat•270
    @Christ-KevinSubmitted almost 3 years ago

    I have some questions about my challenge. I recognize that I still need to make progress in responsive design and responsive images using CSS and I have some questions concerning these topics. The first one is rather vague and general. Can you please tell me how you have improved your responsive design skills? In fact I'm curious to see how you have progressed in this domain and if you have any tips to share with me in the field of responsive design and responsive images. The second question is about the site I just shared. Indeed I would have liked to have a media-query with "min=540px". But unfortunately it was not possible because when I reduced the window below 750px, the flex on the bottom left of my container did not have enough space. Do you think it's not a problem if my media querie is set to "min=750px" instead of "min=540px" as i did? Or do you think I should consider reducing the font size of this flexbox? Or do you have an alternative solution? Thank you in advance to all the team. Thanks frontendmentor

    Translated with www.DeepL.com/Translator (free version)

    stats-preview-cards using Flexbox and other CSS custom properties

    2
    Daniel Chettiar•140
    @dannyboi07Posted almost 3 years ago

    Hey Kevin. I'm pretty new to this stuff too. Just a couple of weeks back I was absolutely dumb at layouts and general css. Content from YT creators like Kevin Powell got me going the right track.

    I recommend that you try the below link, from freecodecamp and Kevin Powell on Responsive web design. It's the basics. But Kevin explains the reasoning behind why he chooses certain things when he creates the layout, which I think is the best thing to learn from this video.

    https://www.youtube.com/watch?v=srvUrASNj0s&t

    Marked as helpful
    0