0

I have two big problems:

The first trouble I have encountered is that when I am testing the responsivity of my website in the contact section I always meet a reappearing problem: There is a white space (.2 rem - 1.2rem width) on the right side of the body when I try to display the whole page under 400px width device.

My second problem is that I have social media icons in the footer. They appear properly in all other sections (multipage website), but only here does something prevent them to be displayed properly. I tried resizing their main divs to 100% width and 100% max-width, but an element is probably still longer than the others, which should obviously cause this kind of problem.

So about the white blank area, I think it is important to know that I have a specially styled scrollbar, which might also cause this little mischief. I am unsure, so I have also tried removing it, but it did not help. In the beginning, I also encountered the same problem with the footer, but somehow I managed to get by and was able to solve it by correcting the width of the .footer-container. Since then the white space appeared and my second problem with social media icons not being displayed properly just arose.

Here is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="contacts.css">
    <title>Eckert Művek Galéria</title>
</head>
<body>
    <div class="floating-btn show-btn" aria-label="up button" role="button">
        <img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
    </div>
    <header>
          <!--NAVBAR-->
        <nav>
            <ul class="menu" id="desktop-menu">
              <li class="nav-item"><a href="home.html">Főoldal</a></li>
              <li class="nav-item"><a href="aboutus.html">Rólunk</a></li>
              <li class="nav-item"><a href="services.html">Szolgáltatások</a></li>
              <li class="nav-item"><a href="whyus.html">Miért mi?</a></li>
              <li class="nav-item"><a href="gallery.html">Galéria</a></li>
              <li class="nav-item"><a href="contacts.html">Kapcsolat</a></li>
            </ul>
            <!--HAMBURGER ICON-->
            <div class="header-right-gap">
                <button class="hamburger" aria-label="hamburger button">
              <div class="line line-1"></div>
              <div class="line line-2"></div>
              <div class="line line-3"></div>
                </button>

            </div>
          </nav>
           <!--MOBILE MENU-->
         <div class="mobile-menu">
            <ul class="m-menu">
                <li class="nav-item"><a href="home.html">Főoldal</a></li> 
                <li class="nav-item"><a href="aboutus.html">Rólunk</a></li>
                <li class="nav-item"><a href="services.html">Szolgáltatások</a></li>
                <li class="nav-item"><a href="whyus.html">Miért mi?</a></li>
                <li class="nav-item"><a href="gallery.html">Galéria</a></li>
                <li class="nav-item"><a href="contacts.html">Kapcsolat</a></li>
            </ul>
            
        </div>
    </header>
    <main>
          <!--CONTACT FORM-->
        <div class="container">
            <form>
                <h1>Kapcsolat</h1>
    
                <input type="text" id="firstName" placeholder="Családnév" required>
                <input type="text" id="lastName" placeholder="Keresztnév" required>
                <input type="email" id="email" placeholder="Email" required>
                <input type="text" id="mobile" placeholder="Telefonszám" required>
                <h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
                <textarea id="texti" required></textarea>
                <input type="submit" value="Elküldés" id="button">
    
            </form>
        </div>

        
    </main>
    
    <footer>
        <div class="footer-container">
              <!--COMPANY INFORMATION, CONTATCTS-->
            <div class="footer-top">
                <div>
                    <article>
                        <h2>Elérhetőségeink</h2>
                        <div class="cellphone">
                            <a href="tel:+36709424298"><img src="assets/png/telephone.png" alt="phone-icon"></a>
                            <h3><span>Telefonszám:</span> +36709424298</h3>
                        </div>
                        <div class="internet">
                            <a href="mailto:eckertmuvek@gmail.com"><img src="assets/png/mail.png" alt="email-icon"></a>
                            <h3><span>E-mail:</span> eckertmuvek@gmail.com</h3>
                        </div>
                        <div class="headquarter">
                            <a href="#"><img src="assets/png/location.png" alt="company-icon"></a>
                            <h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
                        </div>
                        <div class="opening-hours">
                            <a href="#"><img src="assets/png/clock.png" alt="op-icon"></a>
                            <h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
                        </div>
                   
                    </article>

                </div>

                

                <!--TEXT-->
                <div class="text-container">
                    <h4>Céginformációk</h4>
                    <p>
                        <ol>
                            <li>
                                <h5>Cégjegyzékszám: </h5>
                                <p> 01 09 996342</p>
                            </li>
                            <li>
                                <h5>Adószám: </h5>
                                <p>24222716243</p>
                            </li>
                            <li>
                                <h5>Számlaszám: </h5>
                                <p>112131423-43242142-432412421</p>
                            </li>
                            <li>
                                <h5>Cégnév: </h5>
                                <p>Eckert Művek Korlátolt Felelősségű Társaság</p>
                            </li>
                        </ol>
                    </p>
                </div>
                <!--
                    <div class="text-container">
                        <h4>Ttitle-1</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                             Dicta modi laborum quibusdam quis natus debitis qui dolor 
                             voluptatibus ab sit, cum saepe enim unde doloribus veniam 
                             numquam perspiciatis optio impedit.</p>
                    </div>

                -->

                

                <!--POLICIES-->
                <div class="policies">
                    <a href="#">Impresszum</a>
                    <a href="#">GDPR Tájékoztató</a>
                    <a href="#">Süti Tájékoztató</a>
                </div>
            </div>

            <!--MAP-->

            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
                  height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>

           <!--SOCIAL MEDIA ICONS-->

            <div class="social-media-icons">
              <div class="sm-container" id="insta">
                  <div class="sm-icon">
                      <a href="images/instagram-logo.svg" class="fa fa-instagram"></a>
      
                  </div>
              </div>
              <div class="sm-container" id="github">
                  <div class="sm-icon">
                      <a href="images/github-logo.svg" class="fa fa-github"></a>
      
                  </div>
              </div>
              <div class="sm-container" id="facebook">
                  <div class="sm-icon">
                      <a href="images/facebook-logo.svg" class="fa fa-facebook"></a>
      
                  </div>
              </div>
            <div class="sm-container" id="linkedin">
              <div class="sm-icon">
                  <a href="images/linkedin-logo.svg" class="fa fa-linkedin"></a>
      
              </div>
            </div>
          </div>
          <div class="footer-bottom">
                <p>&copy; Eckert Művek Kft. Minden jog fenntartva.</p>
          </div>
        </div>
      </footer>
    <script src="contacts.js"></script>
