maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Unify page width when page should match to footer

Browse source
This commit is contained in:
Jenni Nurmi 2019-02-01 10:14:34 +02:00 • committed by Vesa Luusua
parent a3239dd1da
commit aae6380559
4 changed files with 45 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Footer/Footer.css
View file

@ -10,7 +10,7 @@
background-color: var(--matterColorBright);
@media (--viewportMedium) {
padding: 0 30px 33px 30px;
padding: 0 24px 33px 24px;
}
@media (--viewportLarge) {
@ -41,12 +41,17 @@
width: 100%;
@media (--viewportMedium) {
max-width: 1056px;
margin: 0 auto;
}
@media (--viewportLarge) {
padding: 0 24px;
max-width: 1128px;
padding: 0 36px;
}
@media (--viewportXLarge) {
max-width: 1056px;
padding: 0;
}
}
@ -96,6 +101,14 @@
order: 1;
margin-right: 12px;
}
@media (--viewportLarge) {
flex-basis: 240px;
margin-right: 57px;
}
@media (--viewportLargeWithPaddings) {
flex-basis: 250px;
margin-right: 12px;
}
}
.logoLink {
@ -221,6 +234,9 @@
flex-direction: column;
margin-right: 12px;
}
@media (--viewportLarge) {
margin-right: 0;
}
}
.legalMatters {

9
src/components/TransactionPanel/TransactionPanel.css
View file

@ -11,9 +11,14 @@
@media (--viewportLarge) {
flex-direction: row;
max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
max-width: 1128px;
margin: 0 auto 57px auto;
padding: 0 48px;
padding: 0 36px;
}
@media (--viewportXLarge) {
max-width: 1056px;
padding: 0;
}
}

12
src/containers/LandingPage/LandingPage.css
View file

@ -85,13 +85,19 @@
margin: var(--LandingPage_sectionMarginTop) 24px 51px 24px;
@media (--viewportMedium) {
margin: var(--LandingPage_sectionMarginTopMedium) 7.5vw 60px 7.5vw;
max-width: 100%;
margin: var(--LandingPage_sectionMarginTopMedium) 24px 60px 24px;
}
@media (--viewportLarge) {
max-width: calc(1052px + 36px + 36px);
margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto;
max-width: 1128px;
padding: 0 36px 0 36px;
margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto;
}
@media (--viewportXLarge) {
max-width: 1056px;
padding: 0;
}
}

13
src/containers/ListingPage/ListingPage.css
View file

@ -191,16 +191,23 @@
.contentContainer {
@media (--viewportMedium) {
max-width: 1280px;
max-width: 1056px;
margin: 0 auto;
padding: 0 60px;
padding: 0 24px;
display: flex;
position: relative;
}
@media (--viewportLarge) {
max-width: 1128px;
padding: 0 36px;
margin: 0 auto 117px;
}
@media (--viewportXLarge) {
max-width: 1056px;
padding: 0;
}
}
.mainContent {
@ -219,6 +226,7 @@
/* contentContainer's full width - (bookingColumn + two paddings + margin + border) */
flex-basis: calc(100% - 493px);
flex-shrink: 0;
flex-grow: 1;
}
}
@ -232,7 +240,6 @@
border-left-color: var(--matterColorNegative);
padding-left: 60px;
padding-right: 60px;
/* The calendar needs 312px */
flex-basis: 312px;