In this code, I put two images over each other using absolute positioning, but the second div with class row seems to be hidden behind the images. How can I fix that and make it appear in its correct place (after the images)?
.composition {
position: relative;
}
.img-1 {
position: absolute;
top: 0;
left: 0;
}
.img-2 {
position: absolute;
top: 0;
left: 0;
}
<div class="row">
<div class="composition">
<img src="imgs/lenses.jpg" class="img-fluid img-1" alt="" />
<img src="imgs/mountain-1.jpg" class="img-fluid img-2" alt="" />
</div>
</div>
<div class="row">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita praesentium inventore iusto rem perspiciatis impedit.
</div>
As previously stated, the absolute positioning on the images is causing .composition to not have a height and the div below it to collapse under the images.
Why do both images need to be absolutely positioned? Leave one image without the absolute positioning so the .composition has a height of the image. The second image can be positioned absolutely to cover the first.
With the first image staying in the flow and keeping a height, the second div will remain below the images.
.composition {
position: relative;
}
.img-2 {
position: absolute;
top: 0;
left: 0;
}
<body>
<div class="row">
<div class="composition">
<img src="https://picsum.photos/id/237/100/100" class="img-fluid img-1" alt="">
<img src="https://picsum.photos/id/1021/100/100" class="img-fluid img-2" alt="">
</div>
</div>
<div class="row">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita praesentium inventore iusto rem perspiciatis impedit.
</div>
Just change the position:absolute to position:relative for images.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
.composition {
position: relative;
}
.img-1 {
position: relative;
top: 0;
left: 0;
width: 100px;
height: 150px;
}
.img-2 {
position: relative;
top: 0;
left: 0;
width: 100px;
height: 150px;
}
</style>
<body>
<div class="row">
<div class="composition">
<img src="https://i.ebayimg.com/images/g/lAgAAOSwWAhcFLHg/s-l300.jpg" class="img-fluid img-1" alt="" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid img-2" alt="" />
</div>
</div>
<div class="row">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita praesentium inventore iusto rem perspiciatis impedit.
</div>
</body>
</html>
Related
I am trying to get a flex display living in a grid to behave like I want. Upon resizing the browser, the flex area refuses to drop below 2 columns no matter what I tinker with and am at a loss as to what to do. I've just taken up markup/coding and am still in the phase of layouts. I'm trying to leverage the powers of Grid and Flex together but am having minimal luck.
Here is what I have so far....please disregard and styling as this is just me tinkering.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #333;
}
.container {
display: grid;
grid-template-columns: repeat(autofit, minmax(200px, 1fr));
grid-template-rows: autofit 250px 1fr autofit;
grid-template-areas:
"h h h"
"c c c"
"p p p"
"f f f";
}
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 0, auto;
}
.main-box {
width: 350px;
text-align: center;
justify-content: center;
margin-top: 2rem;
}
.text-wrap {
background-color: #eee;
width: 300px;
margin: auto;
}
.main-box p {
max-width: 200px;
margin: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
.green {
grid-area: h;
}
.red {
grid-area: c;
background-image: url("img/bgmain.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
}
.blue {
grid-area: p;
}
.yellow {
grid-area: f;
}
<!DOCTYPE html>
<html>
<head>
<title>Grid/Flex Test</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="container">
<div class="green">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="red">Test</div>
<div class="blue">
<div class="flex-container">
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
</div>
</div>
<div class="yellow">
<span>Copyright © Designed by: Useless Dipshit</span>
</div>
</div>
</body>
</html>
So yeah, I'm a noob.
I forgot:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That solved everything for me.
I 've got the following code, and when I am viewing on mobile the Slick Carousel is bigger than the parent element and I couldn't fix it with any settings. I am using Boostrap as well.
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/assets/Intech Logo.png" alt="INTECH DYNAMICS logo" />
</a>
</div>
</nav>
<div class="wrapper-section-1">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center imagine">
<img class="img img-fluid floating" src="/assets/Header Image.png" alt="Careers banner image" />
</div>
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center">
<div class="row">
<div class="col-lg-12 title">
<h1 class="text-title">CAREERS</h1>
</div>
<div class="col-lg-12 slide">
<div class="single-item slider slide">
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Darius Opro</span><span class="font-weight-normal"> Full Stack
Programmer</span>
</div>
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Cosmin Mihalache</span><span class="font-weight-normal"> Front End
Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The CSS looks like this:
.wrapper-section-1 {
font-family: IBMPlexSans-Medum;
color: white;
margin-top: 54px;
width: auto;
padding: 8vh;
background-image: linear-gradient(to right, #1c003b, #5216aa);
}
.img {
max-width: 70%;
height: auto;
}
.imagine {
padding: 30px 0 30px 0;
}
.title {
align-items: flex-end;
display: flex;
justify-content: flex-end;
}
.text-title {
margin-bottom: 2rem;
}
/* Slick Carousel */
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.2;
}
.slick-active {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
.slide {
width: 500px;
margin: 0;
text-align: right;
background-color: blue
}
/* Custom Arrows */
.prev-arrow {
position: absolute;
bottom: -50px;
left: 400px;
cursor: pointer;
}
.next-arrow {
right: 3px;
position: absolute;
bottom: -50px;
cursor: pointer;
}
/* Floating Animation */
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
$(document).on("ready", function () {
$(".single-item").slick({
lazyLoad: "ondemand", // ondemand progressive anticipated
infinite: true,
settings: "unslick",
prevArrow:
'<span class="prev-arrow"><i class="fas fa-angle-left"></i></span>',
nextArrow:
'<span class="next-arrow"><i class="fas fa-angle-right"></i></span>',
});
});
I attached a photo to have a better idea of what is happening. I tried to give to the carousel padding, to set width in percentage with parent element but nothing worked.
Update: Pretty sure that JS has nothing to do with it but I attached anyway
i'm working on a school project where im supposed to do a portfolio. im trying to make a grid with pictuers and information next to that picture about stuff i have worked on. I'm trying to get the textbox to be as big as the picture. I have tried jusing flexbox and a lot of other stuff but can't get it to work. is there someone who can help me?
*{
box-sizing: border-box;
}
body{
background-color: #f4f4f4;
padding: 20px;
font-family: Arial;
}
.container {
max-width: 1600px;
margin: 0 auto;
}
.row {
margin:8px-16px;
}
.row,
.row > .column {
padding:2px 0px;
}
.column {
float:left;
width:50%;
}
.row:after {
content:"";
display:table;
clear:both;
}
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width:100%;
}
}
<div class="container">
<div class="row">
<div class="column">
<div class="content">
<h3>Hemsida 1</h3>
<p>Lorem ipsum.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">´
</div>
</div>
<div class="column">
<div class="content">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="atleta1.jpg" style="width:100%">
</div>
</div>
</div>
</div>
You have complicated the layout very much. How do you like this layout option?
Each line is divided into two parts of 50%.
A small bonus: with small screens, due to the Flexbox property order, the description block is located above the picture.
P.S. Of course, this is not the final option. You can continue to improve it
Result
* {
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
padding: 20px;
font-family: Arial;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.item {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
;
padding: 10px;
background-color: white;
}
.item__desc {
flex-basis: 50%;
}
.item__pic {
flex-basis: 50%;
}
.item_img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.item {
flex-direction: column;
width: 100%;
}
.item__desc {
order: -1;
}
}
<ul class="container">
<li class="item">
<div class="item__desc">
<h3>Hemsida 1</h3>
<p>Lorem ipsum.</p>
</div>
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354"></div>
</li>
<li class="item">
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354">
</div>
<div class="item__desc">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
</li>
<li class="item">
<div class="item__desc">
<h3>Hemsida 2</h3>
<p>Lorem ipsum.</p>
</div>
<div class="item__pic">
<img class="item_img" src="https://picsum.photos/536/354"></div>
</li>
</ul>
And same code on CodePen
will be enough for homework. Edit and improve codes
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.box{
margin-bottom:20px;
background: #3498db;
height:500px;
}
.box-left{
width:50%;
float:left;
height:500px;
padding:50px;
}
.box-left h3{
margin-bottom: 15px;
}
.box-right{
width:50%;
float:right;
height:500px;
}
.box-right img{
width:100%;
height:100%;
}
<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>
</head>
<body>
<div class="box">
<div class="box-left">
<h3>Head</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quas a velit. Aut nihil, modi nobis corporis eveniet ratione aperiam repellat maiores corrupti quidem ipsam animi officiis, fugit quasi rem!</p>
</div>
<div class="box-right">
<img src="https://i.ibb.co/S6PdtwP/69037904-2403297686584790-2753464427788369920-n.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-left">
<h3>Head</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quas a velit. Aut nihil, modi nobis corporis eveniet ratione aperiam repellat maiores corrupti quidem ipsam animi officiis, fugit quasi rem!</p>
</div>
<div class="box-right">
<img src="https://i.ibb.co/S6PdtwP/69037904-2403297686584790-2753464427788369920-n.jpg" alt="">
</div>
</div>
</body>
</html>
live demo
codepen live demo
I have implemented a carousel with Bootstrap 4. I have two main problems:
the images are somehow zoomed in. I don't want that. It should show the full size of the images.
how can I change the size of the carousel?
Here is my code:
html
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/holz_40.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam placeat esse dicta eos ex nobis, error, corrupti optio aspernatur debitis iure ut sapiente minima exercitationem inventore maiores explicabo natus vitae..</p>
</div>
</div>
css:
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-item {
height: 32rem;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: cover;
}
Can someone help me on how to show the images in the original size and change the size of the carousel?
I would appreciate your help!
I think it could be due to the property object-fit:cover of your .carousel-item > img rule.
As per MDN documentation:
Cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
Cover property has many advantages when you are developing for a responsive portal, like you only have use an image that works for the most commons aspect ratios.
You could change the property to contain, so image can be displayed in normal aspect ratio, but then you need to take care at the dimensions of the enclosing carousel div.
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-inner {
background: red;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-item {
height: 32rem;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: contain;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<dic class="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam placeat esse dicta eos ex nobis, error, corrupti optio aspernatur debitis iure ut sapiente minima exercitationem inventore maiores explicabo natus vitae..</p>
</div>
</div>
</div>
I have 2 rows in my container. In the second row I have 2 elements one and two. Now I am trying to display the image behind those too almost like a background. This is the html:
<div class="container">
<div class="row">
<img src="someimageurl" alt="" />
</div>
<div class="row">
<div class="col-md-6">one</div>
<div class="col-md-6">two</div>
</div>
</div>
codepen
Check if his works for you.
CSS:
.container{
border: 4px solid red;
position: relative;
overflow: hidden;
}
.contentBox {
min-height: 300px
}
.imgBox {
position: absolute;
top: 0;
let: 0;
width: 100%;
z-index: -1;
}
.imgBox img {
width: 100%;
margin: 0;
}
HTML:
<div class="container">
<div class="row contentBox">
<div class="col-md-6">one</div>
<div class="col-md-6">two</div>
</div>
<div class="imgBox row">
<img src="imageURL.jpg" alt="" />
</div>
</div>
enter link description here
Is background-image what you're looking for?
HTML
<div id=RowDivWithBackground class=row>
</div>
CSS
.RowDivWithBackground {
background-image: url('url/to/image');
other-css-do-dads /*Probably some rgba action*/
}
use css to do that
#{your div ID}{
background-image: url("backgroundImage.png");
}
i think this may be help you
try this code
html
<div class="row">
<div class="bg clearfix">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium optio itaque quas ab facere, ipsa cumque consequatur nam id voluptatibus numquam, sapiente suscipit doloremque blanditiis non, ipsam sint vel molestias.</div>
<div class="col-md-6">two</div>
</div>
</div>
css
.bg
{
background-image:url(http://data.whicdn.com/images/12849966/large.jpg);
background-position:center;
background-size:cover;
}
hope it helps
If you really need to use the img-tag, try to use position: fixed and z-index: -1 (or -2, -3, ...)
.container {
border: 4px solid red;
position: relative;
}
#imageAsBackground {
z-index: -1;
position: fixed;
}
<div class="container">
<div class="row">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg" id="imageAsBackground" alt="" />
</div>
<div class="row">
<div class="col-md-6">one</div>
<div class="col-md-6">two</div>
</div>
</div>
If you could use the image as a real background, try to use css for this then.
Like
.container{
border: 4px solid red;
}
.coolBackground {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg");
background-size: cover;
}
<div class="container">
<div class="row coolBackground">
<div class="col-md-6">one</div>
<div class="col-md-6">two</div>
</div>
</div>
background-size: cover; will adjust the image to the width of your div.