</body>
</html>

And here is my CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



:root {
  --nav-height: 100px; /*80%*/
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}



html {
    scroll-behavior: smooth; 
}

body {
  min-height: 100vh;
  width: 100%;
  font-size: 12px;
  font-family: sans-serif;
  
  
  }



.floating-btn {
  position: fixed;
  bottom: 3.5vh;
  right: 0;
  width: 50px;
  height: 50px;
  z-index: 100;
  background-color: yellow;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
  cursor: pointer;
  margin-right: 1rem;
  border: 1px solid #000;
}

.show-btn {
  display: block;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 100;
  background-color: #000;
 
}


/*Srcollbar*/

::-webkit-scrollbar{
  width: 15px;
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: yellow;
  border-radius: 10px;
  border: 1px solid black;
}

::-webkit-scrollbar-thumb:active {
  background: orangered;
}


nav {
  display: flex; 
  width: min(90%, 1200px);
  height: inherit; 
  align-items: center; 
  justify-content: flex-start;
    margin-inline: unset;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    left: 2.5rem;
    gap: 1rem;
    /*margin-top: -2.5rem;*/

}


nav a {
  max-height: var(--nav-height); 
  align-items: center; 
  margin-inline: auto; 
  font-size: 20px;
  position: relative;
  height: 100%;
}

nav ul {
  display: flex; 
  gap: 1rem;
  width: 100%;
  list-style: none;
  margin-top: 3rem;
  
}

.nav-item a {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  height: 100%;
  margin: .5em .8em;
  padding: 10px;
  
}

