TIY-LR-FEE-2015-June / assignments

0 stars 3 forks source link

2.1-beer-layout- Alia Borroho #49

Open aliaborroho opened 9 years ago

aliaborroho commented 9 years ago

To-do List for 2.1-beer-layout

[x] A repo containing at least:
[x] main.css
[x] index.html
[x] Normal Mode

Normal Mode description

[ ] Create semantic markup that logical groups the content required for the page
[ ] Show a three wide grid on desktop screens
[ ] Show a list view layout on tablet screens < 1024px
[ ] Show a one wide grid layout on phone screens < 460px

aliaborroho commented 9 years ago

It's getting pretty late, I believe I am at a stopping point. It is formatted better than I expected and it is responsive to both 480, and 1068. :-)

rtablada commented 9 years ago

Todos

[x] Link to Pull Request
[ ] I am not seeing any responsive layout: site should change from grid mode to list mode between 480px to 1024px screens
[ ] Style text and buttons

Right now your grid breaks if the text is too long on the description. Try different content to verify that styles are working properly. So far the only thing I am seeing is basic floats and centered text.

aliaborroho commented 9 years ago

pr: https://github.com/aliaborroho/2.1-beer-layout-Alia-Borroho/pull/1

rtablada commented 9 years ago

@aliaborroho

Notes

when you are working with grids, you should be setting the width of each grid piece. Right now the grid piece would be your .float-beer selector.

For thirds, you would make this something like width: 33%.

Todos

[ ] Fix grid on desktop size (set the width of .float-beer)
[ ] On tablets, your description text makes your sale button drop down to a new line below the beer image. Try using display: inline-block and setting the max-width in percentages for this layout
[ ] Change tablet media query (look at in code note)