I have the following section on the desktop, and I need to make in mobile the image is above and the orange box is down, but the image is getting over everything.
Desktop
MOBILE
.second-section .box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section .box-orange img {
height: 550px;
margin-top: -10%;
margin-left: 2%;
object-fit: cover;
}
.second-section .box-orange h3 {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section .box-orange h3 .line {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section .box-orange p {
font-size: 2.5em;
margin-bottom: 5%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section class="second-section">
<div class="container">
<div class="row align-items-center box-orange">
<div class="col-md-6">
<img class="w-100" src="img/campos.png">
</div>
<div class="col-md-6 ml-5 ml-md-0 text-center">
<h3>lorem lorem! <div class="line"></div>
</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.
</p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I do not know if I should structure my CSS differently or do some kind of media want to stay the way I need it.
Need to stay like this in mobile.
After adding the media, the result was that.
#media only screen and (max-width: 800px) {
.second-section img {
height: unset;
margin-left:unset;
}
.textdiv {
margin-left:0px;
}
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<section class="second-section">
<div class="container">
<div class="row align-items-center box-orange">
<div class="col-md-6">
<img class="w-100" src="img.jpg">
</div>
<div class="col-md-6 ml-md-0 text-center textdiv">
<h3>lorem lorem! <div class="line"></div></h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.</p>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
My.css:
.box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section img {
height: 550px;
margin-top: -10%;
margin-left: 2%;
object-fit: cover;
}
.second-section h3 {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section.line {
width: 80%;
border: 2px solid #77d3c2;
position: absolute;
left: 33%;
top: 100%;
}
.second-section p {
font-size: 1.4em;
padding: 0% 10%;
}
.textdiv {
margin-left: 3rem;
}
#media only screen and (max-width: 800px) {
.second-section img {
height: unset;
margin-left:unset;
}
.textdiv {
margin-left:0px;
}
}
Because you've given image fixed height and that same height is applied to the mobile version also, To fix that I've included Media query
Check it out, It'll work
Related
I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
Run the snippet below:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: min-content;
}
.container2 {
position: relative;
margin-left: 20px;
width: min-content;
}
.container2::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px red;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
}
.text {
width: 200px;
height: 100px;
}
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
</div>
Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?
One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).
As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 200px;
height: 200px;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.text {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
Without setting width and height:
If you don't want to set width and height you could use display:flex on .container1 element as follow:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 35%;
display: flex;
flex-direction: column;
}
.inner {
background: yellow;
width: 100%;
z-index: -1;
}
.inner img {
width: 100%;
}
.text {
color: #1415FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
<!-- <img src="birthday.png" alt=""> -->
</div>
<div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.
Can someone please help me?!
I'm trying to code a PSD file to HTML and CSS, but I'm struggling with one of the sections. Here's an image of what I want to do:
Click Here
The problem is I don't know how to put the image in the timeline line. I tried to add the image in the ::after psuedo, but I don't think this is the right way of doing that.
This is my HTML Code :
<section class="about">
<div class="wrapper">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<div class="container left">
<div class="content">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h5>January 2011<br> Facing Startups Battles</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</section>
This is my CSS code:
.about .wrapper{
padding: 80px 10%;
text-align: center;
position: relative;
}
.about .wrapper::after{
content: '';
position: absolute;
top: 200px;
bottom: 0;
width: 6px;
background: red;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.about .container{
position: relative;
width: 50%;
top: 60px;
margin: 0 0 60px 0;
}
.about .container::after{
content: 'How Can I Add an Image Here in this circle?';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
top: 20px;
right: -104px;
background-color: blue; /* Just because there is no image */
background-image: url(assets/img/about-1.png);
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
.left{
text-align: right;
}
.right{
text-align: right;
}
.content{
padding: 30px 0px 80px 0px;
}
.left .content{
padding-right: 140px;
}
.right .content{
padding-left: 140px
}
.right{
text-align: left;
left: 50%;
}
.right:after {
left: -104px;
}
I think this is called a timeline, there is a lot of tutorials talking about how to do something like this, but I don't know how to make the images in the timeline line. Can you please help me do this?
Thanks
To build this, you could use css grid layout (guide: https://css-tricks.com/snippets/css/complete-guide-grid/)
Treat each of the content+image as a row in the layout. And each row as a container for a grid.
You can visually break every row down to 3 columns. One column for left-side content, the second one for the image and the third one for right-side content.
Example css grid for a layout like this:
.grid-container {
display: grid;
grid-template-columns: 1fr 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content-left image content-right";
text-align: center;
}
.content-left { grid-area: content-left; background: lightblue; }
.image { grid-area: image; background: lightgreen; }
.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
<div class="content-left">Left content</div>
<div class="image">Image</div>
<div class="content-right">Right content</div>
</div>
(grid generated with: https://grid.layoutit.com/)
To alternate between content on the left and on the right, you can use css even/odd selectors (How can I style even and odd elements?) to set which grid area is used for the element.
Example:
I've built an example of a timeline layout for this answer which you can find at https://codepen.io/hendrysadrak/pen/VwLEraz
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title></title>
</head>
<body>
<section class="about">
<div class="wrapper">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="container">
<div class="row">
<div id="col1" class="col right">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
<div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
</div>
<div class="row2" >
<div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
<div id="col4" class="col left">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
in main.css file:
.about .wrapper{
padding: 80px 10%;
text-align: center;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.row {
width: 59%;
margin-right: 41%;
display: flex;
}
.row2 {
width: 59%;
display: flex;
margin-left: 41%;
}
.col {
flex:1;
}
.col.left {
text-align: left;
}
.col.right {
text-align: right;
}
#col2 {
flex-basis: 30%;
}
#col1 {
flex-basis: 70%;
}
#col3 {
flex-basis: 30%;
}
#col4 {
flex-basis: 70%;
}
.img {
margin: 10% 5%;
width: 90%;
border-radius: 50%;
}
#container {
background-image: linear-gradient(lightgrey,lightgrey);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
}
put this in assets/img/about-1.png
so like the title says, i am trying to align the bullets to align in the center of the vertical grey line. I am kind of beginner with css and not 100% sure how calc() work even-thou i have successfully implemented in other places. Is this the right approach to do my alignments ? Using media query would be too much since there are too many break points and changing the html is not an option per design. One of the cal() function i successfully used was this:
left: calc((100% - 3 * 11rem) * .54 - 4px)!important;
so i thought i can use the same formula then changing the values till the grey line aligns. Seems this thought was flawed
Desired look
Current look
Here is my code:
html {
font-size: 18px;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.project-methodology-wrap {
padding: 5rem 0;
/*========== Media queries ==========*/
}
.project-methodology-wrap .methodologyBullet::before {
content: '';
width: 25px;
height: 25px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 26px;
top: 0px;
opacity: 0;
}
.project-methodology-wrap .methodologyBullet::after {
content: '';
width: 12px;
height: 12px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 33px;
top: 2px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before {
opacity: 1;
transition-duration: 0.5s;
left: 26px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after {
border: 5px solid #fff;
width: 21px;
height: 21px;
left: 28px;
}
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet {
position: absolute;
left: 0;
}
.project-methodology-wrap .project-methodology-leftContent {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.project-methodology-wrap .project-methodology-rightContent {
position: relative;
overflow: hidden;
}
.project-methodology-wrap .project-methodology-rightContent:before {
content: "";
height: 100%;
width: 8px;
position: absolute;
background-color: #f1f2f6;
left: calc((100% - 3 * 5rem) * .54 - -2px)!important
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
padding-left: 80px;
margin-bottom: 3rem;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent {
opacity: 0.2;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="project-methodology-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="project-methodology-leftContent">
<div class="pr-5">
<h2>title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
</p>
</div>
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="project-methodology-rightContent pt-5">
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">1</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">2</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">3</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
It looks like in this case you could get away with using a fixed value left: 35px; since the scale of the elements to the left of the dots does not change.
html {
font-size: 18px;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.project-methodology-wrap {
padding: 5rem 0;
/*========== Media queries ==========*/
}
.project-methodology-wrap .methodologyBullet::before {
content: '';
width: 25px;
height: 25px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 26px;
top: 0px;
opacity: 0;
}
.project-methodology-wrap .methodologyBullet::after {
content: '';
width: 12px;
height: 12px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 33px;
top: 2px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before {
opacity: 1;
transition-duration: 0.5s;
left: 26px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after {
border: 5px solid #fff;
width: 21px;
height: 21px;
left: 28px;
}
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet {
position: absolute;
left: 0;
}
.project-methodology-wrap .project-methodology-leftContent {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.project-methodology-wrap .project-methodology-rightContent {
position: relative;
overflow: hidden;
}
.project-methodology-wrap .project-methodology-rightContent:before {
content: "";
height: 100%;
width: 8px;
position: absolute;
background-color: #f1f2f6;
left: 35px;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
padding-left: 80px;
margin-bottom: 3rem;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent {
opacity: 0.2;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="project-methodology-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="project-methodology-leftContent">
<div class="pr-5">
<h2>title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
</p>
</div>
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="project-methodology-rightContent pt-5">
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">1</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">2</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">3</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I want to add an addition div to info-img. If I changed to <div class="box-img"><div class="info-img"></div>......</div>,the image is gone. What happened to this situaiton? How to I modify CSS code to show the image correctly? __
* {
box-sizing: border-box;
}
#home-info {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<!-- <div class="box-img"> -->
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
<!-- </div> -->
</section>
</body>
</html>
You missed the closing in your css and the info-img div contains empty. You have to add any image or text to visible the div. I have updated the code. Hope this solution will be helpful.
#home-info {
height: 400px;
width:800px;
}
#home-info .info-img img {
max-width: 100%;
width: 100%;
}
#home-info .box-img {
display: flex;
}
#home-info .info-img {
width: 50%;
background: #ccc;
min-height: 100%;
}
#home-info .info-content {
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<section id="home-info">
<div class="box-img">
<div class="info-img">
<img src="https://via.placeholder.com/200">
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
You can check below code snippet , As some closing bracket is missing in your css code.Hope below code will help you !
#home-info {
height: 400px;
width:800px;
}
#home-info .box-data{
width:100%;
float:left;
}
#home-info .info-img {
float: left;
width: 50%;
background: #ccc;
}
#home-info .info-img img{
width:100%;
height:auto;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
box-sizing:border-box;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-data">
<div class="info-img">
<img alt="image" height="auto" width="100%" src="https://images.unsplash.com/photo-1531361171768-37170e369163?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80"/>
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>
Finally I solved the problem by changing the code.
#home-info .box-img {
height: 300px;
}
* {
box-sizing: border-box;
}
#home-info .box-img {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-img">
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>