Responsive design

[bhflm]

Summary

Added responsive style @ index.html for mobile view.

Screenshots

Mobile:

Default:

Trello Card

https://trello.com/c/5zaWJ1dG/14-dise%C3%B1o-responsive

[Dorian30]

You don't need to set a height for your containers, you can let the inner content set this for you.

[Dorian30]

You have margin: 60px auto; set in this class. You shouldn't use margin top in this case to separate this element from the redirect arrow. It's better to set margin-bottom in the arrow itself as margin-bottom: 60px;

[Dorian30]

As mentioned above, the redirect arrow should have margin: 0 0 60px 100px; instead of setting margin: 60px auto; in your book-container class. Then set margin: 0; here in the media query.

[Dorian30]

Remember the alphabetical order.

[Dorian30]

Same, you should only use margin-bottom: 30px; to separate one element from another and padding for positioning inner elements. The auto part is not need since you are already centering your content with align-items: center;

[Dorian30]

The following properties are already set outside the media query:

content: '';
background: url('./assets/book-badge.png') no-repeat center/contain;
left: 220px;
position: absolute;
transform: rotate(15deg);

Don't re write them unless you're going to override them for other value

[Dorian30]

Use padding instead to separate an inner element from its parent. Use margins only to separate siblings

[Dorian30]

Be careful with these things. You are separating the title from the content through the title's margin bottom and it should the parent book-title-container the one doing that.

[Dorian30]

Same comment. This element has top and bottom margins. Set them to 0 outside this media query and use the title container to set the margin bottom to separate the title from the content

[damfinkel]

remove empty line

[Dorian30]

You are using a shorthand. This should be

Suggested change

	margin-left: 0 0 60px 100px;
	margin: 0 0 60px 100px;