Let’s start with responsive for the smallest screens (575px).
- links inside
.apps-buttonsmust be placed in a column; - links inside
.apps-buttonsmust not have a left margin; - links inside
.apps-buttonsfor.join-sectionmust be centered (use margin); .columns-viewmust have one column for a comment;- maximum width of
.section-image imgmust be80vw; .description-section .contentmust not have a top margin;.header-btnmust be hidden;
Let’s move on to the bigger ones (768px):
- font size
.content h1must be34px; - line height
.content h1must be40px;
For screens up to 992px:
- line height
.content h1must be46px; - font size
.content h1must be40px;
For screens up to 1200px:
- line height
.content h1must be60px; - font size
.content h1must be70px;
This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.