Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive site using flexbox with css and html

@heytulsiprasad

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used just flexbox for this page to make the desktop first version, later in mobile devices the image came to the top of the page when flex direction was changed. So used positioning absolute to make some space below the logo and put the image there. I am curious if this is a correct way of designing the webpage? Also, I have made efforts to make it fully responsive, any comments please hit me up.

Community feedback

@shubhamthedev

Posted

Hi, if you're using flex-box for this project then i don't think there is any other way to position logo on top other than to use position:absolute. The site is responsive although i have some suggestions for you:

  • You should fix all the accessibility issues by providing a label for input and name attribute for button element.

  • The site is responsive on tablet devices although the image is very stretched and doesn't look good.

  • You forgot to add the background to the site.

Hope this helps and keep coding 👨‍💻

1

@heytulsiprasad

Posted

@tomboynotes Thanks for suggestions! However, I'm afraid there wasn't any background image in the starter files. And I'll fix these accessibility issues soon, as I'm new to this I didn't know how they worked.

1

@shubhamthedev

Posted

@tulsi-prasad maybe the background image wasn't there in your files but it's named bg-pattern-desktop.svg. You can find it in my repo.

0

@TechSaq

Posted

Great work! You need to take look at font sizing. Email input is overlapping with the content on the full screen.

0

@heytulsiprasad

Posted

@TechSaq Thanks for reviewing. It would be great if you can share a screenshot of the issue, coz it seems fine to me.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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