CODEWITHSUNDEEP
cssresponsive-designmedia-queries
codebwoy
codebwoy

Reputation: 145

Why Are There Horizontal Scrollbars on My Responsive Webpage

My website behaves responsively, so why are there horizontal scroll-bars? I am confused by this! What does it take for the horizontal scrollbars to disappear? Also, the header doesn't shrink at the 320px mark on mobile devices, even though it does it when tested in the code editor....???

Here is the link to my CodePen: https://codepen.io/IDCoder/pen/Xevyqq

Here is my HTML code: 

<html>
  <title></title>
  <head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
    <div class="Main">
        <div class="Header Box">
          <div id="One"> 
            <img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" width="1000" height="166"/>
          </div>      
        </div>

        <div class = "Second Row">
          <div class="About Us">
          <h1>Technology you can trust</h1>

  <p>Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BB​B (Better Business Bureau) with an A+ rating.</p>

  <p>Ethersonic specializes in Computer  diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair</p>
        </div>
        <div class="BBB VOSB">
          <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" width="200" height="124"/>
        </div>
      </div>
        <div class="Third Row">
          <div id="Computers">
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"/>
            <p>
              Desktop and Laptop Repair
            </p>
          </div>
          <div id="Security">
          <img src="https://s1.postimg.org/8j0ejlsp7j/Security_Cameras.jpg
" width="300" height="201"/>
            <p>
             Security Camera Systems | <br>
Access Controls Systems |
Intercom Systems 
            </p>
          </div>
          <div id="Networking">
          <img src="https://s1.postimg.org/7ymhfqjm3z/Networking_2.jpg" width="300" height="220"/>
            <p>
             Network Installation |
Low Voltage Cabling 
            </p>
          </div>
      </div>
      <div class="Fourth Row">
        <div class="container">
          <div id="slider">
      <figure>
 <img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg"/>
<img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg"/>
<img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg"/>
<img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg"/>
<img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg"/>
</figure>        
      </div>
        </div>
        <div>
      <div class ="Slideshow Description">
        <p>
          We are Installation Experts! <br>
Offering Customized Installation for Both Residentials and Commercial Properties
        </p>
      </div>
    </div>
   </div>
      <div class="Footer">
         <div>
 © Ethersonic Technologies LLC. All rights reserved.
        </div
   </div>
  </body>
</html>

And here is my CSS code:

.Main{
  display: grid;
  grid-template-columns: 1/1r;
  /*background-color: green;*/
  margin: 5px 125px 0 75px;
  grid-gap: 25px;
} 


.Header.Box {
  display: grid;
    grid-template-columns: 100%;
  /*background-color: red;*/
  grid-gap: 15px;
}



.About.Us{
  font-size: 15px
}

.BBB.VOSB{
  text-align: right;
  padding-right: 10px;
}

#One, #Two, #Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;  
}

.Second.Row{
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
}

.Third.Row{
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
  /*background-color: green;*/
}

#Computers, #Security, #Networking{
   /*border-style: solid;*/
    border-color: black;
  border-width: 1px;
  border-radius: 15px;
  padding: 5px;
  text-align: center;

}


.Fourth.Row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 25px;
  /*background-color: blue;*/
}

.container{
  max-width: 500px; 
  /*background-color: blue;*/

}

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}


.Slideshow.Description{
  font-size: 1.25em;
}

.Footer{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 25px;
  text-align: center;
  padding-bottom: 20px;  
  padding-top: 20px;
  font-size: 17px;
  /*background-color: yellow;*/
}



 @media (min-width: 500px){
.Header.Box{ 
  display: grid;
    grid-template-columns: 1fr;
    } 
}

  #One img{
    width: 100%;
    height: auto;    
  }


@media (min-width: 500px) {
.Second.Row{
  display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 320px) {
h1{
  display: grid;
    grid-template-columns: 1fr 1fr;
  font-size: h2;
  }

}

@media (max-width: 320px) {
#One img{
  display: grid;
    grid-template-columns: 1fr;
  width: 200px;
  height: auto;
  }

}


