The document appears a strange white line in right of the page.All my width is 100% or with margin to be centered but this line is already here and I can not understand why.I sow in another part of the stackOverflow that position:relative is problem in navigation bar or other elements in HTML but I try just to delete them but that do not solve the problem.At the end how can I remove this line?
/* Global */
#import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 17px;
font-family: "Roboto", sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.colored {
color: #e86c00;
}
/* Local */
/* navigation bar */
#headNavigation {
display: block;
height: 110px;
width: 100%;
background: #222;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
position: relative;
bottom: 50px;
}
ul li {
display: inline-block;
padding: 25px 20px 0 20px;
text-align: center;
opacity: 0.2;
position: relative;
bottom: 20px;
left: 20%;
}
ul li a {
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
nav h1 {
color: #fff;
position: relative;
top: 30px;
left: 30px;
}
.bi {
display: block;
margin: 10px auto;
}
ul li:hover,
ul li:hover .menu-title {
opacity: 1;
color: #e86c00;
}
.active a {
color: #e86c00;
}
.active {
opacity: 1;
}
/* section with photos */
.slider {
position: relative;
overflow: hidden;
height: 80vh;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.content {
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.6);
color: #333;
padding: 35px;
}
.slide .content h1 {
margin-bottom: 10px;
}
.slide.current .content {
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
position: absolute;
top: 50%;
right: 15px;
}
.buttons button#prev {
position: absolute;
top: 50%;
left: 15px;
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px 12px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
.slide.current {
opacity: 1;
}
.slide:first-child {
background: url(../photos/pic1.jpg) no-repeat center center/cover;
}
.slide:nth-child(2) {
background: url(../photos/pic8.jpg) no-repeat center center/cover;
}
.slide:nth-child(3) {
background: url(../photos/pic3.jpg) no-repeat center center/cover;
}
.slide:nth-child(4) {
background: url(../photos/pic7.jpg) no-repeat center center/cover;
}
.slide:nth-child(5) {
background: url(../photos/pic5.jpg) no-repeat center center/cover;
}
.slide:nth-child(6) {
background: url(../photos/pic6.jpg) no-repeat center center/cover;
}
/* artivle for subscribe */
.sub {
height: 150px;
width: 100%;
color: #fff;
background-color: #222222;
}
#subscribeForm {
float: right;
}
#subscribeForm input[type="email"] {
height: 40px;
width: 350px;
position: relative;
right: 150px;
border: none;
text-align: center;
}
#subscribeForm input[type="submit"] {
height: 45px;
width: 150px;
position: relative;
right: 140px;
background-color: #eb4034;
border: none;
color: #fff;
}
.sub h1 {
position: relative;
top: 50px;
left: 25px;
}
/* article with courses */
.courses {
position: relative;
overflow: hidden;
height: auto;
width: 100%;
text-align: center;
}
.course {
display: block;
height: 250px;
width: 30%;
float: left;
margin: 60px 0 50px 35px;
}
.courseImage {
display: block;
height: 150px;
width: 60%;
margin: 0 auto 15px;
}
.course a {
text-decoration: none;
color: #e86c00;
}
/* Created by JS */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>
<header>
<nav id="headNavigation">
<h1>
Be
<span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
>
</h1>
<ul>
<li class="active">
<svg
class="bi bi-house"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
clip-rule="evenodd"
/>
</svg>
Home
</li>
<li>
<svg
class="bi bi-eject"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
clip-rule="evenodd"
/>
</svg>
About
</li>
<li>
<svg
class="bi bi-chat"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
clip-rule="evenodd"
/>
</svg>
Feedback
</li>
<li>
<svg
class="bi bi-box-arrow-in-right"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
clip-rule="evenodd"
/>
</svg>
Log In
</li>
</ul>
</nav>
<div class="lighter"></div>
</header>
<section>
<div class="slider">
<div class="slide current">
<div class="content">
<h1>Henry Park</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Peter Bottom(wizard)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Annie Granger</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Miriam (Mitzi)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Julie Wothson</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Mabel Tven</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left "></i></button>
<button id="next"><i class="fas fa-arrow-right "></i></button>
</div>
</section>
<article>
<div class="sub">
<h1>
Please <span class="colored">Subscribe</span> for
<span class="colored">our</span> site
</h1>
<form id="subscribeForm">
<input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
<input type="submit" value="Submit" />
</form>
</div>
</article>
<article>
<div class="container">
<div class="courses">
<div class="course">
<div class="image">
<img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
</div>
Photo Shop course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
</div>
Photo Editing Course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
</div>
Be into photo
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
</div>
Photo marketing with Ed Brand
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
</div>
Creativity with Adam Bauman
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
</div>
</div>
</article>
<footer>
<h5>NO COPYRIGHT ©</h5>
<div class="sectionOfPartners">
<h6>Partners</h6>
<p>Partner 1</p>
<p>Partner 2</p>
<p>Partner 3</p>
<p>Partner 4</p>
<p>Partner 5</p>
<p>Partner 6</p>
<p>Partner 7</p>
</div>
<div class="sectionOfContacts">
<p>Oficial telephone +XXX / XXX XXXX</p>
<p>Contact with workers +XXX / XXX XXXX</p>
<p>Other Contacts Contact</p>
</div>
</footer>
There are 2 headers (nav h1 & .sub h1 )and ul li have overflow issue because of the relative position.
nav h1 & .sub h1: left -> padding-left
ul li: remove left:20%
/* Global */
#import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 17px;
font-family: "Roboto", sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.colored {
color: #e86c00;
}
/* Local */
/* navigation bar */
#headNavigation {
display: block;
height: 110px;
width: 100%;
background: #222;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
position: relative;
bottom: 50px;
}
ul li {
display: inline-block;
padding: 25px 20px 0 20px;
text-align: center;
opacity: 0.2;
position: relative;
bottom: 20px;
}
ul li a {
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
nav h1 {
color: #fff;
position: relative;
top: 30px;
padding-left: 30px;
}
.bi {
display: block;
margin: 10px auto;
}
ul li:hover,
ul li:hover .menu-title {
opacity: 1;
color: #e86c00;
}
.active a {
color: #e86c00;
}
.active {
opacity: 1;
}
/* section with photos */
.slider {
position: relative;
overflow: hidden;
height: 80vh;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.content {
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.6);
color: #333;
padding: 35px;
}
.slide .content h1 {
margin-bottom: 10px;
}
.slide.current .content {
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
position: absolute;
top: 50%;
right: 15px;
}
.buttons button#prev {
position: absolute;
top: 50%;
left: 15px;
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px 12px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
.slide.current {
opacity: 1;
}
.slide:first-child {
background: url(../photos/pic1.jpg) no-repeat center center/cover;
}
.slide:nth-child(2) {
background: url(../photos/pic8.jpg) no-repeat center center/cover;
}
.slide:nth-child(3) {
background: url(../photos/pic3.jpg) no-repeat center center/cover;
}
.slide:nth-child(4) {
background: url(../photos/pic7.jpg) no-repeat center center/cover;
}
.slide:nth-child(5) {
background: url(../photos/pic5.jpg) no-repeat center center/cover;
}
.slide:nth-child(6) {
background: url(../photos/pic6.jpg) no-repeat center center/cover;
}
/* artivle for subscribe */
.sub {
height: 150px;
width: 100%;
color: #fff;
background-color: #222222;
}
#subscribeForm {
float: right;
}
#subscribeForm input[type="email"] {
height: 40px;
width: 350px;
position: relative;
right: 150px;
border: none;
text-align: center;
}
#subscribeForm input[type="submit"] {
height: 45px;
width: 150px;
position: relative;
right: 140px;
background-color: #eb4034;
border: none;
color: #fff;
}
.sub h1 {
position: relative;
top: 50px;
padding-left: 25px;
}
/* article with courses */
.courses {
position: relative;
overflow: hidden;
height: auto;
width: 100%;
text-align: center;
}
.course {
display: block;
height: 250px;
width: 30%;
float: left;
margin: 60px 0 50px 35px;
}
.courseImage {
display: block;
height: 150px;
width: 60%;
margin: 0 auto 15px;
}
.course a {
text-decoration: none;
color: #e86c00;
}
/* Created by JS */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>
<header>
<nav id="headNavigation">
<h1>
Be
<span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
>
</h1>
<ul>
<li class="active">
<svg
class="bi bi-house"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
clip-rule="evenodd"
/>
</svg>
Home
</li>
<li>
<svg
class="bi bi-eject"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
clip-rule="evenodd"
/>
</svg>
About
</li>
<li>
<svg
class="bi bi-chat"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
clip-rule="evenodd"
/>
</svg>
Feedback
</li>
<li>
<svg
class="bi bi-box-arrow-in-right"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
clip-rule="evenodd"
/>
</svg>
Log In
</li>
</ul>
</nav>
<div class="lighter"></div>
</header>
<section>
<div class="slider">
<div class="slide current">
<div class="content">
<h1>Henry Park</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Peter Bottom(wizard)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Annie Granger</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Miriam (Mitzi)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Julie Wothson</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Mabel Tven</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left "></i></button>
<button id="next"><i class="fas fa-arrow-right "></i></button>
</div>
</section>
<article>
<div class="sub">
<h1>
Please <span class="colored">Subscribe</span> for
<span class="colored">our</span> site
</h1>
<form id="subscribeForm">
<input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
<input type="submit" value="Submit" />
</form>
</div>
</article>
<article>
<div class="container">
<div class="courses">
<div class="course">
<div class="image">
<img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
</div>
Photo Shop course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
</div>
Photo Editing Course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
</div>
Be into photo
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
</div>
Photo marketing with Ed Brand
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
</div>
Creativity with Adam Bauman
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
</div>
</div>
</article>
<footer>
<h5>NO COPYRIGHT ©</h5>
<div class="sectionOfPartners">
<h6>Partners</h6>
<p>Partner 1</p>
<p>Partner 2</p>
<p>Partner 3</p>
<p>Partner 4</p>
<p>Partner 5</p>
<p>Partner 6</p>
<p>Partner 7</p>
</div>
<div class="sectionOfContacts">
<p>Oficial telephone +XXX / XXX XXXX</p>
<p>Contact with workers +XXX / XXX XXXX</p>
<p>Other Contacts Contact</p>
</div>
</footer>
Related
I am currently trying to complete a challenge where I have encountered this issue-
I have selected certain rows and columns of the grid, but my subtitle-img class is still overlapping subtitle2 class.
Can anyone find the possible reason and solution to this problem?
My code:
body{
background: #DCE8FF;
font-family: 'Times New Roman', Times, serif;
animation: fadein 2s ease-in 0s 1 normal forwards;
}
.main-container{
display: grid;
grid-template-columns: 65% 30%;
column-gap: 5%;
}
.subtitle-content-grid{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
}
.subtitle1{
grid-column-start: 1;
grid-column-end: span col2-end;
grid-row-start: 1;
grid-row-end: span 1;
}
.subtitle2{
grid-column-start: 1;
grid-column-end: span col2-start;
grid-row-start: 2;
grid-row-end: span 2;
}
.subtitle-img{
display: -ms-flexbox;
display: flex;
height: auto;
grid-column-start: 3;
grid-column-end: span col3-end;
grid-row-start: 2;
grid-row-end: span 4;
}
.sub-img{
display: -ms-flexbox;
display: flex;
justify-content: center;
flex: 100%;
max-width: 100%;
height: auto;
}
.image-gallery{
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 50%;
max-width: 60%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (min-width: 400px) and (max-width: 1000px) {
.image-gallery {
flex: 100%;
max-width: 100%;
}
}
.image{
margin-top: 8px;
vertical-align: baseline;
width: 46%;
padding: 5px 10px 5px 5px;
}
.sidebar-content{
background: #FFE3BF;
}
.post{
border: 2px solid #FBCA8B;
margin: 5px;
}
.post>h2,p,a{
padding-left: 4px;
}
.post>a:hover{
animation: colorChange 2s ease-out 0s infinite normal;
}
.footer{
background: linear-gradient(#DCE8FF,steelblue);
height: 550px;
}
.contact-form{
margin: 10% 10% 10% 10%;padding: 2% 0 0 0;
animation: slidein 2s ease-in 0s 1 normal forwards;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit] {
background-color: rgb(39, 132, 247);
color: white;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: rgb(25, 25, 157);
}
/*Animations*/
#keyframes colorChange{
0%{
color: rgba(0, 145, 255, 0.943);
}
50%{
color: rgb(74, 74, 233);
}
100%{
color: steelblue;
}
}
#keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
#keyframes slidein {
0%{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="wsc.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Styling Challenge</title>
</head>
<body>
<div class="main-container">
<div class="main-content">
<h1>Welcome to this Challenge</h1>
<p>Here is your list of objectives:</p>
<ul>
<li>Lay out the Content & Sidebar</li>
<li>Create proper margin & spacing around items</li>
<li>Import & Use A Custom Font</li>
<li>Color Scheme: Blue & Orange (Use However you see fit)</li>
<li>Style text appropriately</li>
<li>change the background color of the sidebar</li>
<li>Style image grid however you see fit</li>
<li>Create borders around each sidebar items</li>
<li>Create grid/flexbox for image and text under "Subtitle"</li>
<li>Image grow on hover</li>
<li>Link color change on hover</li>
<li>Page animation sequence for main items (content, sidebar)</li>
</ul>
<p>Do not feel limited by the objective! change or append anything you like. Good Luck!</p>
<div class="subtitle-area">
<div class="subtitle-content-grid">
<div class="subtitle1">
<h2 class="subtitle">Subtitle 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, debitis odit. Omnis esse ea aut nisi eos ab, ipsa qui labore sed facilis, quos perspiciatis voluptates aliquid fugiat exercitationem impedit!</p>
</div>
<div class="subtitle2">
<h2 class="subtitle">Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni, quam fugit perspiciatis maiores molestias quo totam, saepe obcaecati quia, nulla itaque perferendis culpa suscipit reiciendis reprehenderit! Illum, sapiente earum!</p>
</div>
<div class="subtitle3">
<h2 class="subtitle">Topic 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officiis. Illum odio quos, magni quam illo modi rerum maxime et minus dolore autem, nihil veniam. Architecto aspernatur temporibus ipsam dolorem.</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>amet consectetur adipisicing elit!</li>
</ol>
</div>
<div class="subtitle-img">
<img class="sub-img" src="https://picsum.photos/300/300">
</div>
</div>
</div>
<div class="image-gallery">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
</div>
</div>
<div class="sidebar-content">
<div class="post">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="footer">
<div class="contact-form">
<form action="/action_page.php">
<label >First name:</label><br>
<input type="text" id="fname" placeholder="Your First Name"><br>
<label >Last name:</label><br>
<input type="text" id="lname" placeholder="Your Last Name"><br><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Try using this in .subtitle-img
grid-column-start: 3;
grid-column-end: span 3;
grid-row-start: 2;
grid-row-end: span 4;
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
I have the majority of my code wrapped in a container with the following style:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the "overflow: auto", the web page stops being the full width of my window (as shown in the image).
screenshot of problem
When I remove the "overflow: auto" and replace it with "overflow: none", then the width is fixed but my scrolling feature now longer works.
HTML Code here:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li></li>
<li></li>
<li></li>
</ul> -->
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i> Facebook</i>
</li>
<li>
<i> Instagram</i>
</li>
<li>
<i> Email</i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Here is the CSS file:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Is there a possible fix for this?
Use this css value
overflow:scroll
or
overflow:visible
Keeping them auto will let browser decide the overflow.
I personally never use auto value.
try this
overflow:scroll;
width:100vw
if didn't work please edit post and add html
The green line should be drawn threw until the bottom as a timeline. The length is calculated by each sections of unique cssgrid height in JavaScript.
All entries look absolutely the same by codebase, but for any reason only the topmost is displayed.
I've tried to play around with position: absolute and position: relative for both the content and the green line, but it didn't work.
Is there something hidden or above the other?
#cssgrid {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 60px 40xp auto;
grid-template-areas: "b h" "b t" "b d";
}
<div>
<div id="line" style="position: absolute;"></div>
<div id="cssgrid">
<div id="grid-bulletpoint">
<div class="bulletpoint"></div>
</div>
<div id="grid-headline">
<h2>...</h2>
</div>
<div id="grid-time">
<p>...</p>
</div>
<div id="grid-description">
<p>...</p>
</div>
</div>
</div>
You can use the pseudo class :before to add the dot by making it position:absolute.
#cssgrid {
margin-left: 100px;
}
.boxContainer {
border-left: 5px solid green;
padding-left: 37px;
margin-bottom: -20px;
padding-top: 20px;
}
.grid-headline {
position: relative;
}
.grid-headline:before {
content: ' ';
width: 20px;
height: 20px;
background: orange;
position: absolute;
left: -50px;
top: 0;
border-radius: 50%;
}
#grid-description p {
margin-bottom: 0;
}
<div id="cssgrid">
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
</div>
You may organize differently your grid. See the Timeline Grid here This is the beauty of CSS Grid in my opinion.
Check this code:
(At the end I added the code for the svg if you want to use it too)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid CSS Timelin</title>
<style>
#thetime {
display: grid;
grid-template-columns: 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#timeline {
background-color: rgba(193, 240, 104, 0.36);
border: 1px solid #0031ff;
justify-self: center;
}
.timebar {
width: 10px;
height: 100%;
color: transparent;
background-color: #00ff1d;
}
ul {
list-style: none;
justify-self: start;
margin-left: 0;
padding: 0;
}
li {
background-color: rgba(141, 240, 240, 0.36);
border: 1px solid #ff00ff;
margin: 1.5 rem 0;
position: relative;
}
li:before {
content: " ";
background-size: cover;
background-image: url("/circle2.svg");
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: -2.3rem;
margin-top: 1.25rem;
}
h2 {
}
time {
font-family: monospace;
}
p {
}
</style>
</head>
<body>
<section id="thetime">
<div id="timeline">
<div class="timebar">X</div>
</div>
<ul>
<li>
<h2>
Entry #1
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #2
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #3
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #4
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
</ul>
</section>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFF00;}
</style>
<circle class="st0" cx="10" cy="10" r="10"/>
</svg>
I am trying to make a game terminal; I want to have two bars one on the top and one in the bottom and between those a scroll div needs to go to display text.
I tried doing it myself and got this as a result:
https://gyazo.com/0f98fd10e72f8ce104148b7cf51d861a
As you can see: the input field (which needs to be all the way at the bottom) and the text goes behind it and a little on.
This is how it should look:
https://gyazo.com/dbe572d83a6d00c1f45b5f1696fd4636
Code:
<div style="width: 100%; height: 100%; position: relative;">
<div style="background: #4C3C33; width:100%; color: #FFFFFF;">
<span id="gameTerminal_statusIcon">
<span class="fa fa-circle" style="color: red; width: 16px; height: 16px;">
</span>
</span>
<span id="gameTerminal_status"> Live</span>
</div>
<div class="well-md" id="gameTerminal" style="overflow-x: hidden; background: #2A211C; height: 100%; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace;">
<p>
<span id="gameTerminal_content" style="color:#80FF80; width: 100%;">
<!--game terminal content goes here-->
</span>
<style>
.gameTerminal_content_outputLine:nth-of-type(odd) {
width: 100%; background: #44362E;
}
.gameTerminal_content_outputLine {
display: inline-block;
}
</style>
<script>showLoading('gameTerminal_content', '32', 'html', '');</script>
</p>
<div id="gameTerminal_scrollHeigth"></div>
</div>
<form action="#" method="POST" onsubmit="gameTerminal_executeCommand(); return false;">
<input
type="text"
name="gameTerminal_input"
style="background: #4C3C33; width:100%; color: #FFFFFF; border: 0; outline: 0; bottom: 0px; position: absolute;"
placeholder="Type your command here..."
autocomplete="off"
/>
</form>
</div>
Thanks in advance
You can use Flexbox and just add overflow-y: scroll on div that you want to have scrollbar.
* {
box-sizing: border-box;
}
.content {
display: flex;
flex-direction: column;
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
flex: 1;
overflow-y: scroll;
}
input {
width: 100%;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>
You can also use calc() instead of Flexbox for height
* {
box-sizing: border-box;
}
.content {
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
height: calc(100% - 20px);
overflow-y: scroll;
}
input {
width: 100%;
height: 20px;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis sit consectetur ad. Eius, nam! Officia soluta incidunt obcaecati provident vero at praesentium impedit, repellat, accusamus tenetur rem eius id quisquam.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>