I am having a problem. Everything seemed perfect when I finished section-3, but when I started coding section-4, it started stacking on section-3's content.
Code
HTML
<!-- Start Of SECTİON TREE !-->
<section class="section-3" id="sec3">
<div class="tribg">
<img src="Parts/triangles.png" alt="" class="img-fluid">
</div>
<div class="container-fluid">
<div class="row">
<div class="card-deck">
<div class="col-md-4">
<div class="card mycards">
<img src="Parts/shield.png" alt="" class="img-fluid" width="50px">
<div class="card-body">
<h3 class="card-title">DENEME</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint expedita alias, dolorem sapiente culpa distinctio libero saepe. Recusandae numquam aut aliquam, ullam voluptatum placeat quis omnis perspiciatis, distinctio quae eaque nemo consequatur ratione mollitia beatae alias molestiae quod optio ipsa. Totam assumenda, aperiam quae!</p>
<div class="btn btn-primary">DENEME</div>
</div>
</div>
<div class="col-md-4">
<div class="card mycards">
<img src="Parts/shield.png" alt="" class="img-fluid" width="50px">
<div class="card-body">
<h3 class="card-title">DENEME</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint expedita alias, dolorem sapiente culpa distinctio libero saepe. Recusandae numquam aut aliquam, ullam voluptatum placeat quis omnis perspiciatis, distinctio quae eaque nemo consequatur ratione mollitia beatae alias molestiae quod optio ipsa. Totam assumenda, aperiam quae!</p>
<div class="btn btn-primary">DENEME</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mycards">
<img src="Parts/shield.png" alt="" class="img-fluid" width="50px">
<div class="card-body">
<h3 class="card-title">DENEME</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint expedita alias, dolorem sapiente culpa distinctio libero saepe. Recusandae numquam aut aliquam, ullam voluptatum placeat quis omnis perspiciatis, distinctio quae eaque nemo consequatur ratione mollitia beatae alias molestiae quod optio ipsa. Totam assumenda, aperiam quae!</p>
<div class="btn btn-primary">DENEME</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Of SECTİON TREE !-->
<!-- Start Of SECTİON FOUR !-->
<section class="section-4">
<div class="holder"><img src="Parts/shape9.png" alt="" class="img-fluid"></div>
</section>
<!-- End Of SECTİON FOUR !-->
CSS
/* SECTİON TREE */
.section-3 {
position: relative;
height: 100vh;
}
.tribg {
position: absolute;
top: 30%;
left: 20%;
z-index: 0;
}
.mycards {
padding: 60px 100px;
margin-top: 8rem;
border-radius: 63px;
box-shadow: 6px 7px 100px rgba(0, 0, 0, 0.16);
transition: .3s;
}
.mycards p {
margin-bottom: 6rem;
}
.cardimg {
margin-bottom: 30px;
}
.mycards:hover {
transform: translateY(-30px);
}
.gotopanel {
font-size: 20px;
}
/* End Of SECTİON TREE */
/* SECTİON FOUR */
.section-4 {
height: 100vh;
}
The problem is in your css, remove or change height property here:
.section-3 {
position: relative;
height: 100vh;
}
.section-4 {
height: 100vh;
}
Related
<section id="home">
<div class="container">
<div class="row align-items-center container-items">
<div class="col-md-6">
<div class="info">
<h1>Lorem ipsum dolor sit amet <u style="color: rgb(165, 177, 231);">consectetur.</u> </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, pariatur corporis! Quaerat officiis sit rerum exercitationem
facilis quas ex veritatis quod dolores delectus reiciendis autem dignissimos doloremque consequuntur, ad eaque possimus corrupti.
Fugiat, non unde labore, cupiditate nobis quis maxime error, omnis rerum tenetur officiis ea doloremque qui nihil officia?</p>
</div>
<ul>
<li>
<img src="./image/freshfood.png" alt="">
<span><u>Fresh Foods</u> </span>
</li>
<li>
<img src="./image/restaurant.png" alt="">
<span> <u>Master Chefs</u> </span>
</li>
</ul>
</div>
<div class="col-md-6 food-img">
<div>
<img src="image/home.png" alt="">
</div>
</div>
</div>
</div>
</section>
I want the home.png image and h1,p elements in the html codes to be replaced under 575.98 px. When I bring the device to these dimensions, h1,p is on the top and home.png is on the bottom. For this reason;
#home .container-items {
display: flex;
}
#home .info{
max-width: 100%;
height: 15rem;
order: 1 ;
}
#home .food-img{
order: 2;
}
I wrote these codes. Could you please explain this to me; For the order element to work, don't I need to assign the order element in the css to the classes or ids I gave to these divs? Like the food-img and info classes in this code.
As Paulie_D points out, this only works on the direct children (identified by the class flex-item-1 and flex-item-2 in the code below). You can then specify the order for the child elements:
#home .container-items {
display: flex;
}
#home .info {
max-width: 100%;
height: 15rem;
}
#media only screen and (max-width: 575.98px) {
.container-items {
flex-direction: column;
}
.flex-item-1 {
order: 2;
}
.flex-item-2 {
order: 1;
}
}
<section id="home">
<div class="container">
<div class="row align-items-center container-items">
<div class="col-md-6 flex-item-1">
<div class="info">
<h1>
Lorem ipsum dolor sit amet
<u style="color: rgb(165, 177, 231)">consectetur.</u>
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga,
pariatur corporis! Quaerat officiis sit rerum exercitationem
facilis quas ex veritatis quod dolores delectus reiciendis autem
dignissimos doloremque consequuntur, ad eaque possimus corrupti.
Fugiat, non unde labore, cupiditate nobis quis maxime error,
omnis rerum tenetur officiis ea doloremque qui nihil officia?
</p>
</div>
<ul>
<li>
<img src="https://picsum.photos/60" alt="" />
<span><u>Fresh Foods</u> </span>
</li>
<li>
<img src="https://picsum.photos/60" alt="" />
<span> <u>Master Chefs</u> </span>
</li>
</ul>
</div>
<div class="col-md-6 food-img flex-item-2">
<div>
<img src="https://picsum.photos/300/200" alt="" />
</div>
</div>
</div>
</div>
</section>
In this case, you could just use flex-direction: column-reverse; though:
#home .container-items {
display: flex;
}
#home .info {
max-width: 100%;
height: 15rem;
}
#media only screen and (max-width: 575.98px) {
.container-items {
flex-direction: column-reverse;
}
}
<section id="home">
<div class="container">
<div class="row align-items-center container-items">
<div class="col-md-6 flex-item-1">
<div class="info">
<h1>
Lorem ipsum dolor sit amet
<u style="color: rgb(165, 177, 231)">consectetur.</u>
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga,
pariatur corporis! Quaerat officiis sit rerum exercitationem
facilis quas ex veritatis quod dolores delectus reiciendis autem
dignissimos doloremque consequuntur, ad eaque possimus corrupti.
Fugiat, non unde labore, cupiditate nobis quis maxime error,
omnis rerum tenetur officiis ea doloremque qui nihil officia?
</p>
</div>
<ul>
<li>
<img src="https://picsum.photos/60" alt="" />
<span><u>Fresh Foods</u> </span>
</li>
<li>
<img src="https://picsum.photos/60" alt="" />
<span> <u>Master Chefs</u> </span>
</li>
</ul>
</div>
<div class="col-md-6 food-img flex-item-2">
<div>
<img src="https://picsum.photos/300/200" alt="" />
</div>
</div>
</div>
</div>
</section>
How do I fit the whole image with borders as there is some space below it. AnyHelp would be appreciated, thanks . I have attached my code below, please refer it .
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="Jeans.jpg" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="mainpic.png" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="shirt.jpg" alt="">
</div>
</div>
</section>
You can try to object fit image and fullwidth its' height.
.sectionimg img {
max-width: 100%;
object-fit: cover;
height: 100%
}
All you need to do is specify height: 100%; to .sectionimg img so the image takes the full width and height of the parent.
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
height: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
</section>
I want to make the image almost half the height it is now but it should cover the whole image not the zoomed part only. How do i do it?
HTML code
<section class="Details">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="Jeans.jpg" alt="">
</div>
</section>
CSS
.Details {
display: flex;
}
.sectionimg {
width: 50%;
height: 10%;
}
See the modified example below. I'd suggest you do a research about how flex layout works and how image properties work in them.
.Details {
display: flex;
}
.sectionimg {
flex: 1 0 50%;
}
.sectionimg img {
max-width: 100%;
}
<section class="Details">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://i.stack.imgur.com/Hc97v.png" alt="">
</div>
</section>
This question already has answers here:
Child with max-height: 100% overflows parent
(11 answers)
Closed 3 years ago.
I'm trying to create equal card-like columns, using flex to fix the buttons to the bottom of the content is not aligned. Unfortunately, the button is being pushed out of the column. I know it's because the height of the card-body is set to 100%, but I'm not sure why it's setting the height to expand past its parent.
Any help would be appreciated!
Codepen:
https://codepen.io/anon/pen/wLjrzw
HTML:
<!--
.container-fluid>.row>.col-12.col-sm-6.col-md-3.ja-card*4>a>img[src="http:lorempixel.com/400/300/cats"]^.ja-counter{$}+.ja-card-body.d-flex.flex-column>h4>lorem4^p>lorem^a.mt-auto.btn.btn-lg.btn-primary>lorem2
-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<div class="ja-counter">1</div>
<div class="ja-card-body d-flex flex-column">
<h4>Lorem ipsum dolor sit.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, impedit qui voluptates porro vero incidunt, aliquid dignissimos quae a tempora nisi quis consequatur atque. Officiis laudantium laborum ab sequi pariatur?</p>
Lorem, ipsum.
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<div class="ja-counter">2</div>
<div class="ja-card-body d-flex flex-column">
<h4>Optio excepturi inventore reprehenderit?</h4>
<p>Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.</p>
Quidem, perferendis!
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<div class="ja-counter">3</div>
<div class="ja-card-body d-flex flex-column">
<h4>Aperiam porro quae deserunt?</h4>
<p>Doloremque tenetur aut adipisci dolore sed aspernatur! Praesentium vitae ut, quisquam sed nesciunt odit! Tempora incidunt, laborum impedit ratione maiores ipsum, laboriosam odit aspernatur ex reiciendis necessitatibus similique id optio?</p>
Nobis, eum.
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 ja-card">
<img src="http:lorempixel.com/400/300/cats" alt="">
<div class="ja-counter">4</div>
<div class="ja-card-body d-flex flex-column">
<h4>Aspernatur mollitia commodi ipsum!</h4>
<p>Quia veniam recusandae ut, cum porro assumenda. Aut magnam quo rem sapiente vitae sequi, distinctio error repudiandae consequatur ut doloribus commodi rerum? Cumque iure quis pariatur, consequatur dolore consectetur doloribus?</p>
Odit, consectetur?
</div>
</div>
</div>
</div>
CSS:
.ja-card {
background-color: #d6d6d6;
padding: 0;
}
img {
width: 100%;
}
.ja-card:nth-child(even) {
background-color: #f6f6f6;
}
.ja-card-body {
height:100%;
padding: 2em;
}
.ja-counter {
position: relative;
top: 0;
left: 50%;
margin: -35px 0 0 -35px;
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
font-family: "Helvetica", sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 60px;
text-align: center;
background-color:red;
}
The better way to approach this is to use flexbox for the card. And then make space between its children.
So
add display: flex and flex-direction: column to .ja-card
Set justify-content: space-between for .ja-card-body
Also, you don't need to set 100% height for .ja-card-body. it is useless.
Working Demo
Add box-sizing:border-box to your .ja-card-body CSS definition.
I am using a background image on a section which covers the whole screen while the section is in view. Then it is covered up by subsequent sections as the page scrolls.
#section1{
background: URL(../SiteData/Images/SectionBackground.jpg) no-repeat center top fixed #f1ece2;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:800px;
}
I want to add text about half way down this image. This I can do, but I want it to stay in position, as if it was actually part of the image. So when the screen scrolls up, the text gets hidden rather than scrolls to the top - so it stays in position on the image.
How would I do this?
Thanks
Here is a demo answer for make them both image and text responsive Live On FIDDLE. Try this but not just copy paste. Try to understand the css how this text over the image. If you have any questions ask me in comment. Best of luck.
.img-reponsive {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.textoverimage {
position: relative;
}
p.title {
position: absolute;
top: 75px;
left: 0;
text-align: center;
font-size: 38px;
width: 100%;
color: #fff
}
#media only screen and (max-width: 767px) {
p.title {
font-size: 1.5em;
line-height: 1.5em;
}
}
#media only screen and (max-width: 479px) {
p.title {
font-size: 1.1em;
line-height: 1.1em;
}
}
<div class="textoverimage">
<img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="demo_img">
<p class="title"> TEXT </p>
</div>
bootstrap 4
<section class="vh-100" style="
background: url(public/images/aimage.png) no-repeat center center fixed;
background-size: 100%;
">
<div class="container h-100 d-flex ">
<div class="row my-auto ">
<div class="col-lg-3 col-sm-12">
<div class="jumbotron ">
<h1 class="display-3">Hello, world!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
</div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="jumbotron ">
<h1 class="display-3">Hello, world!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
</div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="jumbotron ">
<h1 class="display-3">Hello, world!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
</div>
</div>
<div class="col-lg-3 col-sm-12">
<div class="jumbotron ">
<h1 class="display-3">Hello, world!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
</div>
</div>
</div>
</div>
</section>