Working on navbar and grid responsiveness - html

I can't seem to solve what was previously not a problem:
My navbar is fullwidth and mobile-y even above the breaking point
My grid boxes are not responsive on mobile even though I have set it to 1fr column and (6, fr) row.
https://codepen.io/arian-wardak/pen/QWKyzdj
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Services - Quantum Marketing</title>
<link rel="stylesheet" type="text/css" href="css/quantum.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<nav>
<ul>
<li>Home</li>
<li><a class="active" href="services.html">Services</a></li>
<li>Contact</li>
<li>Account</li>
<li>Cite</li>
</ul>
</nav>
<div class="grid-services">
<div class="grid-item item-1">
<img src=img/coding.png alt="Coding Icon" width="64" height="51">
<h4>Web Development</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-2">
<img src=img/search.png alt="Search Icon with a Dollar Sign" width="64" height="64">
<h4>Search Engine Optimization</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-3">
<img src=img/copywriting.png alt="Notepad and Pencil Icon" width=64 height=57>
<h4>Copywriting</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-4">
<img src=img/email.png alt="Email Icon" width=64 height=64>
<h4>Email Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-5">
<img src=img/social.png alt="Social Media Icon" width=64 height=45>
<h4>Social Media Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-6">
<img src=img/retargeting.png alt="Bullseye Icon" width=64 height=64>
<h4>Retargeting</h4>
<div class="button">Choose</div>
</div>
</div>
</main>
<footer>
Copyright © 2020 Ariana Wardak. All Rights Reserved. | Privacy Policy Disclaimer | Designed by Ariana
</footer>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
font-family: 'Montserrat', sans-serif;
padding: 0;
outline: none;
}
body {
background-color: dimgray;
color: black;
}
main {
grid-area: main;
text-align:center;
overflow: hidden;
white-space: normal;
}
h1 {
padding: 20px;
color: white;
text-align: center;
}
h3 {
color: white;
text-align: center;
}
h4 {
padding: 30px;
color: white;
text-align: center;
}
.content {
margin: 0;
padding: 0;
background-color: white;
color: black;
}
.content img {
height: auto;
padding-right: 20px;
margin: 0;
}
nav {
overflow: hidden;
background-color: deepskyblue;
font-size: smaller;
}
ul {
display:block;
text-decoration: none;
text-align: center;
list-style: none;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 15px;
}
li a:hover {
background-color: deepskyblue;
}
li a.active {
background-color: navy;
}
.hero {
text-align: center;
background-color: navy;
padding: 200px 0;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px 300px;
padding: 20px;
height: 100vh;
grid-gap: 20px;
}
.grid-item {
background-color: navy;
padding: 20px;
}
button,
.button,
.button-services,
.button-contact {
background-color: deepskyblue;
display: inline-block;
padding:10px 25px;
margin: 15px 20px;
font-weight: bold;
border-radius: 5px;
color: white;
text-decoration: none;
}
button:hover,
.button:hover,
.button-services:hover,
.button-contact:hover {
background-color: dimgray;
color: deepskyblue;
cursor: pointer;
transition: all 0.1s ease;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.contact {
max-width: 700px;
margin: auto;
}
.form {
max-width: 700px;
text-align: center;
margin: 20px auto;
display: grid;
grid-template-columns: 1fr 1em 2fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
}
input, label {
display: block;
}
textarea {
resize: vertical;
max-height: 300px;
}
.profile {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.profile h4 {
color: black;
}
.citations {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.wrapper{
position: relative;
width: 500px;
background-color: navy;
margin: auto;
}
.profile_card{
height: 400px;
background: navy;
padding: 50px 25px;
position: relative;
z-index: 1;
padding: 20px;
}
.profile_card{
color: #fff;
text-align: center;
}
.profile_card .profile_img img{
width: 80px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.profile_card .profile_img .name{
font-size: 24px;
font-weight: 500;
margin: 15px 0 5px;
}
.profile_card .profile_img .place{
font-size: 14px;
font-weight: 300;
}
.profile_card .place .icon{
margin-right: 10px;
}
.profile_icons{
display: flex;
margin: 30px 0;
justify-content: center;
}
.profile_icons .profile_item{
margin-right: 15px;
}
.profile_icons .profile_item:last-child{
margin-right: 0;
}
.profile_icons .icon,
.profile_icons .number{
font-size: 24px;
}
.profile_icons .title{
font-size: 12px;
text-transform: uppercase;
margin: 10px 0;
}
.profile_btn{
background-color: deepskyblue;
padding: 10px;
border-radius: 25px;
width: 200px;
margin: 0 auto;
color: white;
cursor: pointer;
}
.profile_btn:hover{
background: #ffc208;
}
.settings_btn{
width: 50px;
height: 52px;
position: absolute;
bottom: 20px;
left: 225px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.settings_btn{
right: 0;
box-shadow: inset 2px -2px 3px ##00bfff;
}
.settings_btn:hover{
padding: 2px;
background-color: dimgray;
}
.profile_slider{
width: 325px;
height: 400px;
background: #fff;
color: #7b7a82;
position: absolute;
top: 25px;
left: 0;
font-size: 14px;
transition: bottom 0.2s ease;
}
.profile_slider li{
height: 80px;
border-bottom: 1px solid #eceff4;
padding: 15px;
}
.profile_slider li:last-child{
border-bottom: 0;
}
.profile_slider li .slider_item,
.profile_slider li .slider_left{
display: flex;
}
.profile_slider li .slider_item{
justify-content: space-between;
align-items: center;
height: 100%;
}
.profile_slider img{
width: 35px;
border-radius: 50%;
margin-right: 10px;
}
.profile_slider .item{
text-align: left;
font-size: 12px;
}
.profile_slider .item_email{
font-weight: 300;
margin-top: 5px;
}
.profile_slider .btn{
width: 100px;
padding: 8px 10px;
border-radius: 25px;
cursor: pointer;
font-size: 12px;
text-align: center;
}
.profile_slider .btn.btn_following{
background: #6a60c3;
color: #fff;
}
.profile_slider .btn.btn_following:hover{
background: #8178d1;
}
.profile_slider .btn.btn_follow{
border: 1px solid #7b7a82;
}
.profile_slider .btn.btn_follow:hover{
color: #fff;
background: #7b7a82;
}
.profile_slider.active{
left: 100%;
}
.settings_btn.active{
background: #00bfff;
}
.settings_btn i{
transition: transform 0.2s ease;
}
.settings_btn.active i{
transform: rotate(360deg);
}
.citations h4 {
color: black;
}
footer {
margin-bottom: 120px;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
#media screen and (max-width: 400px) {
nav {
float: none;
}
}
ul {
float: none;
}
li {
float: none;
width: 100%;
padding: 0;
}
.hero {
text-align: center;
padding: 180px 20px;
}
.connect {
margin: 0;
background-color: white;
color: black;
}
.connect img {
padding: 50px;
}
.content {
padding: 20px 8px;
}
}
.grid-services {
grid-template-columns: 1fr;
height: auto;
grid-template-rows: repeat(6, 1fr);
height: auto;
}
.form {
display: flex;
flex-direction: row;
color: white;
}
.form label {
flex: none;
display: block;
width: 250px;
font-weight: bold;
font-size: 1em;
display: inline-block;
}
.form label.right-inline {
text-align: right;
padding-right: 8px;
padding-left: 10px;
width: 300px;
}
.form .input-control {
flex: 1 1 auto;
display: block;
margin-bottom: 10px;
margin-right: 8px;
padding: 4px;
margin-top: -4px;
}
footer {
grid-area: footer;
margin: 0;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}


You can use the Bootstrap class navbar; it already has breakpoints defined so you can have a presentable grid box at a small webpage size.

Related

Include animation on nav's drop downdown menu

I would like to implement an animation when the dropdown menu is triggered once clicked on the hamburger icon (only appears on mobile and tablet). By now it only appears and disappears when clicked, but I would like it to have a drop animation. Which would be the best way to do this avoiding js and just using css, if possible?
body {
background-color: #111111 !important;
font-family: 'Fredoka', sans-serif;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
}
footer {
background-color: #232323;
}
.cookie-container {
background-color: #232323;
color: #dad7d7;
}
.cookie-container a {
color: #dad7d7;
}
.cookie-container a:hover {
color: #ffffff;
}
html {
scroll-behavior: smooth;
}
main {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2vw;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
nav {
z-index: 1;
background-color: rgba(35, 35, 35, 0.9);
backdrop-filter: saturate(180%) blur(20px);
padding: 0 15px;
position: sticky;
top: 0;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
text-decoration: none;
cursor: default;
}
footer {
background-color: #232323;
}
.cookie-container {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: #363636;
color: #dad7d7;
text-align: center;
padding: 10px 32px;
transform: translateY(100%);
transition: transform 400ms ease-in-out;
}
.cookie-container.active {
transform: translateY(0);
}
.cookie-container p {
padding-top: 10px;
}
.cookie-container a {
text-decoration: none !important;
color: #dad7d7;
display: flex;
justify-content: center;
align-items: center;
}
.cookie-container a:hover {
color: #ffffff;
}
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 28%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 30%;
transition: 0.3s;
}
footer .btn svg {
transition: 0.3s;
}
.rsyoutube {
fill: #8b8d90;
}
.rsyoutube:hover {
fill: #ff0000;
}
.rstwitter {
fill: #8b8d90;
}
.rstwitter:hover {
fill: #00acee;
}
.rsinstagram {
fill: #8b8d90;
}
.rsinstagram:hover {
fill: #de1b85;
}
.rstelegram {
fill: #8b8d90;
}
.rstelegram:hover {
fill: #229ed9;
}
.rsdiscord {
fill: #8b8d90;
}
.rsdiscord:hover {
fill: #5865f2;
}
df-messenger {
--df-messenger-bot-message: #e1f2f7;
--df-messenger-button-titlebar-color: #add8e6;
--df-messenger-button-titlebar-font-color: #757575;
--df-messenger-chat-background-color: #232323;
--df-messenger-font-color: #232323;
--df-messenger-send-icon: #add8e6;
--df-messenger-user-message: #add8e6;
}
df-messenger:hover {
--df-messenger-button-titlebar-color: #a6daeb;
}
.content {
margin: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 53%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 57%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 2em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 1.5rem 0 1rem 0;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.toggle a {
color: #dad7d7;
}
.toggle a:hover {
color: #ffffff;
}
.menu,
.submenu {
list-style-type: none;
}
.logo {
padding: 7.5px 0 7.5px 0;
}
.botonlogo {
max-width: 56px;
}
.item {
padding: 10px;
}
.item.button {
padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
color: #ffffff;
transition: 0.3s;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
.menu li a {
display: block;
padding: 15px 5px;
}
.menu li.subitem a {
padding-right: -15px;
padding-left: 15px;
padding-top: 35px;
width: 100%;
}
.toggle {
order: 1;
font-size: 20px;
}
.item.button {
order: 2;
}
.item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.active .item {
display: block;
}
.button.secondary {
border-bottom: 1px solid #dad7d7;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu>a::after {
font-family: 'Font Awesome 5 Free';
font-size: 16px;
line-height: 16px;
content: '\f024';
color: #dad7d7;
padding-left: 11px;
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
border-radius: 0;
background-color: #363636;
width: 100%;
border-radius: 5px 5px 0px 0px;
}
li.has-submenu a {
color: #dad7d7 !important;
transition: 0.3s;
padding-bottom: 12px;
cursor: pointer;
}
li.has-submenu a:hover {
color: #ffffff !important;
transition: 0.3s;
cursor: pointer;
}
li.subitem a {
padding-left: 0%;
padding-right: 53px !important;
width: 100%;
}
/* Mediaqueries tablet */
#media all and (min-width: 700px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 13%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 18%;
transition: 0.3s;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7.1%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 34%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 38%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 5em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 5rem 0 1rem 0;
width: 90%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.menu {
justify-content: center;
width: 100%;
}
.logo {
flex: 1;
}
.item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
.menu li.button a {
padding: 10px 15px;
margin: 5px 0;
}
.button a {
background-color: #add8e6;
color: #232323;
border: 1.5px solid #add8e6;
border-radius: 4px 4px 4px 4px;
transition: 0.8s;
}
.button.secondary {
border: 0;
}
.button.secondary a {
background-color: #add8e6;
border: 1.5px solid #add8e6;
transition: 0.8s;
}
.button a:hover {
background-color: #a6daeb;
text-decoration: none;
color: #474747;
transition: 0.8s;
}
.button:not(.secondary) a:hover {
border: 1.5px solid #a6daeb;
transition: 0.8s;
}
}
/* Mediaqueries desktop */
#media all and (min-width: 960px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 10%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 11%;
transition: 0.3s;
}
.content {
margin: auto;
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
display: grid;
grid-template-columns: 2fr 1fr;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
padding-top: 10%;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(-315deg, transparent 45px, #212121 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 40%;
background: #add8e6;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
margin-bottom: 6%;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 44%;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(225deg, transparent 45px, #a7d1de 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 25%;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 2rem 0 1rem 0;
width: 86%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.item {
order: 1;
position: relative;
display: block;
width: auto;
}
.button {
order: 2;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background-color: #363636;
border-radius: 0px 0px 5px 5px;
}
.toggle {
display: none;
}
.boton {
background-color: #add8e6;
border: none;
color: #585858 !important;
}
.boton:hover {
background-color: #a6daeb;
border: none;
color: #585858 !important;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/favicon.ico" /><title>Mixi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-229317979-1');</script>
<script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<link rel="preload" href="css/index.css" as="style">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve"><path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z"/><g><g><g><path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z"/><path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z"/></g></g><g><path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z"/><path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z"/></g><g><g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z"/></g></g></g></svg></a></li>
<li class="item">Tienda</li>
<li class="item">Calculadora</li>
<li class="item">Noticias</li>
<li class="item">Contacto</li>
<li class="item has-submenu">
<a tabindex="0">Idioma: ES</a>
<ul class="submenu">
<li class="subitem">English</li>
</ul>
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
<script src="js/toggle.js"></script>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="js/utilidades.js"></script>
<footer class="text-center text-white">
<div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);">
<a class="botoncopyright">Mixi © | 2022</a>
</div>
</footer>
<script src="js/toggle.js"></script>
</body>
</html>

Have you tried to add transition to the nav?
If not try
Nav{transition:easy-in-out all 0.5s}

Why is the Flex text overlapping when Browser size is reduced?

If you reduce browser size, the text of "Discover" and "How it Works" overlap so that it looks like it says "Discover it works" "How".
How do I make it so that instead, the text of these Li items always stay separated? I tried doing flex: nowrap property but it had no effect.
Here is the codepen to show what I mean: https://codepen.io/hiarooo/pen/GRrzapM
Thanks for any help.
HTML
<header>
<div class="container">
<nav>
<div class="left-content">
<div class="header-user">
<img src="HOME/DoLogo.png" alt="logo" width="50px">
<p><span>Do</span></p>
</div>
<div class="header-tablet">
<div class="vl"></div>
<ul>
<li>Discover</li>
<li>How it works</li>
</ul>
</div>
</div>
<div class="right-content">
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search"></i>
</div>
<img id="notifications" src="HOME/Notification.svg" alt="Notification">
<div class="header-user">
<img src="HOME/uploadnav.png" alt="user">
</div>
<img class="mob" src="HOME/uploadnav.png" alt="user">
<img src="HOME/menu.svg" alt="hamburgermenu">
</div>
</nav>
</div>
</header>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 78%;
margin: 0 auto;
}
#media (max-width: 1330px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Header */
header {
height: 80px;
border: 1px solid #e6e8ec;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#notifications{
padding-right:20px;
}
.search {
display: inline;
height: 40px;
width: 256px;
border-radius: 8px;
padding: 10px 12px 10px 16px;
border: 2px solid #e6e8ec;
outline: none;
display: flex;
justify-content: space-between;
margin-right: 18px;
margin-left: 20px;
}
.search input {
outline: none;
border: none;
}
.search i {
color: #777e90;
}
.search:hover {
cursor: pointer;
}
.search input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.button {
background-color: #3772ff;
padding: 12px 16px;
border-radius: 90px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #fcfcfd;
text-decoration: none;
margin-left: 18px;
margin-right: 10px;
display: inline;
}
.header-user {
border-radius: 90px;
padding: 4px 12px 4px 4px;
border: 2px #e6e8ec solid;
width: 147px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.header-user p {
padding-left: 6px;
display: inline-block;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
}
.header-user span {
color: #45b26b;
padding-left: 2px;
}
.left-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.mob {
display: none;
}
.vl {
border-left: 2px #e6e8ec solid;
height: 40px;
margin: 0 32px;
}
.left-content ul {
list-style: none;
}
.left-content ul li {
display: inline;
}
.left-content ul li a {
text-decoration: none;
padding-right: 32px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #777e90;
}
.right-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.right-content img {
cursor: pointer;
}
.menu {
display: none;
}
.header-tablet {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.topFont{
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
}
.btn-1 {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
border: 2px solid #e6e8ec;
border-radius: 90px;
display: inline-block;
padding: 12px 16px;
margin-bottom: 0px;
}
.btn-1:hover {
background-color: #3772ff;
color: #fcfcfd;
/*border: none;*/
transition:all .2s ease;
-webkit-transition-delay:all .2s ease;
-moz-transition-delay:all .2s ease;
-ms-transition-delay:all .2s ease;
-o-transition-delay:all .2s ease;
}
/* input */
.round {
max-width: 100%;
height: 48px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border: 3px #f4f4f4 solid;
border-radius: 90px;
margin: 20px 0px;
}
.round i {
color: rgba(0, 0, 0, 0.3);
padding: 10px;
line-height: 80px;
}
.round input {
outline: none;
border: none;
padding-left: 16px;
}
.search-btn {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 12px;
}
.round input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.search-icon:hover {
cursor: pointer;
color: #3772ff;
}
#media (max-width: 1170px) {
.round {
width: 200px;
}
}
#media (max-width: 960px) {
.round {
width: 200px;
}
}
#media (max-width: 779px) {
.container {
width: 90%;
margin: 0 auto;
}
.header-tablet{
display:none;
}
.search {
display: none;
}
.menu {
display: inline;
}
.button {
display: none;
}
/* header user */
.header-user {
display: none;
}

Change this CSS setting:
.left-content ul li {
display: inline;
}
to
.left-content ul li {
display: inline-block;
}
That way the contents of that li element will form a (inline) block that can only wrap to a new line as a whole.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 78%;
margin: 0 auto;
}
#media (max-width: 1330px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Header */
header {
height: 80px;
border: 1px solid #e6e8ec;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#notifications {
padding-right: 20px;
}
.search {
display: inline;
height: 40px;
width: 256px;
border-radius: 8px;
padding: 10px 12px 10px 16px;
border: 2px solid #e6e8ec;
outline: none;
display: flex;
justify-content: space-between;
margin-right: 18px;
margin-left: 20px;
}
.search input {
outline: none;
border: none;
}
.search i {
color: #777e90;
}
.search:hover {
cursor: pointer;
}
.search input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.button {
background-color: #3772ff;
padding: 12px 16px;
border-radius: 90px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #fcfcfd;
text-decoration: none;
margin-left: 18px;
margin-right: 10px;
display: inline;
}
.header-user {
border-radius: 90px;
padding: 4px 12px 4px 4px;
border: 2px #e6e8ec solid;
width: 147px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.header-user p {
padding-left: 6px;
display: inline-block;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
}
.header-user span {
color: #45b26b;
padding-left: 2px;
}
.left-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.mob {
display: none;
}
.vl {
border-left: 2px #e6e8ec solid;
height: 40px;
margin: 0 32px;
}
.left-content ul {
list-style: none;
}
.left-content ul li {
display: inline-block;
}
.left-content ul li a {
text-decoration: none;
padding-right: 32px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #777e90;
}
.right-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.right-content img {
cursor: pointer;
}
.menu {
display: none;
}
.header-tablet {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.topFont {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
}
.btn-1 {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
border: 2px solid #e6e8ec;
border-radius: 90px;
display: inline-block;
padding: 12px 16px;
margin-bottom: 0px;
}
.btn-1:hover {
background-color: #3772ff;
color: #fcfcfd;
/*border: none;*/
transition: all .2s ease;
-webkit-transition-delay: all .2s ease;
-moz-transition-delay: all .2s ease;
-ms-transition-delay: all .2s ease;
-o-transition-delay: all .2s ease;
}
/* input */
.round {
max-width: 100%;
height: 48px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border: 3px #f4f4f4 solid;
border-radius: 90px;
margin: 20px 0px;
}
.round i {
color: rgba(0, 0, 0, 0.3);
padding: 10px;
line-height: 80px;
}
.round input {
outline: none;
border: none;
padding-left: 16px;
}
.search-btn {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 12px;
}
.round input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.search-icon:hover {
cursor: pointer;
color: #3772ff;
}
#media (max-width: 1170px) {
.round {
width: 200px;
}
}
#media (max-width: 960px) {
.round {
width: 200px;
}
}
#media (max-width: 779px) {
.container {
width: 90%;
margin: 0 auto;
}
.header-tablet {
display: none;
}
.search {
display: none;
}
.menu {
display: inline;
}
.button {
display: none;
}
/* header user */
.header-user {
display: none;
}
<header>
<div class="container">
<nav>
<div class="left-content">
<div class="header-user">
<img src="HOME/DoLogo.png" alt="logo" width="50px">
<p><span>Do</span></p>
</div>
<div class="header-tablet">
<div class="vl"></div>
<ul>
<li>Discover</li>
<li>How it works</li>
</ul>
</div>
</div>
<div class="right-content">
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search"></i>
</div>
<img id="notifications" src="HOME/Notification.svg" alt="Notification">
<div class="header-user">
<img src="HOME/uploadnav.png" alt="user">
</div>
<img class="mob" src="HOME/uploadnav.png" alt="user">
<img src="HOME/menu.svg" alt="hamburgermenu">
</div>
</nav>
</div>
</header>

Flexbox Form not covering entire site

It happens that my "form" has 3 divs "(.contact-in)" which i call them with ":nth-child" in my css and with flex i do control their percentage on the site but in x-axis. So my question is how can i control their % in y-axis because they aren't covering the entire site and for example my footer isn't going all the way down because i'm not covering the entire page with the content.
Postscript: The site layout is with css grid.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/contact.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>TRV ECOLOGICO SRL</title>
</head>
<body>
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo"><h2>TRV ECOLOGICO SRL</h2></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
</body>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor{
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.contenedor .contenedor-nav{
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form{
grid-column: span 2;
}
.contenedor .contenedor-footer{
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav{
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion{
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo{
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo{
height: 100%;
position: absolute;
}
.triangulo{
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto{
display: flex;
align-items: center;
justify-content:center;
height: 50px;
width: 100%;
}
.textotriangulo{
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista{
margin-right: 20%;
}
.menu-lista ul li{
list-style: none;
display: inline-block;
}
.menu-lista ul li a{
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in{
padding: 40px 30px;
}
.contact-in:nth-child(1){
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2){
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3){
flex: 25%;
padding: 0;
}
.contact-in h1{
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2{
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i{
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p{
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form{
width: 100%;
height: auto;
}
.contact-in-input{
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-textarea{
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-btn{
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe{
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
#media only screen and (max-width:360px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
/* FOOTER */
#footer{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p{
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}

First make the height of html and body to 100%.
html, body{
height: 100%;
}
If you want to make the footer height is to be 80px, then make it in contenedor class
.contenedor{
...
grid-template-rows: repeat(2, auto) 80px;
}
Why to make height internally 80px when you can control it with grid using grid-template-rows.
#footer{
...
height: 80px; // Should be avoided as per your design
... // instead add height for whole footer in grid-tempate-rows
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor {
height: 100%;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto) 80px;
}
.contenedor .contenedor-nav {
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form {
grid-column: span 2;
}
.contenedor .contenedor-footer {
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav {
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion {
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
}
.textotriangulo {
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in {
padding: 40px 30px;
}
.contact-in:nth-child(1) {
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2) {
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3) {
flex: 25%;
padding: 0;
}
.contact-in h1 {
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2 {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i {
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p {
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form {
width: 100%;
height: auto;
}
.contact-in-input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-textarea {
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-btn {
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe {
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
#media only screen and (max-width:360px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
/* FOOTER */
#footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p {
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo">
<h2>TRV ECOLOGICO SRL</h2>
</div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar"
width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>

How to resize these images in CSS?

My boss is having me update the company website since I know a little code, but I'm having trouble making the images bigger. This is the html code on the page:
<!----******* The Second Title Section -->
<!--<div style="width: 95%;overflow: hidden; margin:0 auto;" >
<div class="rightProduct">
<p class="partsTitle">Part Numbers and Manufacturers</p>
</div>
</div>-->
<!----******* The main product Section-->
<div class="apartmentInnerWrapper">
<div class="leftProduct">
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://efuses.com/wp-content/uploads/2018/11/copper-bus-bar-500x500.jpg" alt="H05" width="320" height="240"/>
</li>
</ul>
</div>
</div>
<div class="rightProduct">
<br></br> <p class="categoryTitle">Copper Busbar - In Stock and Ready for Immediate Shipment</p>
<p class="communityHeader">
</p>
<div class="fuseDescription">
<span class="fuseDescriptionP">
<br>Cut to Length</br>
<br>Bent and Drilled to Your Specs</br>
<br>Custom Fabrication</br>
</span>
<span><br>
<img src="https://efuses.com/wp-content/uploads/2018/11/H05WhiteBG.jpg" alt="H05" class="myimage" />
<img src="https://efuses.com/wp-content/uploads/2018/11/H02WhiteBG.jpg" alt="H02" class="myimage" /></br>
</span>
<p></p>
<img src="https://efuses.com/wp-content/uploads/2016/06/Express_Shipping-150.png"><span>In Stock Item & Ready to Ship</span>
<p class="chatLink">For Instant Quote - Open the Chat Below<br>
Or Email Us at
<a href="#contact_form_pop" class="fancybox talkPerson" >quote#powerfuse.com</a><br>
Or Call Us at
<span class="number talkPerson">918-665-6888</span>
And here is the CSS script:
/*************
community Page CSS
************/
/* Contact Form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
background-color: #fff;
border: 2px solid #2F3396;
color: #000;
width: 90%;
}
.site-header {
display: none;
}
.flexslider {
max-width: 600px;
margin: 0 auto 60px !important;
}
.site-inner {
padding: 0px !important;
max-width: 3000px !important;
}
a {
border-bottom: none !important;
text-decoration: none !important;
}
.communityMobileContainer {
display: none;
}
.communityContainer {
width: 100%;
margin: 0;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
.apartmentInnerWrapper {
width: 85%;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 10px 0px 20px 0px;
}
/*********************
Community Header
*********************/
.apartmentBanner {
width: 100%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
.topBanner {
background-color: #2F3396;
height: 100px;/*F8C800*/
}
.bottomBanner {
background-color: #C1D0D3;
width: 100%;
padding: 5px 0;
/*position: relative;
top: -40px;*/
}
.bottomBanner a {
color: #2F3396 !important;
}
.apartmentPets,
.apartmentBannerMap,
.apartmentBannerPrice {
float: left;
width: 33%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets1,
.apartmentBannerMap1 {
float: left;
width: 25%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentBannerPrice1 {
float: left;
width: 50%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets a {
color: #fff;
}
.communityViewMap a {
color: #fff;
}
.talkSection > a{
padding-top: 10px !important;
color: #C1D0D3;
font-size: 30px;
}
.talkSection > a:hover {
color: #fff;
}
.talkSection .powerFuseBottom {
position: relative;
top: -29px;
}
.apartmentBannerMap {
padding-top: 4px;
}
.talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #c3251d;
text-decoration: underline !important;
}
.communityViewMap .talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #2F3396;
text-decoration: none !important;
}
a:hover {
color: #000;
cursor: pointer;
}
.apartmentPets {
padding-top: 4px;
}
/* End Banner */
.rightProduct .partsTitle {
margin: 10px 0 0px;
font-size: 24px;
font-weight: 400;
}
.learnAboutFact {
margin: 10px 0 0px;
font-size: 32px;
font-weight: 400;
color: #2F3396;
text-align: center;
display: block;
}
/* Product Desciption */
.communityContainer .categoryTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
}
.communityContainer .categoryFuseTitle {
font-size: 26px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
padding: 35px 0 20px;
}
.communityContainer .leftProduct {
padding: 3px 12px;
width: 45%;
float: left;
overflow: hidden;
}
.communityContainer .leftProduct img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.communityContainer .rightProduct {
padding: 3px 12px;
width: 53%;
float: right;
overflow: hidden;
}
.fuseDescriptionP {
font-size: 22px;
font-weight: 500;
color: #000;
margin-bottom: 0px;
}
.fuseDescriptionP p {
margin-bottom: 0px;
}
.contactUsBanner{
text-align: center;
font-size: 22px;
font-weight: 500;
color: #000;
}
.contactUsBanner a {
padding: 10px 15px;
color: #000;
}
.contactUsBanner a:hover {
color: #2F3396;
}
/* End Product Description */
.communityContainer .communityHeader {
padding: 2px 12px 0 0;
margin: 0 0 0 0;
width: 100%;
float: left;
text-align: left;
}
.communityContainer .communityHeader .communityTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
}
.communityContainer .fuseDescription p {
font-size: 16px;
}
/*********************
Community Description Section
*********************/
.communityContainer .fuseDescription{
width: 100%;
overflow: hidden;
padding: 0px 10px 5px 0px;
}
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
.communityContainer .fuseDescription span {
font-size: 20px;
font-weight: 400;
position: relative;
top: -15px;
padding: 0 0 0 15px;
}
.communityContainer .fuseDescription .chatLink {
font-size: 24px;
font-style: italic;
font-weight:600;
margin-bottom: 2px;
}
.communityContainer .fuseDescription p{
font-size: 16px;
}
.communityDescriptionHalf {
float: left;
width: 48%;
padding: 0px 4px;
}
.communityDescriptionThird {
float: left;
width: 32%;
padding: 0px 4px;
}
.communityDescription .communityPlansTitle {
padding: 3px 0 20px 0px;
width: 100%;
display: block;
clear: left;
}
.communityPlansDataLeft,
.communityPlansDataRight {
width: 48%;
float: left;
font-size: 16px;
font-weight: 400;
padding: 0 10px!important;
}
.communityPlansInfo h4{
font-size: 24px;
color: #004c71;
margin: 5px 0 2px 0 !important;
padding: 0 10px!important;
font-weight: 700;
text-align: center;
}
.communityPlansInfo p {
font-size: 18px;
margin: 0px 0 4px 0 !important;
padding: 0 10px!important;
font-weight: 600;
color: #000;
}
/* Footer */
.footer-widgets {
padding: 0px;
background-color: #C1D0D3;
}
.footer-widgets .wrap {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets .wrap a {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets-1 {
width: 100%;
float: left;
padding: 20px 4%;
text-align: center;
margin: 0px;
font-size: 22px;
color: #2F3396;
}
.footer-widgets-1 p {
margin-top: 5px;
margin-bottom: 20px;
}
.footer-widgets-1 .widgettitle {
text-align: center;
color: #2F3396;
}
.footer-widgets-2 {
width: 50%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
color: #2F3396;
}
.footer-widgets-2 .widgettitle {
color: #2F3396;
}
.footer-widgets-1 a:hover,
.footer-widgets-2 a:hover {
color: #000;
}
.footer-widgets-3{
width: 20%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
}
.footer-widgets-3 .widgettitle {
color: #2F3396;
}
.footer-widgets .widget {
margin-bottom: 10px;
}
.widgettitle {
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
font-size: 32px;
}
.site-footer {
background-color: #23282D;
color: #fff;
}
.site-footer a {
color: #fff;
}
/*********************
Mobile CSS
*********************/
#media (max-width: 1000px) {
.communityContainer .communityPhone {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3{
width: 100%;
clear: left;
text-align: center;
}
.widgettitle {
text-align: center !important;
padding-top: 20px;
}
.communityContainer .communityUrl {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
}
#media (max-width: 800px) {
.apartmentInnerWrapper {
width: 100%;
padding-top: 25px;
}
.topBanner {
height: 190px;
}
.apartmentPets,
.apartmentBannerPrice,
.apartmentBannerMap {
clear: left;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 18px;
}
.communityDescriptionHalf {
clear: left;
width: 100%;
}
.communityDescriptionThird {
clear: left;
width: 100%;
}
.communityContainer .leftProduct {
clear: both;
width: 100%;
}
.communityContainer .rightProduct {
clear: both;
width: 100%;
padding: 0 0 25px 0;
}
.communityContainer .communityHeader {
width: 100%;
}
.communityContainer .communityHeader .communityBuilder {
padding: 6px 3px;
}
}
#media (max-width: 700px) {
.communityMobileContainer {
display: inline-block!important;
}
.communityContainer {
display: important;
}
#communityPlansAll {
width: 100%;
max-width: 500px;
margin: 2px auto 2px auto;
}
/*********************
End Mobile CSS
*********************/
}
/*******************
*******************
Fuse Category Page
*******************
*******************/
.allAgentsWrapper {
width: 100%;
padding: 0 0 75px;
overflow: hidden;
}
.allAgentsWrapper .allAgents {
width: 100%;
margin: 0 auto;
max-width: 1000px;
overflow: hidden;
padding: 40px 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.singleAgent {
padding: 20px 10px;
width: 200px;
height: auto;
}
.singleAgent .bpTitle{
text-align: center;
font-size: 16px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 7px;
color: #606060;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpImg {
width: 100%;
height: auto;
border: 1px solid #f6f6f6;
}
.singleAgent .fuseImageWrapper {
overflow: hidden;
min-height: 144px;
}
.singleAgent .bpDesc p {
font-size: 12px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 17px;
text-align: justify;
font-size: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
.singleAgent .AgentTop {
width: 100%;
padding: 5px 0;
}
.singleAgent .AgentTop .leftTop {
float: left;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .AgentTop .rightTop {
float: right;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .bpPrice {
font-size: 16px;
text-align: center;
padding: 5px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpLink {
padding: 7px 11px;
float: right;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleAgent .bpLink:hover {
background-color: #000;
}
.singleAgent .bpIcons {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
.singleAgent .bpIcon i {
font-size: 18px;
padding: 0 5px;
}
/* Single Agent Page */
.singleWrapper .topImage {
padding: 15px;
}
.singleWrapper .topSection {
padding: 5px 15px 15px;
}
.singleWrapper .topSection .bpTitle {
padding: 5px 0;
}
.singleWrapper .topSection .bpDesc {
padding: 5px 0 15px;
}
.singleWrapper .topSection .bpLink {
float: left;
padding: 7px 11px;
margin-top: 10px;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleWrapper .topSection .bpPrice {
margin-left: 10px;
float: left ;
color: #606060;
font-size: 20px;
padding: 16px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleWrapper .leftImage {
max-width: 300px;
}
.singleWrapper .rightSection {
max-width: 500px;
}
.singleWrapper .bpIcon i {
font-size: 22px;
padding: 0 5px 15px;
}
I tried adding this bit of code to the Community Description Section on the CSS file to see if it would work but it didn't.
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
Basically I'm flummoxed. Any help would be appreciated.
Here is a link to the page:
https://efuses.com/copperbusbar/
The two images in question are underneath the words Custom Fabrication.
Thanks!

I am inferring that since you have 2 images, you want to align them next to each other and have them occupy roughly half of the available space each. So a solution could be:
.communityContainer .fuseDescription img { display: inline-block; width: 49%; height: auto; }
First, you need a selector that correctly references and overwrites the current context, hence the 2 classes and an element. Then, displaying the images as inline-blocks allows them to respect the width and height specifications in all browsers. A width of 49% makes sure they both fit in a row snugly without pressing the outer margins. Height auto insures they keep their original proportion and don't get skewed.
Your error was the myimages selector which doesn't really exist in CSS, except if you wanted to specify the class name .myimages which would have also worked. The difference in approaches when using percentages vs pixels is the fact that the percentages adapt to the screen real estate available in varying contexts and browser sizes.
There are some other more advanced solutions based on the CSS grid specification that do the same trick for a variable amount of images on one "line" but I'm guessing you don't need that sort of complexity to solve this particular issue. :)

White screen when loading converted wordpress theme from html

I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>

Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);