Margin issue only in a certain media query

I am running into a strange issue that is throwing off my whole page in the media query range of @media screen and (min-width: 640px) and (max-width:840px). For some reason it looks like I am getting a margin-left applied to the first box-container that I have, but in my code there isn't margin-left set. I tried to apply the start of the div blue-box-container right after the sibling above it to eliminate the white-space, but that did not help.

Does anyone have any idea why I would be getting the white-space to the left of my first blue box?

If someone needs to see this live, I can add the website inside of my comments. Please comment if wanting it.

Margin issue only in a certain media query

.blue-box-container {     width: 100%;     height: 100%; } .dark-blue-box, .light-blue-box {     height: 33%;     width: 50%;     display: inline-block; } .dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {     display: block;     font-size: 1.1em;     padding-top: 10px; } .dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {     display: block;     font-size: .9em;     padding-top: 5px;     clear: both; } .dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap {     padding: 3% 6%; } .dark-blue-box:hover .box-title, .light-blue-box:hover .box-title {     padding-top: 7%; } .dark-blue-box:nth-child(3){     background-color: #8fc9d6;  } .light-blue-box:nth-child(4){     background-color: #45a5ba; } .dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{     background-color: purple; } .dark-blue-box:nth-child(5){     background-color: #45a5ba;  } .light-blue-box:nth-child(6){     background-color: #8fc9d6; } .insideBoxWrap {     padding: 10% 30px; } .box-title {     font-size: 2em; } .box-description {     padding-top: 5px;     font-size: 1.1em; } /*------Home Icons ------*/ .home-icon img {     height: 52px;     width: 52px;     padding-right: 6%;     padding-bottom: 10px;     float: left; } .dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img {     height: 76px;     width: 76px; } 

HTML - rather than attaching all of it for all the blocks, I have only applied two blocks to demonstrate the general sequence.

<div class="blue-box-container">   <div class="dark-blue-box">     <div class="insideBoxWrap">         <div class="home-icon"><img src="/icons/screen6.png" alt=""></div>         <div class="box-title">Brand Strategy</div>         <div class="box-description">Digital Roadmap</div>         <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs         fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>     </div>   </div><div class="light-blue-box">     <div class="insideBoxWrap">         <div class="home-icon"><img src="/icons/web2.png" alt=""></div>         <div class="box-title">Development</div>         <div class="box-description">That Outperforms</div>         <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs         fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>     </div>   </div>  </div> 

Replay

There are multiple solutions possible, I would suggest adding float to the boxes:

.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
    float: left;
}

It fixes your issue.

I think

.insideBoxWrap {
    padding: 10% 30px;
}

is causing the white space issue. You are giving 30px padding on left and right so all your elements inside .insideBoxWrap are moving to the right by 30px. And since there is no background color on insideBoxWrap, white space is appearing.

You can add a negative value on that box to eliminate the white space.

.insideBoxWrap {
    position: relative;
    left: -10px;
}

Category: html Time: 2016-01-16 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.099 (s). 12 q(s)