tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some tweaking of responsiveness

This commit is contained in:
Robert McGovern 2022-10-24 15:30:01 +01:00
parent 7c09f64baa
commit db2c8e2433
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
projects/FrontendMentor/newbie/meet-landing-page/css/style.css
View File

@ -135,8 +135,7 @@ body {
font-size: var(--fs-main-page-body); font-size: var(--fs-main-page-body);
line-height: var(--lh-main-page-body); line-height: var(--lh-main-page-body);
font-weight: var(--fw-main-page-body); font-weight: var(--fw-main-page-body);
width: 30ch; margin-inline: 1.5rem;
margin-inline: auto;
} }
.btn-block { .btn-block {
@ -259,21 +258,17 @@ body {
.secondary-header { .secondary-header {
margin-top: 1.5rem; margin-top: 1.5rem;
margin-inline: auto; margin-inline: 24px;
color: var(--col-headers); color: var(--col-headers);
font-size: var(--fs-second-heading); font-size: var(--fs-second-heading);
line-height: var(--lh-second-heading); line-height: var(--lh-second-heading);
font-weight: var(--fw-second-heading); font-weight: var(--fw-second-heading);
width: 14ch;
} }
.secondary-body { .secondary-body {
margin-top: 2rem; margin-top: 2rem;
margin-inline: auto; margin-inline: 24px;
width: 30ch;
color: var(--col-body); color: var(--col-body);
font-size: var(--fs-main-page-body); font-size: var(--fs-main-page-body);
@ -314,6 +309,19 @@ body {
margin-top: 2rem; margin-top: 2rem;
} }
@media screen and (min-width: 450px) {
.primary-section__body,
.secondary-body {
width: 30ch;
margin-inline: auto;
}
.secondary-header {
width: 14ch;
margin-inline: auto;
}
}
@media screen and (min-width: 48rem) { @media screen and (min-width: 48rem) {
/* 768px */ /* 768px */
:root { :root {
@ -353,6 +361,7 @@ body {
.primary-section__body { .primary-section__body {
width: 40ch; width: 40ch;
margin-inline: auto;
} }
.btn-info { .btn-info {
@ -399,7 +408,7 @@ body {
.footer__header { .footer__header {
/* margin-top: 4rem; */ /* margin-top: 4rem; */
width: 15ch; width: 14ch;
} }
.footer__body { .footer__body {
@ -439,6 +448,7 @@ body {
margin-top: 60px; margin-top: 60px;
display: flex; display: flex;
gap: 115px; gap: 115px;
justify-content: center;
} }
.hero-img { .hero-img {
@ -500,7 +510,7 @@ body {
.footer { .footer {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
gap: 4.6875rem; gap: 5.5rem;
text-align: left; text-align: left;
padding: 116px 0 104px 0; padding: 116px 0 104px 0;