Skip to content
OverviewSolutions
0
Comments
4
AndreiT
@AndreiTih

All comments

  • pstar8•260
    @pstar8Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud I was able to implement the active states in my design. Though, some were more difficult than others, I was able to scale through. Also, the duration of the project was shorter than I expected which is great improvement.

    What challenges did you encounter, and how did you overcome them?

    I had some issue trying to size my input element and the button underneath but after giving each a fixed width and max-width, I was able to achieve my desired outcome.

    What specific areas of your project would you like help with?

    Any suggestions on how to scale the site to fit screen size regardless of the screen widths will be very much appreciated.

    Flyo Landing Page Using CSS

    1
    AndreiT•20
    @AndreiTihPosted 6 months ago

    Great job!

    Looking at the solution it seems you've lost control of the layout betwen 650px and 1000px.

    I recommend sequencing your media queries such that you make sure every interval is styled.

    What's common is to go either mobile first or desktop first. That literally means: what are your intial styles (so without any media queries) designed for?

    Then from that starting point you go the opposite direction and you style incrementally lower. That way you make sure to cover all ground.

    You went desktop first so you would want to style incrementally lower. Using your breakpoints in your case you'd start with

    @media (min-width:1000px)
{
...
}

    then go into

    @media (min-width:650px)
{
...
}

    then finally go into

    @media (min-width:375px)
{
...
}

    You don't have to choose these breakpoints, this is just an example.

    This way the interval between 650px and 1000px is also styled.

    This is just a way to keep the code organized and make sure everything is styled, there's no hard rule that says you have to do things this way, as long as every interval is styled the page will look good.

    Good work! keep up the grind!

    0
  • Arthur Resende•50
    @ArthurResendeCSubmitted 9 months ago

    I don't know how to make stuff smaller.

    That's basically my main issue here, I think the current result is ok, but I have no idea on how to improve it or where are the mistakes on it.

    If anyone could point what is wrong, right, and what I should try to study from now on I'd be really grateful!

    Working exercise but I need help.

    2
    AndreiT•20
    @AndreiTihPosted 9 months ago

    I think it looks great. You could add a top margin so the component is a bit lower just like the design, otherwise it's very similar as far as I can tell.

    When you say "stuff" what do you mean? What do you want to make smaller but can't?

    2
  • AndreiT•20
    @AndreiTihPosted 9 months ago

    I'm no expert either but I follow Chris Ferdinandi's newsletter and he recently dropped a short blog post on how he tackles his CSS: "https://gomakethings.com/hug-css-how-i-approach-css-architecture/"

    0
  • AndreiT•20
    @AndreiTihPosted 9 months ago

    Great job! There's many things you could do to get closer to the design. 2 easy ones are:

    1. You could include the box-shadow property on the outer container to better match the design.
    2. Right now there's a gap between the result box and the summary box. You could make them touch by making the outer container just small enough to contain both of them. Try using width: fit-content in the .container class instead of width:100%. You would then need to adjust the width of each child to better match the design.
    0