@media (min-width: 500px) {
.Third.Row{
  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (min-width: 500px) {
.Fourth.Row{
  display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

Upvotes: 0

Views: 34

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

You have two problems that are causing this.

The first problem is one of specificity. You you have a lot of hard-coded widths in your imagery (such as <img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" width="1000" height="166" />). That's a hard-coded width of 1000px; far more than a media query of 320px can handle. Instead, I recommend using a percentage-based width, such as 100%.

Also note that while a media query would indeed add greater specificity than a regular CSS selector (and thus override it), an inline width attribute like this takes the highest possible level of specificity.

You can override this by adding !important to your media query width declarations, but I'd strongly suggest removing your fixed widths in your images instead, and using new CSS selectors to target the images.

The second problem is your hard-coded margin attribute on .Main, which adds a margin of 75px on the left, and 125px on the right. Sure, that might work for large screens, but on a device with only 320px in total, you're rendering almost two thirds of your width essentially useless. You should significantly reduce these margins, or alternatively, use percentage-based values so they'll adapt.

Also note that 320px is far too small for a standard mobile media query; pretty much the only phones you'll be hitting are old Blackberries. I'd strongly recommend checking out CSS Tricks for a list of media queries for standard devices. The standard for most tablets is 768px, and the standard for most phones is 576px.

Here's an updated snippet, with all of the hard-coded width and height attributes removed, and a simple img declaration added to ensure that they don't escape the bounds of their parent:

img {
  max-width: 100%;
  width: 100%;
} 


img {
  max-width: 100%;
  width: 100%;
}

.Main {
  display: grid;
  grid-template-columns: 1/1r;
  /*background-color: green;*/
  margin: 5px 125px 0 75px;
  grid-gap: 25px;
}

.Header.Box {
  display: grid;
  grid-template-columns: 100%;
  /*background-color: red;*/
  grid-gap: 15px;
}

.About.Us {
  font-size: 15px
}

.BBB.VOSB {
  text-align: right;
  padding-right: 10px;
}

#One,
#Two,
#Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.Second.Row {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
}

.Third.Row {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
  /*background-color: green;*/
}

#Computers,
#Security,
#Networking {
  /*border-style: solid;*/
  border-color: black;
  border-width: 1px;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
}

.Fourth.Row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 25px;
  /*background-color: blue;*/
}

.container {
  max-width: 500px;
  /*background-color: blue;*/
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

.Slideshow.Description {
  font-size: 1.25em;
}

.Footer {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 25px;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  font-size: 17px;
  /*background-color: yellow;*/
}

@media (min-width: 500px) {
  .Header.Box {
    display: grid;
    grid-template-columns: 1fr;
  }
}

#One img {
  width: 100%;
  height: auto;
}

@media (min-width: 500px) {
  .Second.Row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 320px) {
  h1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: h2;
  }
}

@media (max-width: 320px) {
  #One img {
    display: grid;
    grid-template-columns: 1fr;
    width: 200px;
    height: auto;
  }
}

@media (min-width: 500px) {
  .Third.Row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 500px) {
  .Fourth.Row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
<html>
<title></title>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="Main">
    <div class="Header Box">
      <div id="One">
        <img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" />
      </div>
    </div>

    <div class="Second Row">
      <div class="About Us">
        <h1>Technology you can trust</h1>

        <p>Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BB​B (Better Business Bureau) with an A+ rating.</p>

        <p>Ethersonic specializes in Computer diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair</p>
      </div>
      <div class="BBB VOSB">
        <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" />
      </div>
    </div>
    <div class="Third Row">
      <div id="Computers">
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" />
        <p>
          Desktop and Laptop Repair
        </p>
      </div>
      <div id="Security">
        <img src="https://s1.postimg.org/8j0ejlsp7j/Security_Cameras.jpg
" />
        <p>
          Security Camera Systems | <br> Access Controls Systems | Intercom Systems
        </p>
      </div>
      <div id="Networking">
        <img src="https://s1.postimg.org/7ymhfqjm3z/Networking_2.jpg" />
        <p>
          Network Installation | Low Voltage Cabling
        </p>
      </div>
    </div>
    <div class="Fourth Row">
      <div class="container">
        <div id="slider">
          <figure>
            <img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg" />
            <img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg" />
            <img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg" />
            <img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg" />
            <img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg" />
          </figure>
        </div>
      </div>
      <div>
        <div class="Slideshow Description">
          <p>
            We are Installation Experts! <br> Offering Customized Installation for Both Residentials and Commercial Properties
          </p>
        </div>
      </div>
    </div>
    <div class="Footer">
      <div>
        © Ethersonic Technologies LLC. All rights reserved.
      </div>
    </div>
</body>

</html>

Hope this helps! :)

Upvotes: 1

Related Questions