.nav-item a::before,
.nav-item a::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

nav a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #ffed4b;
  border-right: 3px solid #fdcd3b;
  transform: translate(-100%, 50%); /*-100%, 50%*/
}

.nav-item a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #fdcd3b;
  border-left: 3px solid #ffed4b;
  transform: translate(100%, -50%);  /*100%, -50%*/
}

.nav-item a:hover:before,
.nav-item a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}



.nav-item a:hover {
  text-decoration: underline;
  color:yellow;
}

.container{
    min-height: 100vh;
    width: 99.vw;
    background: #08071d;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
   
}

.container form{
    width: 670px; /*670px*/
    height: 450px;
    display: flex;
    justify-content: center;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    overflow-x: hidden;
}

.container form h1{
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    width: 500px;
    text-align: center;
}

.container form input{
    width: 290px;
    height: 40px;
    padding-left: 10px;
    outline: none;
    border: none;
    font-size: 25px;
    margin-bottom: 10px;
    background: none;
    border-bottom: 2px solid #fff;
}

.container form input::placeholder{
    color: #ddd;
}

.container form #lastName,
.container form #mobile{
    margin-left: 20px;
}

.container form h4{
    color: #fff;
    font-weight: 300;
    width: 600px;
    margin-top: 20px;
}

.container form textarea{
    background: none;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-weight: 200;
    font-size: 25px;
    padding: 10px;
    outline: none;
    min-width: 600px;
    max-width: 600px;
    min-height: 80px;
    max-height: 80px;
}

.contactus {
  font-size: 18px;
}



input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
  border-bottom: 3px solid #fdcd3b;
}


textarea::-webkit-scrollbar{
    width: 1em;
}

textarea::-webkit-scrollbar-thumb{
    background-color: rgba(194,194,194,0.713);
}

.container form #button{
    border: 1px solid;
    background: transparent;
    border-radius: 50px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    width: 100px;
    padding: 0;
    margin-right: 500px;
    margin-bottom: 30px;
    transition: 0.3s;
}

.container form #button:hover{
    opacity: 0.9;
    transform: scale(1.2);
    background-color: black;
    color: yellow;
}

/*FOOTER*/

footer {
  width: 100%;
  background-color: #000;
  padding-block: 4rem;
  color: white;
  
  
 
}

.footer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-inline: auto;
  width: min(90%, 1200px);

  
}

.footer-top {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 10px;
  display: flex;
  justify-content: space-around;
}

.footer-top h2 {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.footer-top article div {
  line-height: 2.5rem;
}

.footer-top article div:first-of-type {
  margin-top: 1rem;
}


.footer-top img {
  height: 64px;
}

.text-container p {
  margin-top: 2rem;
}

.text-container ol li {
  line-height: 1.5rem;
  
}
  


/*CONTACT ICONS*/

.cellphone img, .internet img, .headquarter img, .opening-hours img{
  background-color: yellow;
  border-radius: 50px;
  transition: all 0.3s linear;
  
  
}

 footer img:hover {
  background-color: orangered;
  border-radius: 40px;
  transform: rotate(-360deg);
  
  
}


.footer-bottom {
  text-align: center;
  margin-top: 2rem;
}

span {
  color: yellow;
}


.text-container {
  justify-content: space-between;
  width: 20vw;;
  font-size: 0.8rem;
}

/*POLICIES LINKS*/

.policies {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  text-transform: uppercase;
}

.policies a {
  color: yellow;
  font-size: 10px;
  line-height: 2rem;
}

.policies a:hover {
 color: orangered;
}
/*MAP*/

.map {
  margin-inline: auto;
  
}

/*SOCIAL MEDIA ICONS*/

.social-media-icons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  


}

.sm-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding:1rem;
  border: 1px black;
  width: 100%;
  height: 100%;
}

.sm-container a:active {
  color: yellow;
}

.fa {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
  /**/

}




.fa-instagram {
  background: #125688;
  color: white;
  padding: 1rem;
  
}



.fa-github {
  background: white;
  color: black;
  padding: 1rem;

}

