Search code examples
htmlcssresponsive-designmedia-queries

How to solve over- and under-lapping elements and/or divs in responsive design?

I'm currently in an online class in web-design, I'm a beginner and I struggle to finish the second "project" which involve rendering a website design in html and css with responsive element without using pre-processors, so we have to go in with only html and hand-coded css.

I've got several problems to solve but maybe solving the first one will help me figuring out the rest.

there is what I have in computer screen-size and then, what I get with smaller screen-sizes.

Here is the expected result in smartphone size :

I've been struggling with the same overlapping problem at two different areas of the project, but, as mentioned before, I'll limit myself to this first example to see if your potential explanations might help me solve the other instance too.

Here is the html, css and media queries used so far but I don't think there is need of it to replicate the problem:

PS: I separate the 'head' from the 'body' for more clarity of read

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booki</title>
    <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=Raleway: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">
 <script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
  </head>

PS : I use a copy of normalize.css not mentioned in the above head. Also, links to the css mentioned below have been cut out for clarity purpose.

there is the html 'body':

<body>
    <div class="recherche">
        <section class="filtres">
        <h3>Filtres</h3>
        <div class="filtres-serie">
          <section class="economique">
            <span class="recherche-icon filtres-icon">
              <i class="fa-solid fa-money-bill-wave fa-lg"></i>
            </span>
            <p class="filtre-p">Économique</p>
          </section>
          <section class="familial">
            <span class="recherche-icon filtres-icon">
              <i class="fa-solid fa-child-reaching fa-lg"></i>
            </span>
            <p class="filtre-p">Familial</p>
          </section>
            <section class="romantique">
              <span class="recherche-icon filtres-icon">
                <i class="fa-solid fa-heart fa-lg"></i>                   
              </span>
              <p class="filtre-p">Romantique</p>
          </section>
          <section class="animaux">
            <span class="recherche-icon filtres-icon">
              <i class="fa-solid fa-dog fa-lg"></i>
            </span>
            <p class="filtre-p">Animaux autorisés</p>
          </section>
        </div>
      </section>
      <section class="recherche-end">
        <span >
          <i class="fa-solid fa-circle-info fa-xl"></i>
        </span>
        <p>Plus de 500 logements sont disponibles dans cette ville</p>         
      </section>   

    </div>

  </body>

Then the style.css related to the above html:

*{   
    box-sizing: border-box;
}

body {
   font-family: 'Raleway', sans-serif;
  margin: 0px;
   width: 100%;
   height:100%;
}



/* LIENS - MISE EN FORME*/


