Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
1

Kitty10206

@Kitty10206100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Social proof using CSS columns


    Kitty10206•100
    Submitted almost 3 years ago

    1 comment
  • Huddle landing page with columns


    Kitty10206•100
    Submitted almost 3 years ago

    1 comment
  • NFT card with floats and fading in with :hover


    Kitty10206•100
    Submitted almost 3 years ago

    1 comment
  • Clipboard landing page using grids


    Kitty10206•100
    Submitted almost 3 years ago

    0 comments
  • Testimonials with working @media query via CSS grids


    Kitty10206•100
    Submitted almost 3 years ago

    1 comment
  • Four card feature section, featuring CSS grid and flexbox combo


    Kitty10206•100
    Submitted almost 3 years ago

    1 comment

Latest comments

  • Jaybae•20
    @Jenny3094
    Submitted almost 3 years ago

    Responsive Landing page using CSS Flexbox

    #accessibility#bem#bootstrap#less
    1
    Kitty10206•100
    @Kitty10206
    Posted almost 3 years ago

    Hi Jaybae!

    I just had a quick look at your CSS and it looks like you did the same thing I did before. Your media queries are only covering 0 to 375px and 1440px+. I know it says in the challenge that the examples are 375px for mobile and 1440px for desktop. You started by setting up the mobile-layout, right? This means you already coded for the max-width of 375px, and you don't actually need a media query for this. Then you have to decide at what width the desktop design starts, and set up a media query for this. For example, a min-width of 700px (definitely experiment, some designs work better in higher widths than others). Then, every screen bigger than that would see your desktop design. You don't necessarily have to set both and min- and a max-width unless you also want a special tablet version. But if you put a media query at about 700px, it will make your transition work.

    Your media queries: @media screen and (min-width: 1440px) @media screen and (max-width: 375px)

    An example that might work (you would put this query where your current desktop query is): @media screen and (min-width: 700px)

    I hope this helps! Kitty :)

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub