Responsive works only in dev tools, not in the actual site

Question

I want to say first that I'm new to web dev, so maybe there's an obvious error I can't catch in my code... My problem is that the responsiveness of the site works only while I'm trying it in the dev tools, but in the actual site, there's a section that doesn't resize along with the others (section1 actually). This happens whit the tablet.css, because mobile and desktop work almost fine. I'm starting to have the doubt that maybe even mobile.css has this problem because I can't make the browser window so small, so I rely on the dev tools. I honestly can't figure why... I've tried in different browsers (Brave, FF Developer Edition, Microsoft Edge) and the story is the same. I leave you my code, I use three CSS for mobile, tablet, and desktop, since I thought with media queries it would have been too complicated. with dev tools in the site HTML:

    
    

    
      
      
      
    
    
      
      
      Bacce's Angle
    

    
      
        
        
          Home
          Chi sono
          Skills
          Interessi
          Contattami
        
        
        
      

      
        
       
       
       
    
        
          
            
ALESSANDRO BACCELLI
          
          Work in progress WEB DEVELOPER
        
      

    
      
        Chi sono
      
      
        
            
       
       
        
    
        
        
          Un ragazzo genovese di 24 anni, laureato in Scienze della Comunicazione da sempre appassionato di
            tecnologia e digitale. 

 Ho recentemente scoperto
            la mia passione per la programmazione grazie ai corsi di start2impact,
            iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... 


            Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
            lungo percorso.
             
        
      
        
      
      



      
      
        Skills
      
      
        
          Hard skills
          
            Inglese fluente
            HTML
            CSS
            Canva
          
        
        
          Soft skills
          
            Autonomia
            Fast learner
            Empatia
            Ascolto attivo
          
        
      
      

      
      
        Interessi
      
      
        
          
            Coding
            Fotografia digitale
            Grafica
            Scoprire nuove cose
            Cucina
            Video-games
          
        
        
          
            Self-growth
            Mindfulness
            Fitntess & Health
            Storia e Antropologia
            Lettura
            Ambiente
          
        
      
      

      
        
        E-mail
   |  Linkedin
  |  Start2impact

          
 ALESSANDRO BACCELLI 2020 ©

Style.CSS (desktop)

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        background-color: #E5DDC8;
        color: #1F1F1F;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #EBFDFF;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #B1C5E7;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #7699D4;
    }

    h1,
    h2 {
        font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
        color: #141414;
    }

    #hamburger {
        display: none;
    }

    .navflex {
        display: flex;
        background-color: #004369;
        font-size: 130%;
        color: #FFFFFF;
        width: 100%;
        height: 100px;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
    }

    .logo {
        height: 100%;
        margin-left: 150px;
    }

    nav ul {
        list-style-type: none;
        text-align: right;
        margin-right: 30px;
    }

    nav ul li {
        display: inline-block;
    }

    nav ul li a {
        display: inline-block;
        text-decoration: none;
        color: #FFFFFF;
        padding: 0px 25px;
    }

    nav a:hover {
        text-decoration: underline;
    }

    nav a:visited {
        color: #ffffff;
    }

    .main {
        display: flex;


    }

    .welcome {
        display: none;
        color: #FFFFFF;
        font-size: 3em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        text-shadow: 2px 2px 2px #1F1F1F;
    }

    .welcome h1 {
        white-space: nowrap;
        color: #ffffff;
    }

    .main img {
        width: 100%;
        position: relative;
    }

    .divide {
        height: 900px;
        margin-top: 120px;
    }

    .heading {
        font-family: "Montserrat",
            "Helvetica",
            "Arial",
            sans-serif;
        color: #141414;
        font-size: 200%;
        margin-bottom: 80px;
        text-align: center;
    }

    .section1 {
        display: flex;
        justify-content: center;
        width: 958px;
        margin: 0 auto;
    }

    .profile {
        text-align: center;
    }

    .biography {
        align-self: center;
        font-size: 140%;
        margin-left: 80px;
    }

    .biography a {
        color: #01949A;
        text-decoration: none;
    }

    .biography a:hover {
        color: #004369;
        text-decoration: underline;
    }

    .download {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .biography button {
        font-size: 130%;
        padding: 15px;
        background-color: #01949A;
        border-radius: 10px;
        border: none;
        margin-top: 40px;
    }

    .biography button a {
        color: #ffffff;
        text-decoration: none;
    }

    .biography button a:hover {
        color: #ffffff;
        text-decoration: none;
        background-color: #004369;
    }

    .biography button:hover {
        background-color: #004369;
    }

    .section2 {
        display: flex;
        margin: 0 auto;
        justify-content: space-evenly;
        font-size: 200%;

    }

    .colordifferent {
        background-color: #E5F9E0;
        padding-top: 120px;
    }

    .margin {
        margin-bottom: 145px;
    }

    .hard h2,
    .soft h2 {
        margin-bottom: 25px;

    }

    .section2 ul {
        list-style-type: none;
        margin-bottom: 140px;
    }

    .section2 li {
        margin-bottom: 25px;
        ;
    }

    .section2 ul li::before {
        content: "\2705";
        margin-right: 25px;
    }

    .section2 ul .modifiedli::before {
        content: "🚧";
    }

    .section2 ul #programmazione::before {
        content: "👨🏻‍💻";
    }

    .section2 ul #foto::before {
        content: "📸";
    }

    .section2 ul #grafica::before {
        content: "🎨";
    }

    .section2 ul #discover::before {
        content: "🗺️";
    }

    .section2 ul #cucina::before {
        content: "👨🏻‍🍳";
    }

    .section2 ul #videogiochi::before {
        content: "🎮";
    }

    .section2 ul #self::before {
        content: "📈";
    }

    .section2 ul #mind::before {
        content: "🧘🏻‍♂️";
    }

    .section2 ul #fit::before {
        content: "🏋🏻";
    }

    .section2 ul #storia::before {
        content: "🏺";
    }

    .section2 ul #book::before {
        content: "📖";
    }

    .section2 ul #eco::before {
        content: "♻️";
    }

    .bottomodif {
        margin-bottom: 110px;
    }

    footer {
        display: flex;
        text-align: center;
        align-items: center;
        height: 350px;
        background-color: #004369;
        color: #FFFFFF;
        font-size: 130%;
    }

    .foot {
        width: 33.33333%;
    }

    footer a {
        color: #FFFFFF;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }

    .not {
        display: none;
    }

 Mobile:

body {
    display: flex;
    flex-direction: column;
    font-size: 90%;
    width: 100%;
}

nav {
    width: 100%;
}

nav ul {
    display: none;
}

#hamburger {
    visibility: hidden;
}