a:link {
   text-decoration: none; 
   color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {color: #0065FC ;}

a:active {
    text-decoration: none;
    color: black;
}



i {
    display: block
}
.filtres {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 35px;
    /*margin-bottom:41px;*/
}

.filtres-serie {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 845px;
    height:50px;
    gap: 25px;
}

.filtre-p {
    position: relative;
    margin-top: 17px;
    margin-bottom: 14px;
}

.filtres-serie section {
    position: relative;
    display: flex;
    flex-direction: row;
    /*justify-content: space-evenly;*/
    align-items:center;
    border: solid 3px #F2F2F2;
    border-radius: 29px;
    font-weight: bold;
    font-size: 18px;
    right: 25px;
}

.filtres-serie section:hover {
    color:cornflowerblue;  
    border-color:cornflowerblue;   
    background-color:#F2F2F2 ;  
}
.economique {
    width: 193px;
    height: 50px;

}


.filtres-icon {
position: relative;
left: -10px;
    color: #0065FC;
    background-color: #DEEBFF;
    border-radius: 29px;
}

.familial {
    height: 50px;
    width: 151px;
    ;
}

.romantique {
    height: 50px;
    width:183px;

}

.animaux {
    height: 50px;
    width: 242px;
}

.recherche-end {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 500px;
    height:41px;
    margin-left: 9px;
    gap:12px;
    margin-bottom:41px;
    padding-left: 50px;
}

.recherche-end i {
    color: #0065FC;
   
}

and finally the media queries related to that section:

@media screen and (max-width:737px) {
 .filtres {
      display: flex;
      flex-direction: column;
      width: 100%;
  }
  .filtres-serie {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap:0;
  }

  .recherche-end {
      width: 100%;
  }
}

Thank you for reading this long post and for any help you will be able to provide me. I've looked up this kind of overlapping problem but couldn't find any clear way to untie my Gordian knot.

I'm of course at your disposition for any further precision or clarification if needed.

Regards,

Elrad

Solution

  • Below is the result I got after few modifications on both your html and CSS files (No page content was modified though), mainly CSS. As for the HTML file, I just added the link to CSS file then removed the <div class="recherche">...</div> tag which was surrounding all the page content.

    Here's the result on small screens

    As you can see, this is slightly different from your expected result in that the boxes around the links are wider. However The result remains unchanged on wide screens.

    The result remains unchanged on wide screens.

    The modifications I made on the CSS file are quite important, so I can't just list them all.

    Here are the final codes, both HTML and CSS.

    *{   
    box-sizing: border-box;
}

body {
   font-family: 'Raleway', sans-serif;
  margin: 0px;
   width: 100%;
   height:100%;
}
/* LIENS - MISE EN FORME*/
a:link {
   text-decoration: none; 
   color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {color: #0065FC ;}

a:active {
    text-decoration: none;
    color: black;
}

i {
    display: block
}
.filtres {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 35px;
}

.filtres-serie {
    display: flex;
    flex-direction: row;
    width: 845px;
    height:50px;
    gap: 25px;
}

.filtre-p {
    margin-top: 17px;
    margin-bottom: 14px;
}

.filtres-serie section {
    display: flex;
    flex-direction: row;
    align-items:center;
    border: solid 3px #F2F2F2;
    border-radius: 29px;
    font-weight: bold;
    font-size: 18px;
    right: 25px;
}

.filtres-serie section:hover {
    color:cornflowerblue;  
    border-color:cornflowerblue;   
    background-color:#F2F2F2 ;  
}

.economique {
    width: 193px;
    height: 50px;
}


.filtres-icon {
position: relative;
left: -10px;
    color: #0065FC;
    background-color: #DEEBFF;
    border-radius: 29px;
}

.familial {
    height: 50px;
    width: 151px;
    ;
}

.romantique {
    height: 50px;
    width:183px;

}

.animaux {
    height: 50px;
    width: 242px;
}

.recherche-end {
    display: flex;
    flex-direction: row;
    width: 500px;
    height:41px;
    margin-left: 9px;
    gap:12px;
    margin-bottom:41px;
    padding-left: 50px;
}

.recherche-end i {
    color: #0065FC;
   
}

@media screen and (max-width:737px) {
  body{
      margin-left: 30px;
      position: relative;
  }
 .filtres {
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-between;
  }
  .filtres-serie {
      min-width: 425px;
      width: 70%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap:12px;
  }

  .recherche-end {
      width: 100%;
      margin-top: 160px;
      padding-left: 0;
      gap: 12px;
  }
  .romantique, .animaux{
      display: flex;
      flex-direction: row;
      width: 80%;
      justify-content: flex-start;
      padding-right: 70px;
  }

}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booki</title>
    <link rel="stylesheet" href="styles.css" type="text/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=Raleway: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">
 <script src="https://kit.fontawesome.com/e943e673fe.js" crossorigin="anonymous"></script>
  </head>
    <body>
        <!-- <div class="recherche"> -->
            <section class="filtres">
                <h3>Filtres</h3>
                <div class="filtres-serie">
                        <section class="economique">
                            <span class="recherche-icon filtres-icon">
                            <i class="fa-solid fa-money-bill-wave fa-lg"></i>
                            </span>
                            <p class="filtre-p">Économique</p>
                        </section>
                        <section class="familial">
                            <span class="recherche-icon filtres-icon">
                            <i class="fa-solid fa-child-reaching fa-lg"></i>
                            </span>
                            <p class="filtre-p">Familial</p>
                        </section>
                    <section class="romantique">
                        <span class="recherche-icon filtres-icon">
                            <i class="fa-solid fa-heart fa-lg"></i>                   
                        </span>
                        <p class="filtre-p">Romantique</p>
                    </section>
                    <section class="animaux">
                        <span class="recherche-icon filtres-icon">
                        <i class="fa-solid fa-dog fa-lg"></i>
                        </span>
                        <p class="filtre-p">Animaux autorisés</p>
                    </section>
                </div>
            </section>
            <section class="recherche-end">
                <span >
                <i class="fa-solid fa-circle-info fa-xl"></i>
                </span>
                <p>Plus de 500 logements sont disponibles dans cette ville</p>         
            </section>   

        <!-- </div> -->

    </body>
</html>