Skip to content
Submitted 6 months ago

Responsive coming soon page

Megan May•170
@mooogz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Pretty proud of this one although I know my media queries are all over the place. Styling the submit button gave me some trouble but I learned a lot! The JavaScript was actually one of the easiest parts for me so it showed me how much I've learned so far.

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

I notice when I resize the window to be smaller the Base Apparel logo overlaps the other text. Any suggestions would be welcome. I'm sure there are errors in my code, especially with the media queries and maybe even the way I organized the items in my HTML.

I'm trying to get better at mobile-first workflow and media queries. I work on a pretty large screen and use chrome inspector to test other screen sizes, but does anyone have any tips? I find that once it looks great at smartphone sizes and 1440px+ I have a lot of trouble figuring out the smaller sizes like tablet and smaller laptops.

Community feedback

  • Roraima Lugo González•510
    @roraima1986Posted 6 months ago

    In the container where you have the logo set display: block;

    .logo-container {
    display: block;
    align-self: flex-start;
}

    I think this can help you so that the text does not overlap in the logo

    1
    Megan May•170
    @mooogzPosted 6 months ago

    @roraima1986 Thanks! I will definitely try this when I go to refactor my code :)

    0
  • denise•270
    @moncadadPosted 6 months ago

    Hello Megan you did a good job! Not sure if you've come across Kevin Powell on Youtube he's great at explaining CSS. He has a few playlist on responsiveness, it's helped me a lot hopefully you find him as helpful as well :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord