Develop Reference

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

div size after an eventlistener

I was working in this super simple project get really satisfied with the finish work but then CHAN! When I check the functionality of the app I noticed that the firs card, the one of the basic services get's bigger when the number change and also the third division line of the card change his size acting by himself when all the division lines are made it at once.
I was using SASS for this project but I don't think that was the problem in the compilation.
The problem is when I test the app in big screens
const switcher = document.querySelector("input");
switcher.addEventListener("click", () => {
const priceBasic = document.querySelector(".priceBasic");
const pricePro = document.querySelector(".pricePro");
const priceMaster = document.querySelector(".priceMaster");
if (switcher.checked == true) {
priceBasic.innerHTML = "$49.99";
pricePro.innerHTML = "$69.99";
priceMaster.innerHTML = "$89.99";
} else {
priceBasic.innerHTML = "$19.99";
pricePro.innerHTML = "$24.99";
priceMaster.innerHTML = "$39.99";
}
});
body, html {
height: 100%;
margin: 0;
}
body {
font-family: "Montserrat", sans-serif;
background: #f7f6ff;
display: grid;
justify-content: center;
}
.container {
max-width: 980px;
}
.switch {
position: relative;
display: block;
width: 65px;
height: 35px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
transition: 0.5s;
border: 3px solid white;
}
.slider:before {
position: absolute;
content: "";
bottom: 14px;
top: 3.1px;
background: #eeeded;
transition: 0.5s;
}
.switch input {
display: none;
}
input:checked + .slider {
background: #7466f5;
}
input:checked + .slider:before {
transform: translateX(35px);
}
.slider.round {
border-radius: 35px;
}
.slider.round:before {
width: 35%;
height: 75%;
border-radius: 50px;
}
.header-and-switch {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin-bottom: 20%;
}
.header-and-switch h2 {
font-size: 1.75rem;
color: #524c85;
}
#media (min-width: 1100px) {
.header-and-switch h2 {
margin: 10px auto 0 auto;
}
}
#media (min-width: 1100px) {
.header-and-switch {
margin-bottom: 3%;
}
}
.switch-and-stuff {
display: flex;
}
.switch-and-stuff h4 {
margin: auto 25px;
color: #b3b5c6;
}
#media (min-width: 1100px) {
.cards-container {
display: flex;
flex-direction: row;
justify-content: center;
}
}
.card {
background: white;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin-bottom: 40px;
padding: 30px;
border-radius: 10px;
}
.card h4 {
color: #b3b5c6;
}
.card h1 {
color: #170f61;
font-size: 5rem;
margin: 0px auto 10px auto;
}
.card div {
width: 110%;
height: 1.8px;
background: #b3b5c6;
}
#media (min-width: 1100px) {
.card {
margin: auto 20px;
}
}
.btn {
-webkit-user-select: none;
user-select: none;
margin-top: 20px;
width: 105%;
height: 40px;
background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%);
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
border-radius: 5px;
cursor: pointer;
}
.btn a {
color: white;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
}
.btn:focus, .btn.focus {
outline: 0;
}
.card:hover {
transition: 0.5s ease-out;
transform: scale(1.1, 1.1);
background: linear-gradient(115deg, #a3a8f0 35%, #696fdd 100%);
}
.card:hover h4, .card:hover h1 {
color: white;
}
.card:hover .btn {
background: white;
}
.card:hover .btn a {
color: #696fdd;
}
.card:hover .btn:hover {
text-decoration: none;
background-color: #696fdd;
}
.card:hover .btn:hover a {
color: white;
}
<!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/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700&display=swap" rel="stylesheet">
<title>Change the price</title>
</head>
<body>
<div class="container">
<div class="header-and-switch">
<h2>Our Pricing</h2>
<div class="switch-and-stuff">
<h4>Annually</h4>
<div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<h4>Monthly</h4>
</div>
</div>
<div class="cards-container">
<div class="card">
<h4>Basic</h4>
<h1 class="priceBasic">$19.99</h1>
<div></div>
<h4 class="features1">500 GB Storage</h4>
<div></div>
<h4 class="features">2 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 3 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
<div class="card">
<h4>Professional</h4>
<h1 class="pricePro">$24.99</h1>
<div></div>
<h4 class="features1">500 GB Storage</h4>
<div></div>
<h4 class="features">5 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 10 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
<div class="card">
<h4>Master</h4>
<h1 class="priceMaster">$39.99</h1>
<div></div>
<h4 class="features1">2 TB Storage</h4>
<div></div>
<h4 class="features">10 users Allowed</h4>
<div></div>
<h4 class="features">Send up to 20 GB</h4>
<div></div>
<button class="btn">LEARN MORE </button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

what I would do:
the 2 prices are present on the interface but always with one or the other hidden.
example code of this system:
const AllPrices = document.querySelectorAll('h1.price')
priceToggle.onclick=_=>
{
AllPrices.forEach(p=>p.classList.toggle('annual'))
}
button {
display:block; margin:2em
}
.priceBlock {
display: inline-block;
margin: .5em;
padding: .7em;
font-size: 1.2em;
background-color: #85d5d8;
color: navy;
}
h1.price span {
display: block;
width: 100%;
float: left;
clear: both;
text-align: center;
overflow: hidden;
}
h1.price span:nth-of-type(2) { height:0; }
h1.price.annual span:nth-of-type(1) { height:0; }
h1.price.annual span:nth-of-type(2) { height:auto; }
<button id="priceToggle"> price toggle </button>
<div class="priceBlock">
<h1 class="price">
<span>$19.99</span>
<span>$500.99</span>
</h1>
</div>
<div class="priceBlock">
<h1 class="price">
<span>$23.99</span>
<span>$250.99</span>
</h1>
</div>

Toggle Between Search Icon and Cancel Icon

I need to toggle between two icons (basically search icon and cancel icon) when a particular element is clicked using jQuery. In the case of the code below, the telegram icon changes to whatsapp icon on click. I want to change back to telegram icon when the whatsapp icon is clicked. I would be grateful if the same code can also be written in JavaScript.
$(document).ready(function() {
$(".searchIcon").click(function() {
$(".search").toggleClass("active");
$(".searchIcon").attr(
"src",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0"
);
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
</div>
</div>
</div>

Have a go with this
I extracted the style (you had a typo -colon after style instead of equal sign) and hid the second icon
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon:nth-child(2) {
display: none;
}
jQuery
$(function() {
$(".searchIcon").on("click",function() {
$(".search").toggleClass("active");
$(this).toggle()
$(this).siblings().toggle()
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon:nth-child(2) {
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" />
<img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
</div>
</div>
</div>
Vanilla JS
I added a new class
.searchIcon {
display: none;
}
.isVisible {
display:block
}
window.addEventListener("load", function() { // page load
document.querySelector(".searchIcon-wrapper").addEventListener("click", function(e) { // delegation
const tgt = e.target;
if (tgt.classList.contains("searchIcon")) { // one of the images
document.querySelector(".search").classList.toggle("active");
tgt.classList.toggle("isVisible");
const sib = tgt.classList.contains("whatsapp") ? 1 : 2; // which did we click?
document.querySelector(".searchIcon:nth-child("+sib+")").classList.toggle("isVisible");
}
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon {
display: none;
}
.isVisible {
display:block
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon isVisible" src="https://www.telegram.org/img/t_logo.png" />
<img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
</div>
</div>
</div>

So what I personally would do is use psuedo elements on the iconWrapper div and then just toggle a class on and off hiding or showing the respective pseudo element. You can either put the images as their content value or use the background-image property and set the images there.
var el = document.querySelector('.iconWrapper');
el.onclick = function() {
el.classList.toggle('active');
}
.iconWrapper {
width: 100px;
height: 50px;
background: blue;
position: relative;
}
.iconWrapper:before, .iconWrapper:after {
width: 50px;
height: 50px;
content: '';
display: block;
position: absolute;
top: 0;
right: -50px;
}
.iconWrapper:before {
background: green;
display: none;
}
.iconWrapper:after {
background: red;
}
.iconWrapper.active:before { display: block; }
.iconWrapper.active:after { display: none; }
<div class="iconWrapper"></div>

I created a reusable function so that you can change another img src like this in the future if you wanted to.
var searchIcon = document.getElementsByClassName("searchIcon")[0];
function togglesrc(obj, icon_off, icon_on){
if(obj.src == icon_off){
obj.src = icon_on;
}
else{
obj.src = icon_off;
}
}
searchIcon.addEventListener("click",function(){
document.querySelector(".search").classList.toggle("active");
var icon_on = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0";
var icon_off = "https://www.telegram.org/img/t_logo.png";
togglesrc(this, icon_off, icon_on);
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
</div>
</div>
</div>

Switch chekcbox SHOW / HIDE two DIV elements using Vanilla Javascript

I have two Form Groups, both are inside a DIV element.
Fist one have an id="personaFisicaFormGroup"
Second one have an id="personaMoralFormGroup"
personaFisicaFormGroup is display: block; as default
personaMoralFormGroup is display: none; as default
When user click the checkbox I want to inverse the display.
personaFisicaFormGroup set to display: none;
personaMoralFormGroup set to display: blcok;
If user click again I want to switch values block and none (indeterminate times).
EDIT:
I just chaged my Javascript to:
onOffSwitch.addEventListener('change', e => {
if(personaMoralFormGroup.style.display == 'none') {
personaMoralFormGroup.style.display = 'block';
personaFisicaFormGroup.style.display = 'none';
} else {
personaMoralFormGroup.style.display = 'none';
personaFisicaFormGroup.style.display = 'block';
}
});
This works, but at the second switch click.
Here is my code:
const onOffSwitch = document.getElementById('onOffSwitch');
const personaFisicaFormGroup = document.getElementById('personaFisicaFormGroup');
const personaMoralFormGroup = document.getElementById('personaMoralFormGroup');
onOffSwitch.addEventListener('change', e => {
if(e.target.checked){
personaMoralFormGroup.style.display = 'block';
} else {
personaFisicaFormGroup.style.display = 'none';
}
});
.nuevo-ingreso-form__group {
border: 1px solid var(--clr-grey-borders);
border-radius: 5px;
margin-bottom: 20px;
background-color: rgb(255, 255, 255);
width: 300px;
}
#personaMoralFormGroup {
display: none;
}
.nuevo-ingreso-form__group:hover {
box-shadow: 0 7px 16px 0 rgba(0,0,0,.2), 0 1px 3px 0 rgba(0,0,0,.1);
transition: box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out;
}
.nuevo-ingreso-form__group-header {
padding: 25px 40px 10px;
display: flex;
align-items: center;
font-size: 18px;
}
.nuevo-ingreso-form__group-header h3 {
margin-left: 20px;
}
.nuevo-ingreso-form__field-wrapper {
padding: 0px 40px;
padding-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nuevo-ingreso-form__field-wrapper:last-child {
padding-bottom: 50px;
}
.nuevo-ingreso-form__input-label {
font-size: 13px;
font-weight: 800;
color: grey;
padding: 5px 5px 5px 0;
display: block;
width: 40%;
text-align: right;
}
.nuevo-ingreso-form__input-container {
border: 1px solid grey;
height: 100%;
border-radius: 5px;
flex-grow: 1;
margin-left: 20px;
}
.nuevo-ingreso-form__input-field {
margin: 0;
background-color: transparent;
border: none;
width: 100%;
font-size: 16px;
}
.onoffswitch {
position: relative; width: 172px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
margin: 0 auto;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #FFFFFF; border-radius: 50px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 35px; padding: 0; line-height: 35px;
font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Persona Física";
padding-left: 19px;
background-color: #E0E0E0; color: #5C5C5C;
}
.onoffswitch-inner:after {
content: "Persona Moral";
padding-right: 19px;
background-color: #636363; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 8.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 133px;
border: 2px solid #FFFFFF; border-radius: 50px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onOffSwitch">
<label class="onoffswitch-label" for="onOffSwitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<!-- DATOS GENERALES - PERSONA FISICA -->
<div id="personaFisicaFormGroup" class="nuevo-ingreso-form__group">
<div class="nuevo-ingreso-form__group-header">
<h3>Persona Fisica</h3>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">NOMBRE</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteNombreORazonSocial" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">APELLIDO PATERNO</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clientePaterno" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">APELLIDO MATERNO</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteMaterno" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
</div>
<!-- PERSONA MORAL -->
<div id="personaMoralFormGroup" class="nuevo-ingreso-form__group">
<div class="nuevo-ingreso-form__group-header">
<i class="fa fa-id-card"></i>
<h3>Persona Moral</h3>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">RAZÓN SOCIAL</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteNombreORazonSocial" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">RFC</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteRFC" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">EMAIL</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteEmail" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
</div>

Whenever hiding and showing elements I prefer to use an explicit class for this. It is easier to add and remove the class with the added bonus of I don't have to worry about if the element isn't display:block by default.
This would result in the following for you. Things to note: I've removed display:none based on Id and we're using classList.toggle to add and remove the class
const onOffSwitch = document.getElementById('onOffSwitch');
const personaFisicaFormGroup = document.getElementById('personaFisicaFormGroup');
const personaMoralFormGroup = document.getElementById('personaMoralFormGroup');
onOffSwitch.addEventListener('change', e => {
personaFisicaFormGroup.classList.toggle("hidden", e.target.checked);
personaMoralFormGroup.classList.toggle("hidden", !e.target.checked);
});
.hidden {display:none;}
.nuevo-ingreso-form__group {
border: 1px solid var(--clr-grey-borders);
border-radius: 5px;
margin-bottom: 20px;
background-color: rgb(255, 255, 255);
width: 300px;
}
.nuevo-ingreso-form__group:hover {
box-shadow: 0 7px 16px 0 rgba(0,0,0,.2), 0 1px 3px 0 rgba(0,0,0,.1);
transition: box-shadow .3s ease-out,-webkit-box-shadow .3s ease-out;
}
.nuevo-ingreso-form__group-header {
padding: 25px 40px 10px;
display: flex;
align-items: center;
font-size: 18px;
}
.nuevo-ingreso-form__group-header h3 {
margin-left: 20px;
}
.nuevo-ingreso-form__field-wrapper {
padding: 0px 40px;
padding-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nuevo-ingreso-form__field-wrapper:last-child {
padding-bottom: 50px;
}
.nuevo-ingreso-form__input-label {
font-size: 13px;
font-weight: 800;
color: grey;
padding: 5px 5px 5px 0;
display: block;
width: 40%;
text-align: right;
}
.nuevo-ingreso-form__input-container {
border: 1px solid grey;
height: 100%;
border-radius: 5px;
flex-grow: 1;
margin-left: 20px;
}
.nuevo-ingreso-form__input-field {
margin: 0;
background-color: transparent;
border: none;
width: 100%;
font-size: 16px;
}
.onoffswitch {
position: relative; width: 172px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
margin: 0 auto;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #FFFFFF; border-radius: 50px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 35px; padding: 0; line-height: 35px;
font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Persona Física";
padding-left: 19px;
background-color: #E0E0E0; color: #5C5C5C;
}
.onoffswitch-inner:after {
content: "Persona Moral";
padding-right: 19px;
background-color: #636363; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 8.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 133px;
border: 2px solid #FFFFFF; border-radius: 50px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onOffSwitch">
<label class="onoffswitch-label" for="onOffSwitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<!-- DATOS GENERALES - PERSONA FISICA -->
<div id="personaFisicaFormGroup" class="nuevo-ingreso-form__group">
<div class="nuevo-ingreso-form__group-header">
<h3>Persona Fisica</h3>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">NOMBRE</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteNombreORazonSocial" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">APELLIDO PATERNO</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clientePaterno" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">APELLIDO MATERNO</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteMaterno" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
</div>
<!-- PERSONA MORAL -->
<div id="personaMoralFormGroup" class="nuevo-ingreso-form__group hidden">
<div class="nuevo-ingreso-form__group-header">
<i class="fa fa-id-card"></i>
<h3>Persona Moral</h3>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">RAZÓN SOCIAL</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteNombreORazonSocial" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">RFC</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteRFC" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
<div class="nuevo-ingreso-form__field-wrapper">
<label class="nuevo-ingreso-form__input-label" for="">EMAIL</label>
<div class="nuevo-ingreso-form__input-container">
<input id="clienteEmail" class="nuevo-ingreso-form__input-field" type="text">
</div>
</div>
</div>