TheOdinProject/css-exercises

flex/06-flex-layout: Improvement to mobile layout in solution

Closed this issue · 7 comments

jwsoh07 commented

Complete the following REQUIRED checkboxes:

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this issue follows the location for request: brief description of request format, e.g. Foundations exercises: Add exercise for XYZ

The following checkbox is OPTIONAL:

  • I would like to be assigned this issue to work on it

1. Description of the Feature Request:

I would like to make things a little prettier in mobile view with a few lines of code change.
Current predefined CSS in solution.css (before solution portion) will yield a UI like this.

image

After CSS changes:

image

2. Acceptance Criteria:

CouchofTomato commented

@TheOdinProject/html-css

Can someone take a look please

codyloyd commented

@jwsoh07 it depends greatly on what your changes are. Can you share what you're proposing?

  • 👍1
jwsoh07 commented

@codyloyd hey again!

I only wanted to change 2 things.

  1. The logo image to resize smaller in mobile view.
  2. The text / search field to resize smaller in mobile view.

If you compare the 2 images above, you can see the size of the 2 mentioned items smaller in the 2nd image which looks a tad prettier.

codyloyd commented

We don't want to introduce media queries yet.. so I don't think we should worry about that on this one.

jwsoh07 commented

I actually did it using a min-width property like so (in the image).

image
codyloyd commented

I still think this is too advanced for students at this point.. almost none of them will come up with it on their own, and then they will be frustrated when they see it in the solution.

  • 👍1
jwsoh07 commented

@codyloyd okay, I got you. We can close this 🙂