How can I make my text in my HTML responsive? - javascript

So my images and boxes respond to the browser window size when I shrink it down but the text doesn't. I have tried many different things: percentages, ems and media queries but none seem to work. Maybe I am placing them wrong?
Here is the code for the CSS:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size:12px;
background: #394BA0;
color:#C180E4;
border-color:#88C6ED;
}
#wrapper {
width:62.7%;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 1199px;
}
#header {
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content-left {
width: 21%;
height: 61.4%;
border:1px solid #bbb;
float: left;
margin-top: 0.4%;
}
#content-main {
float: center;
width: 77%;
height: 61.3%;
border:1px solid #bbb;
margin-top: 0.5%;
margin-left:23%;
word-wrap: break-word;
}
#content-box1 {
width: 49%;
height: 26%;
margin-top: 1%;
float: left;
}
#content-box2 {
width: 49%;
height: 26%;
border:0px solid #bbb;
margin-top: 2%;
margin-left:51%;
float: center;
}
And Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Responsive Web design CSS.css">
<style>
a:link {color:#C180E4; font-style: normal;} /* unvisited link */
h2 {text-align:center}
h3 {text-align:center}
h3 {margin-top:50%}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><font size="6">Locked Down Data</font></h2>
</div>
<div id="content-box1">
<p><img src="download.jpg" width="99%" height="94%" border="1px" alt="picture1"></p>
</div>
<div id="content-box2">
<p><img src="foto-locked-down-iphone.jpg" width="99%" height="94%" border="1px" alt="picture2"></p>
</div>
<div id="content-left">
<h1><font size="5"> Menu</font></h1>
<p><font size="4"> -Home</font></p>
<p><font size="4"> -Threats</font></p>
<p><font size="4"> -Protection</font></p>
<p><font size="4"> -Practical Application</font></p>
<p><font size="4"> -Contact</font></p>
<h3><img src="it-security.png" width="79%" height="30%" alt="picture2" /></h3>
</div>
<div id="content-main">
Aenean ac turpis lectus. Vestibulum vel nulla eget libero tristique egestas venenatis id est. Mauris dictum ac nulla ullamcorper accumsan. Donec ipsum metus, molestie sit amet pretium a, adipiscing ac tellus. Nulla eu ullamcorper enim. Aliquam adipiscing facilisis erat ultrices aliquam. Nam eu libero est. Mauris semper urna rutrum, suscipit erat ut, varius lectus. Aenean ut orci lobortis ante ultricies facilisis. Curabitur tempus orci et eleifend fermentum. Etiam pharetra mauris sed consequat commodo. Quisque at lacus non massa consequat consequat mattis sit amet elit. Aliquam in tellus faucibus, aliquet mi at, faucibus neque.
<p><iframe width="56%" height="31%" src="http://www.youtube.com/embed/W90gNMoeY6c" frameborder="0" allowfullscreen></iframe></p>
</div>
</body>
</html>


The FlowType library (http://simplefocus.com/flowtype/) might be what you're looking for.

Related

HTML CSS JS formatting of display: none

Initially, my id="Gabel" display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
/* display: none; */
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')">
<img src="assets\image_1.jpg" alt="">
</button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

Possibly try toggling opacity instead of display
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
opacity: 0;
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.opacity === "0") {
x.style.opacity = "0";
} else {
x.style.opacity = "1";
}
}
</script>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')"><img src="assets\image_1.jpg"
alt=""></button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

Try using visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document.
Here, if you need more detail.

Try using
visibility:hidden;
and
visibility: visible;
to hide and show the element

Responsive Text Issue

I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?

Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>

It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.

navigation buttons shift when responsive menu is clicked

Below is a navigation bar with a logo (home button) to the left and a call button and menu dropdown button to the right. Once the menu button is clicked and the dropdown menu is opened the call button moves to the right on top of the menu button and the entire navigation bar turns into just 1 button. What is causing this shift?
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
</body>
</html>