label,
label::before,
label::after {

    width: 100px;
    height: 15px;
    border-radius: 5px;
    background: white;
    transition: 0.6s;
    -webkit-transition: 0.6s;
}

label {
    cursor: pointer;

}

label::before {
    content: "";
    transform: translateY(-30px);
}

label::after {
    content: "";
    transform: translateY(30px);
}

#hamburger:checked+label {
    width: 0px;
}

#hamburger:checked+label::before {
    transform: rotate(45deg) translate(0px);
}

#hamburger:checked+label::after {
    transform: rotate(-45deg) translate(0px);
}

.logo {
    margin-left: 25px;
}

.main {
    display: block;
}

.main img {
    display: block;
    min-height: 100%;
    min-width: 100%;
    position: static;
    overflow: hidden;
}

.welcome {
    display: none;
}

.divide {
    height: fit-content;
    width: 100%;
}



.section1,
.section2 {
    display: block;
    width: 100%;
    height: initial;
    overflow-y: auto;

}

.profile img {

    height: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

.biography {
    display: block;
    width: 90%;
    text-align: left;
    margin-left: 5px;
    margin: 0 auto;
}

.hard,
.soft {
    text-align: center;
    margin-bottom: 80px;
}

.hard h2,
.soft h2 {
    margin-bottom: 50px;
}

.hard ul,
.soft ul {
    text-align: left;
    width: 70%;
    margin: auto;
    word-wrap: break-word;

}

.hard ul li,
.soft ul li {
    padding-left: 65px;
    text-indent: -65px;
}

.inte,
.ressi {
    margin-bottom: 0;
}

.ressi ul {
    margin-bottom: 150px;

}

.history {
    padding-left: 10px;
}

.bracket {
    display: none;
}

.not {
    display: unset;
}

Tablet:

body {
        width: 100%;
    }

    .divide,
    .section1 {
        width: 100%;
    }

    .first {
        height: 1200px;
        flex-direction: column;
    }

    .section1 {
        width: 90%;
        display: block;
    }

    .profile {
        margin-bottom: 70px;
    }

    .biography {
        margin: 0 auto;
    }

    .biography button {
        margin-top: 70px;
    }

Thanks everyone for the help!

tacoshy · Accepted Answer

As you main issue has been fixed, I try to adress your question from the comments how to use media queries.

You only use one css file for everything. For tablet and mobile devices you use the media queries as below. You start a media query with @media followed by only screen to adress only screens. Then you apply rules like and (min-width) and/or and (max-width) followed by the css opening tag { and closed with the css closing tag }. inbetween the css the same way you write it normally.

/* your normal css here that should apply to every screen width as well as your desktop css that is not covered with the media queries for mobile and tablet */

@media only screen
  and (max-width: 480px) { /* <-opening tag media query */
    /* your mobile css here 
       as example: */

    .class { /* <-opening tag css selector */
      background-color: blue;
    } /* closing tag css selector */
    
    #id { /* <-opening tag css selector */
      background-color: red;
    } /* closing tag css selector */

} /* <-closing tag media query */

@media only screen
  and (min-width: 481px)
  and (max-width: 957px) { /* <-opening tag media query */
    /* your tablet css here 
       as example: */

    .class { /* <-opening tag css selector */
      background-color: blue;
    } /* closing tag css selector */
    
    #id { /* <-opening tag css selector */
      background-color: red;
    } /* closing tag css selector */

} /* <-closing tag media query */

Responsive works only in dev tools, not in the actual site

Answers (1)

Related Questions