Currently working on building a responsive HTML page and facing a slight challenge.
I have two divs that I want to display side by side.
If the width drops below X, the second div should be hidden.
This part is functioning as expected.
However, when inserting content longer than the width, word-wrap kicks in creating some white space at the top of the first div.
Below is the code snippet:
To remove the white space at the top (while keeping the divs inline), here is a modified version with the required adjustments:
$(document).ready(function() {
$('#menu').click(function(e) {
if( $('#menu').text() == "SHOW INFO" )
$('#menu').text('HIDE INFO');
else
$('#menu').text('SHOW INFO');
});Updated CSS Code:
/* Add your updated styles here */
@media only screen and (min-width: 100px) and (max-width: 700px)
{
.content
{
background-color:black;
width:100%;
height:100%;
}
.info { display:none; }
.menu
{
display:block;
height:40px;
line-height: 40px;
font-family: Verdana;
font-weight: normal;
font-size: 18px;
color: #D00355;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.menu:hover
{
background-color:#D00355;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
line-height: 40px;
font-family: Verdana;
font-weight: normal;
font-size: 18px;
color: white;
position: relative;
text-align: center;
cursor:pointer;
}<html>
<head>
<title>Responsive Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="info">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div class="menu" id="menu" name="menu">SHOW INFO</div>
</div>
</body>
</html>