.fa-facebook {
  background: #4267B2;
  color: white;
  padding: 1rem;
}

.fa-linkedin {
  background: #3B5998;
  color: white;
  padding: 1rem;
}

.sm-icon {
  transition: all 0.3s linear;
}

.sm-icon:hover {
  transform: scale(1.2);

}

.fa:hover {
 background-color: #fdcd3b;
}


/*MOBILE MENU*/
.mobile-menu {
    display: none;
}

.mobile-menu {
    display: flex;
    width: 100%; /*.line a szülő tehát 40px a width*/
    height: calc(100vh - 80px);
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 80px;
    left: 0;
    background-color: black;
    transform: translate(-100%);
    transition: all 0.4s ease;
    z-index: 100;
  }

  .mobile-menu-on {
    display: flex; /**/
    transform: translate(0);
  }

  .m-menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    font-size: 1.4rem;
  }

   /*hamburger icon*/

   .header-right-gap {
    width: 100px;
    margin-left: 2rem;
    
   }
  
   .hamburger {
    display: none;
    position: fixed;
    width: 50px;
    height: 50px;
    border: none;
    background-color: transparent;
    top: 0;
    left: 1;
    margin-top: 1.5rem;
   
    
    
  }

  .hamburger:hover {
    border: 6px solid;
    border-color: yellow;
    width: 43px;
    margin-left: 4px;
    transform: scale(1.2);
  }
    .hamburger:hover .line.line-1 {
      /*display: none;*/
      transform: rotate(45deg) translateY(7.5px);
      background-color: yellow;
      
    }
    
    .hamburger:hover .line.line-2 {
      display: none;
      
    }
    
    .hamburger:hover .line.line-3 {
      /*display: none;*/
      transform: rotate(-45deg) translateY(-7.5px);
      background-color: yellow;
      
      
    }
    
    .line {
    transition: all .4s ease;
    width: 40px;
    height: 5px;
    background-color: white;
    margin-block: 5px;
    border-radius: 10px;
  }

/*Media query*/

@media (max-width: 1200px) {
  .hamburger {
    display: block;
  }
  
  #desktop-menu {
    display: none;
  }


}

@media (max-width: 900px) {


    footer nav ul {
    flex-direction: column;
        
    }

  footer nav ul li a {
    font-size: 15px;
      /*padding: 15px;*/
  }
}

@media (max-width: 750px) {
  .footer-container {
    display: flex;
    flex-wrap: wrap;
  }



  footer nav ul li a {
    font-size: 10px;
    padding: 15px;
  }


  .text-container p {
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .container form {
    width: 470px;
    
  }

  .container form input {
    width: 160px;
  }

  .container form #button, .container form h4 {
    margin-inline: auto;
  }

.container form textarea {
  min-width: 300px;
  max-width: 300px;
}
 
}


@media (max-width: 400px) {

  .container {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    
  }

  .container form {
    max-width: 100%;
    
    padding-top: 40px;
    padding-bottom: 10px;
  }

  .container form input, h4 {
    text-align: center;
  }

  .container form input {
    width: 160px;
  }

  .container form #button, .container form h4 {
    margin-inline: auto;
  }

.container form textarea {
  align-items: center;
  min-width: 300px;
  max-width: 300px;
}

.text-container {
  width: 70vw;
}

.container form #button {
  display: flex;
  flex-direction: column;
}

footer {
  width: 400px;
}




.footer-top {

 display: flex;
  flex-direction: column;
  align-items: center;
}

 
}
Yoji_91
  • 1
  • please read https://stackoverflow.com/help/how-to-ask – mmh4all Jan 26 '23 at 09:51
  • Not a fix but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. – Rob Jan 26 '23 at 13:20

1 Answers1

0

I once had a similar problem and it was due to margin of one element being bigger than it should be, and it just made that div bigger and pushed it out of viewport, so you could check your margins, I can see that you have quite a lot of margins, inline and to margin-right as well.

Cvijan Djukanovic
  • 111
  • 6