Fixes for logo, header wrappers

This commit is contained in:
Benjamin Beganović 2021-05-18 13:14:09 +02:00
parent 1eaecdd8c6
commit d04b48f7d2
9 changed files with 31 additions and 27 deletions

View File

@ -26,6 +26,7 @@
.header-wrapper {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 20px;
background-color: #2d2c2a;
padding: 3rem;
color: white;
@ -33,7 +34,7 @@
}
.company-logo {
height: 6rem;
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
#company-details,

View File

@ -28,12 +28,12 @@
grid-gap: 20px;
}
.header-container > span {
display: block;
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.company-logo {
height: 4rem;
.header-container > span {
display: block;
}
#company-details {

View File

@ -28,8 +28,8 @@
gap: 20px;
}
.header-container .company-logo {
height: 4rem;
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
#company-details {
@ -47,8 +47,8 @@
}
.entity-label {
margin-top: 1rem;
text-transform: uppercase;
margin-top: 3.5rem;
padding-left: 1rem;
margin-bottom: 1rem;
font-weight: bold;

View File

@ -28,8 +28,8 @@
gap: 20px;
}
.header-wrapper .company-logo {
height: 5rem;
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.header-wrapper #client-details,

View File

@ -22,6 +22,10 @@
padding: 0;
}
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.company-logo-wrapper {
display: flex;
flex-direction: row;
@ -30,7 +34,7 @@
border-bottom: 4px solid;
}
.company-logo-wrapper .company-logo {
.company-logo-wrapper {
height: 5rem;
}

View File

@ -66,13 +66,12 @@
margin-top: 0.8rem;
}
.header-right-side-wrapper-right {
display: flex;
.header-wrapper {
margin-left: auto;
}
.header-wrapper .company-logo {
height: 5rem;
margin-left: auto;
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.entity-label {

View File

@ -54,16 +54,16 @@
padding-bottom: 0.5rem;
}
.company-logo {
height: 5rem;
}
.logo-client-wrapper {
margin: 3rem 2rem;
display: grid;
grid-template-columns: 1.5fr 1fr;
}
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
#client-details {
display: flex;
flex-direction: column;

View File

@ -27,8 +27,8 @@
grid-template-columns: 1fr 1fr 1fr;
}
.header-wrapper .company-logo {
height: 5rem;
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.header-wrapper #company-address {

View File

@ -25,14 +25,10 @@
.header-wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 0.5fr 2fr;
padding: 2rem 3rem;
}
.header-wrapper .company-logo {
height: 5rem;
}
.header-wrapper .entity-details-wrapper {
background-color: var(--primary-color);
padding: 1rem;
@ -50,6 +46,10 @@
font-weight: normal;
}
.company-logo {
width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
}
.contacts-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;