Problem with the responsive on small screen on Website-Twitter bootstrap

RitalCharmant
January 29, 2021
139 views
1 vote
2 Answers

I have a problem with the responsive of very small screen.
Let me explain: on very small screens, my containers are reduced more and more until they no longer exist, and they are reduced to the right. And I don’t understand why yet I used bootstrap. If you could explain to me.

Screenshot problem responsive 1

Screenshot problem responsive 2

Thank you in advance for your solutions!

Here is my html and code :

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "poppins", sans-serif;
}
h1 {
    margin-top: 20px;
    color: #1070b4;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
}
.logo
{
    width: 200px;
}
 
.navbar-nav {
    margin: 0 auto;
}
 
.nav-item .nav-link
{
    color: #278CD3;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase; 
    text-decoration: none;
    border-bottom: 3px solid transparent;
    
}

.nav-link:hover {
    border-bottom: 3px solid #F48F17;
    color: #052e6d;
}
.container-fluid {
    background-color: #1070b4;
    height: 550px;
}

ul {
    display: flex;
    justify-content: center;
}
ul li {
    list-style: none;
    font-size: 40px;

}
ul li a {
    padding: 25px;
    color: #fff;
}

.photo_beat {
    width: 400px;
    height: 300px;
    border-radius: 20px;
    box-shadow: 3px 3px 3px black;   
}
p {    
     
    color: white;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .12em;
}
.big-title {
    font-size: 25px;
    text-transform: uppercase;
    color: rgb(111, 218, 250);
}
#about {
    display: grid;
}
.vertical {
    margin: auto;

}
body {
    font-family: "poppins", sans-serif;
}

.sound {
    text-align: center;
    margin-bottom: 20px;
}
#carouselExemple {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    
}
.carousel-item iframe {
    border-radius: 15px;
    width: 100%;
    height: 600px;
}
.carousel-control-prev {
    margin: auto 0;
    height: 50%;
}
.carousel-control-next {
    margin: auto 0;
    height: 50%;
}

@media screen and (max-width: 992px) {
    .container-fluid {
        height: 650px;
    }
}

@media screen and (max-width: 440px) {
    .container-fluid {
        width: auto;
    }
    .photo_beat {
        width: 350px;
        height: 250px;
        text-align: center;
    }
}
@media screen and (max-width: 399px) {
    a.navbar-brand {
       margin: 0 auto;
    }
    ul.navbar-nav {
        margin-top: 10px;;
    }
}
@media screen and (max-width: 807px) {
    p {
        font-size: 14px;
        margin-top: 25px;
    }
}
@media screen and (max-width: 400px) {

    .vertical p {
        font-size: 12px;
    }
}

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>PierroAlaProd | Beatmaker Production</title>
         <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="style.css" />
         <script src="https://kit.fontawesome.com/019d409e34.js" crossorigin="anonymous"></script>
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>


    </head>

    <header>
        <div class="container">
            <nav class="navbar navbar-expand-md">
                <a class="navbar-brand" href="index.html"><img class="logo" src="img/Signature logo.png" alt="Logo"/></a>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="index.html">Accueil</a></li>
                        <li class="nav-item"><a class="nav-link" href="#sound">Instrumentales</a></li>
                        <li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
                        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                    </ul>
            </nav>
        </div>
    </header>

    <body>
        <div class="citations">
            <div class="container-fluid">
                <div class="container d-flex h-100">
                    <div class="row align-self-center">
                        <div class="col-md-12 col-lg-6">
                            <img class="photo_beat" src="img/beatmaking1.jpg" alt="Photo Beatmaker"/>
                        </div>
                        <div class="col-md-12 col-lg-6">
                            <p>“La musique commence là où s'arrête le pouvoir des mots.” <br> - Richard Wagner <br> <br>“La musique est la langue des émotions.”<br> - Emmanuel Kant <br><br> “La vie sans musique est tout simplement une erreur, une fatigue, un exil.” <br> - Friedrich Nietzsche </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <div class="sound">
            <div id="sound" class="container">
                <h1>Instrumentales</h1>
                <div id="carouselExemple" class="carousel slide" data-ride="carousel" data-interval="8000">

                  <ol class="carousel-indicators">
                      <li data-target="#carouselExemple" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExemple" data-slide-to="1"></li>
                      <li data-target="#carouselExemple" data-slide-to="2"></li>
                      <li data-target="#carouselExemple" data-slide-to="3"></li>
                  </ol>
          
          
                  <div class="carousel-inner">
          
                      <div class="carousel-item active">
                        <iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/925656313&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/rain" title="rain" target="_blank" style="color: #cccccc; text-decoration: none;">rain</a></div>
                              
                      </div>
          
                      <div class="carousel-item">
                        <iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/775177567&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/naruto-sadness-and-sorrow" title="Naruto (Sadness and Sorrow)" target="_blank" style="color: #cccccc; text-decoration: none;">Naruto (Sadness and Sorrow)</a></div>
                            
                      </div>
          
                      <div class="carousel-item">
                        <iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/879846058%3Fsecret_token%3Ds-bJFTVUbSC5h&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/broken/s-bJFTVUbSC5h" title="broken" target="_blank" style="color: #cccccc; text-decoration: none;">broken</a></div>
                      </div>

                      <div class="carousel-item">
                        <iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/905301598&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/la-famiglia" title="La Famiglia" target="_blank" style="color: #cccccc; text-decoration: none;">La Famiglia</a></div>
                      </div>
          
                  </div>
          
                  <a href="#carouselExemple" class="carousel-control-prev" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="ture"></span>
                      <span class="sr-only">Previous</span>
                  </a>
                  <a href="#carouselExemple" class="carousel-control-next" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                  </a>
          
              </div>
            </div>
        </div>

        <div class="propos">
            <div id="about" class="container-fluid">
                <div class="container">
                    <div class="vertical">
                        <p></p>
                        <ul class="liens">
                            <li><a href="https://www.facebook.com" target="_blank"> <i class="fab fa-facebook-square"></i> </a></li>
                            <li><a href="https://twitter.com" target="_blank"> <i class="fab fa-twitter-square"></i></a></li>
                            <li><a href="https://github.com" target="_blank"> <i class="fab fa-github-square"></i></a></li>
                            <li><a href="https://soundcloud.com/pierroalaprod" target="_blank" alt="Soundclound PierroAlaProd"> </i><i class="fab fa-soundcloud"></i></a></li>
                        </ul>
                
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

Answers

- MiguelCardonaPolo
- January 29, 2021 at 11:03 pm
- 0 votes
0
I believe the problem lies on the nav which is not adjusting to the change in viewport width. Maybe try reducing the font size or build a navigation menu for small devices.

You can look at some advice here: https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Login or Signup to reply.

- BrittanyLayneRapheal
- January 29, 2021 at 11:22 pm
- 0 votes
0
In your css, you have the padding set to 25px for your ul li a, which is causing your navigation width to be wider than the viewport:
```
ul li a {
    padding: 25px;
    color: #fff;
}
```
Adjusting that to a different padding for smaller widths should do the trick, or – like Miguel said – you can make it a collapsable nav https://getbootstrap.com/docs/4.0/components/navbar/#nav
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.