CODEWITHSUNDEEP
csshtmlresponsive-design
anoopcr
anoopcr

Reputation: 53

Issue with @media query in CSS with responsive design

In my below, I am adding two divs inside a main div called block and arranging one in left and another in right.I am putting a border for the main div block

But the problem I am facing here is, when the screen size is below 300px, the two child div will arrange one by one, but the border not aligning properly. Border not covering two child divs entirely. How to resolve this border issue.

Another issue is, this code not working in IE (checking with IE11). what parameter I have to add \ modify to work this with IE

Fiddle Setup

HTML:

<!DOCTYPE html>
<html>
<body>
    <div class="block">
        <div class="input-quest">Your devices are sequential ?</div>
        <div class="input-resp">
            <input type="radio" name="button" value="Yes" /><label>Yes</label>
            <input type="radio" name="button" value="No"  /><label>No</label>
        </div>
    </div>

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</body>
</html>

CSS:

.block {
width: inherit;
width: 96%; 
max-width: 700px;
margin: auto;
border-style:solid;
border-width:2px;
border-color:#ddd;
height:20%;
padding:1%;

}
.input-quest {
width: 60%;
float:left;
}
.input-resp {
width: 40%;
text-align: center;
float:right;
}

@media (max-width:300px) {

.input-resp {
background-color:red;
width: 100%;
float:left;
text-align:left;
}

.input-quest {
background-color:green;
width: 100%;
float:left;
text-align:left;
}

}

Upvotes: 0

Views: 400

Answers (1)

disinfor
disinfor

Reputation: 11533

You have your height set to 20px on your .block div. So you would either need to remove that in the @media call or set a new height. You also should clear some of your floats in your main CSS and remove them in your @media query.

See your updated jsfiddle: http://jsfiddle.net/XYMtx/1/

Upvotes: 2

Related Questions