Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:implement responsive learn-more section #34

Merged
merged 3 commits into from
Jul 4, 2020
Merged

feat:implement responsive learn-more section #34

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
419e797
feat:implement responsive addition-info section
mm1123452 Jul 2, 2020
10ae255
hotfix: correct sizing and updates
mm1123452 Jul 3, 2020
7feb291
merge branch develop
mm1123452 Jul 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions blocks/additional-info/__link/additional-info__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
line-height: 19px;
}

@media only screen and (max-width: 320px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have where to write it but, the additional title in 320px screen is 28px and should be 20px.
Also, why in additional info the title block is unique to additional info? why not use content title?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switched

.additional-info__link {
font-size: 14px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should specify font-weight everywhere. font-weight 500 looks different the the normal one.

line-height: 22px;
}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need the and (max-width: ... ) in my opinion

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know

.additional-info__link {
font-size: 24px;
Expand Down
6 changes: 3 additions & 3 deletions blocks/additional-info/__list-item/additional-info__list-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.additional-info__list-item {
margin-bottom: 20px;
margin-bottom: 16px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should add "last-of-type", you have extra margin on the second list item

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin bottom should be 18px for 320px

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

display: flex;
justify-content: space-between;
}

@media only screen and (min-width: 769px) {
@media only screen and (min-width: 425px) and (max-width: 768px) {
.additional-info__list-item {
margin-bottom: 16px;
margin-bottom: 20px;
}
}
6 changes: 6 additions & 0 deletions blocks/additional-info/__list/additional-info__list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
padding: 0;
}

@media only screen and (max-width: 320px) {
.additional-info__list {
margin: 36px 0 0 0;
}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.additional-info__list {
margin: 40px 0 0 0;
Expand Down
1 change: 1 addition & 0 deletions blocks/additional-info/__subtitle/additional-info__subtitle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@
.additional-info__subtitle {
font-size: 18px;
line-height: 18px;
margin: 22px 0 0;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In 320px screen the size of the subtitle is 12px

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switched to content_subtitle

}
}
19 changes: 17 additions & 2 deletions blocks/additional-info/additional-info.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,31 @@
padding-bottom: 40px;
}

@media only screen and (max-width: 320px) {
.additional-info {
margin: 50px 16px 0;
padding-bottom: 30px;
}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.additional-info {
margin-top: 84px;
margin: 84px 40px 0;
padding-bottom: 50px;
}
}

@media only screen and (min-width: 1025px) {
.additional-info {
margin-top: 100px;
padding-bottom: 60px;
max-width: 1200px;
margin: 100px 40px 0;
}
}

@media only screen and (min-width: 1280px) {
.additional-info {
margin: 100px auto 0;
}
}

8 changes: 8 additions & 0 deletions blocks/arrow-icon/arrow-icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,11 @@
.arrow-icon:hover {
background: url("./yellow-arrow.png") center center no-repeat;
}

@media only screen and (max-width: 320px) {
.arrow-icon {
font-size: 14px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon of the arrow is aligned to the upper row of the link and not the lower row

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

width: 26px;
height: 22px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The arrow is too big compared to the figma design

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

}
}