The bars icon and phone icon are both using the same class, so they are both being assigned the same positioning properties. Make them separate classes so they can keep their unique positions instead of overlapping.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .iconBars, .topnav .iconPhone {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.iconBars, .topnav a.iconPhone {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .iconBars {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive .iconPhone {
position: absolute;
right: 47px;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="iconBars" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="iconPhone">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

I see that you have a media query with position: absolute
#media screen and (max-width: 600px) {
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
This solution is without position: absolute
I removed the above from css, i give in .topnav
.topnav {
display: flex;
justify-content: space-between;
}
And put both your menu links and icons inside a div. Take a look in the code above.
I hope it helps you.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
.menu-icons {
display: flex;
height:48px;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
<div>
Logo Name
Contact Us
Download
</div>
<div class="menu-icons">
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
`

Menu is not dropping down after user come back to the top of the page

On my website I've got a sticky, dropdown menu. When page is already loaded (without scrolling) or after user page scrolling there's everything ok - menu is dropping down.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'static',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The problem is when user comes back to the top of the page. Then menu is not dropping down. I have got two JS scripts. One allows to drop down the menu, the other one causes that the menu is sticked to the top of the page after user scrolling.
I found out that when I remove #content and #contentwrap from CSS, then menu is dropping down, but it appears behind the text. However, I wouldn't like to remove it.
Also, when I hover over ul > li > a called 'test' it moves to right a little. I would like to get rid of it.
What should I add or delete so as menu would work properly no matter where menu is displayed. Thanks!

You need to change the position to relative instead of static when you are scrolling up.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'relative',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>

wrap content inside parent element

I am having problem wrapping all contents inside a parent.My jQuery is working fine. What I intent to do is to make slideshow. Slideshow is working perfect but my problem is to wrap all content inside the "The red box".Rightnow section with id "allprojects" doesn't expand to fill all the contents of sections inside it. Ideally "#allprojects" should contract or expand according to content. This is how it appears
As I missing something obvious? please help me.
Bellow is my HTML.
<div id="projects">
<section id="allprojects" >
<section id="projectone" class="show">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo semper nulla, id ultricies erat tincidunt at. Vivamus malesuada justo eu massa fringilla, a lacinia justo hendrerit. Integer ornare ipsum non dictum suscipit. Quisque feugiat eleifend posuere. Maecenas porttitor non neque in tempus. Aliquam
</section>
<section id="projecttwo">
Nam quis ante tellus. Nullam iaculis elementum odio at convallis. Duis sodales porttitor dolor sed lacinia. Mauris sodales, ipsum eu tristique varius, erat mauris luctus tellus, ultrices viverra leo dui at nunc. Sed ac malesuada tellus. Nam quis lacus sit amet nibh egestas adipiscing. Interdum et malesuada fames ac ante
</section>
<section id="projectthree">
Nulla vitae volutpat nunc. Integer ornare enim vitae euismod viverra. Pellentesque ac hendrerit orci. Praesent eleifend augue luctus magna fringilla posuere. Nulla tincidunt volutpat semper. Morbi malesuada tempus vehicula. Proin non posuere metus. Aenean condimentum velit lorem. Donec at suscipit leo. Morbi
</section>
<section id="projectfour">
Vestibulum mattis metus rhoncus enim sollicitudin vehicula. Duis id nisl eget neque laoreet sagittis vitae eu justo. Sed et elit sit amet augue dictum dignissim. Cras neque ligula, dictum sed nibh ut, sodales malesuada mi. Duis feugiat semper nibh eget feugiat. In vestibulum augue nec felis tincidunt pulvinar
</section>
<span class="prev">«</span>
<span class="next">»</span>
</section>
</div>
CSS:
html{
background-size: cover;
background-color: #F2F2F2 ;
max-height: 100%;
margin: 0 auto;
}
body{
max-height: 100%;
background-color: #F2F2F2 ;
margin: 0 auto;
}
#allprojects section{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
.show{
opacity: 1 !important;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 26%;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 26%;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#allprojects{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: auto;
padding: 4%;
background-color: #F2F2F2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 5px solid #D8262E;
display: block;
}
#allprojects section{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}

You have positioned your sections with absolute. This takes them out of the natural flow and therefore, the wrapper has no idea of their volume and collapses.
You'll either need to specify the size of the slider, or do some trick like,
height: 0px; padding-bottom: 50%;
And hack it to get the ratio you want.

Elements that are absolute positioned are taken out of the DOM flow.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?redirect_from_locale=hr#Absolute_and_fixed
Your parent container does not know the height of the child elements, which is why the red box does not clear them.

Categories

Resources