Skip to content
Snippets Groups Projects
Commit a992bbee authored by AB0410's avatar AB0410
Browse files

contact page scaling fix final

parent cb3aa853
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Lopputyö/contact.css
+ 95
− 0
View file @ a992bbee
......@@ -102,6 +102,101 @@
height: 56px;
}
@media only screen and (max-width: 810px) {
.contact {
padding: 0 !important;
}
.contact h1 {
font-size: 11vw !important;
margin: 0;
}
.contact form {
width: 90% !important;
margin: 17vw 0 0 0;
}
.contact .input-wrapper {
display: grid;
margin: 0;
justify-content: inherit;
}
.contact .input-wrapper .input-group {
margin-top: 5vw;
width: 100%;
}
.contact .input-wrapper .input-group label {
font-size: calc(25px + 0.390625vw);
}
.contact .input-wrapper .input-group input,
.contact .input-wrapper .input-group textarea {
width: 100%;
padding: 5px;
border: none;
border-bottom: 1px solid #414141;
resize: none;
font-size: calc(16px + 0.390625vw);
}
.contact .input-wrapper .input-group input:focus, .contact .input-wrapper .input-group textarea:focus {
outline: none;
}
.contact .input-wrapper-1 {
display: flex;
justify-content: center;
margin-top: 50px;
width: 100%;
max-width: 960px;
}
.contact .input-wrapper-1 .input-group-1 {
width: 100%;
max-width: 960px;
}
.contact .input-wrapper-1 .input-group-1 label {
font-size: calc(25px + 0.390625vw);
}
.contact .input-wrapper-1 .input-group-1 input,
.contact .input-wrapper-1 .input-group-1 textarea {
width: 100%;
max-width: 960px;
padding: 5px;
border: none;
border-bottom: 1px solid #414141;
resize: none;
font-size: calc(16px + 0.390625vw);
}
.contact .input-wrapper-1 .input-group-1 input:focus, .contact .input-wrapper-1 .input-group-1 textarea:focus {
outline: none;
}
.contact .input-wrapper-submit button[type=submit] {
margin-top: 5%;
background-color: #e6b294;
color: #f8f8f8;
border: none;
padding: 10px 20px;
border-radius: 12px;
font-size: calc(15px + 0.390625vw);
transition: ease-in-out 0.2s;
}
.contact .input-wrapper-submit button[type=submit]:hover {
transform: scale(1.05);
transition: ease-in-out 0.2s;
color: #414141;
}
.contact .input-wrapper-submit .ig, .contact .input-wrapper-submit .fb, .contact .input-wrapper-submit .gh {
margin-left: 10px;
width: 60px;
height: auto;
margin-top: 5%;
transition: ease-in-out 0.2s;
border-radius: 12px;
}
.contact .input-wrapper-submit .ig:hover, .contact .input-wrapper-submit .fb:hover, .contact .input-wrapper-submit .gh:hover {
transform: scale(1.05);
transition: ease-in-out 0.2s;
}
.contact .input-wrapper-submit img {
width: 45px;
height: 45px;
}
}
@media only screen and (max-width: 400px) {
.contact {
padding: 0 !important;
......
Lopputyö/contact.scss
+ 94
− 1
View file @ a992bbee
......@@ -108,7 +108,100 @@
}
@media only screen and (max-width: 810px) {
// none
.contact{
padding: 0 !important;
h1{
font-size: 11vw !important;
margin: 0;
}
form{
width: 90% !important;
margin: 17vw 0 0 0;
}
.input-wrapper {
display: grid;
margin: 0;
justify-content: inherit;
.input-group {
margin-top: 5vw;
width: 100%;
label {
font-size: calc(25px + 0.390625vw);
}
input,
textarea {
width: 100%;
padding: 5px;
border: none;
border-bottom: 1px solid $line;
resize: none;
font-size: calc(16px + 0.390625vw);
}& input:focus, textarea:focus{
outline: none;
}
}
}
.input-wrapper-1 {
display: flex;
justify-content: center;
margin-top: 50px;
width: 100%;
max-width: 960px;
.input-group-1 {
width: 100%;
max-width: 960px;
label {
font-size: calc(25px + 0.390625vw);
}
input,
textarea {
width: 100%;
max-width: 960px;
padding: 5px;
border: none;
border-bottom: 1px solid $line;
resize: none;
font-size: calc(16px + 0.390625vw);
}
& input:focus, textarea:focus{
outline: none;
}
}
}
.input-wrapper-submit{
button[type="submit"] {
margin-top: 5%;
background-color: $ctbutton;
color: $fontlight;
border: none;
padding: 10px 20px;
border-radius: 12px;
font-size: calc(15px + 0.390625vw);
transition: ease-in-out 0.2s;
&:hover {
transform: scale(1.05);
transition: ease-in-out 0.2s;
color: $font;
}
}
.ig,.fb,.gh{
margin-left: 10px;
width: 60px;
height: auto;
margin-top: 5%;
transition: ease-in-out 0.2s;
border-radius: 12px;
}
& .ig:hover,.fb:hover,.gh:hover{
transform: scale(1.05);
transition: ease-in-out 0.2s;
}
img{
width: 45px;
height: 45px;
}
}
}
}
@media only screen and (max-width: 400px) {
......
Lopputyö/style.css
+ 95
− 0
View file @ a992bbee
......@@ -384,6 +384,101 @@ section {
height: 56px;
}
@media only screen and (max-width: 810px) {
.contact {
padding: 0 !important;
}
.contact h1 {
font-size: 11vw !important;
margin: 0;
}
.contact form {
width: 90% !important;
margin: 17vw 0 0 0;
}
.contact .input-wrapper {
display: grid;
margin: 0;
justify-content: inherit;
}
.contact .input-wrapper .input-group {
margin-top: 5vw;
width: 100%;
}
.contact .input-wrapper .input-group label {
font-size: calc(25px + 0.390625vw);
}
.contact .input-wrapper .input-group input,
.contact .input-wrapper .input-group textarea {
width: 100%;
padding: 5px;
border: none;
border-bottom: 1px solid #414141;
resize: none;
font-size: calc(16px + 0.390625vw);
}
.contact .input-wrapper .input-group input:focus, .contact .input-wrapper .input-group textarea:focus {
outline: none;
}
.contact .input-wrapper-1 {
display: flex;
justify-content: center;
margin-top: 50px;
width: 100%;
max-width: 960px;
}
.contact .input-wrapper-1 .input-group-1 {
width: 100%;
max-width: 960px;
}
.contact .input-wrapper-1 .input-group-1 label {
font-size: calc(25px + 0.390625vw);
}
.contact .input-wrapper-1 .input-group-1 input,
.contact .input-wrapper-1 .input-group-1 textarea {
width: 100%;
max-width: 960px;
padding: 5px;
border: none;
border-bottom: 1px solid #414141;
resize: none;
font-size: calc(16px + 0.390625vw);
}
.contact .input-wrapper-1 .input-group-1 input:focus, .contact .input-wrapper-1 .input-group-1 textarea:focus {
outline: none;
}
.contact .input-wrapper-submit button[type=submit] {
margin-top: 5%;
background-color: #e6b294;
color: #f8f8f8;
border: none;
padding: 10px 20px;
border-radius: 12px;
font-size: calc(15px + 0.390625vw);
transition: ease-in-out 0.2s;
}
.contact .input-wrapper-submit button[type=submit]:hover {
transform: scale(1.05);
transition: ease-in-out 0.2s;
color: #414141;
}
.contact .input-wrapper-submit .ig, .contact .input-wrapper-submit .fb, .contact .input-wrapper-submit .gh {
margin-left: 10px;
width: 60px;
height: auto;
margin-top: 5%;
transition: ease-in-out 0.2s;
border-radius: 12px;
}
.contact .input-wrapper-submit .ig:hover, .contact .input-wrapper-submit .fb:hover, .contact .input-wrapper-submit .gh:hover {
transform: scale(1.05);
transition: ease-in-out 0.2s;
}
.contact .input-wrapper-submit img {
width: 45px;
height: 45px;
}
}
@media only screen and (max-width: 400px) {
.contact {
padding: 0 !important;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment