I'm trying to create a horizontal slideshow using flexbox. I added min-width: 100% for the contained images so that overflow could actually work on the container. The sizing is perfect, the horizontal scrollbar appears on the container, but the first image is missing. Here is my HTML:
<body>
<div class="slideshow">
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
</div>
</body>
And here's the CSS:
.slideshow {
width: 100%;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.slideshow-item {
min-width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.slideshow-item:nth-of-type(1) {
background-image: url('./images/mountain1.jpg');
}
.slideshow-item:nth-of-type(2) {
background-image: url('./images/mountain2.jpg');
}
.slideshow-item:nth-of-type(3) {
background-image: url('./images/mountain3.jpg');
}
The weird part is if I add two additional slideshow-items in front the original three, it works perfectly. Here's the code after adding the two images:
<body>
<div class="slideshow">
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
</div>
</body>
I only added background images for the last 3 items, since those are the ones that are actually displayed:
.slideshow-item:nth-of-type(3) {
background-image: url('./images/mountain1.jpg');
}
.slideshow-item:nth-of-type(4) {
background-image: url('./images/mountain2.jpg');
}
.slideshow-item:nth-of-type(5) {
background-image: url('./images/mountain3.jpg');
}
Any help would be much appreciated!
Related
Hey guys so i'm trying to make a responsive image with a img element but the height of the element is not being respected.
I created this example: https://codepen.io/apodacaduron/pen/ExmpzrE?editors=1100
<div class="container" draggable="true">
<div class="image">
<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
</div>
<div class="text">
text content <br><br><br><br><br><br>
</div>
</div>
.container {
background: blue;
width: 336px;
height: 383px;
display: flex;
flex-direction: column;
padding: 16px;
}
.image {
height: 100%;
width: 100%;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
.text {
width: 100%;
background: green;
}
I would like to make the third card exactly like the second one, where if the text grows (green div) the image gets smaller, but i was not able to achieve this using the img element. (THE IMG ELEMENT SHOULD NOT HAVE A FIXED HEIGHT!)
Does somebody know how to do this?
.flex {
display: flex;
gap: 1rem;
}
.container {
background: blue;
width: 336px;
height: auto;
display: flex;
flex-direction: column;
padding: 16px;
}
.image {
height: 100%;
width: 100%;
}
.cheat-image {
background: url('http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI') no-repeat center center / contain;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
.text {
width: 100%;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="flex">
<div class="container" draggable="true">
<div class="image"></div>
<div class="text">
text content <br><br><br><br><br><br>
</div>
</div>
<br />
<div class="container" draggable="true">
<div class="image cheat-image"></div>
<div class="text">
text contentIf you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice. If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</div>
</div>
<br />
<div class="container" draggable="true">
<div class="image">
<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcRXn5Ts02SPH0uXL1hglAYHkimX6Hd36zb1nrqjtJD1C0V7hy4QRqu4ldsT_ukVAeCt6Kx43WK8rGZFMla7uhI" />
</div>
<div class="text">
text content If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.<br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
My solution was to set the container of img with min width 0 and min height 0
.image {
min-height: 0;
min-width: 0;
}
.image > img {
height: 100%;
width: 100%;
object-fit: contain;
}
I have photo as a background image and it placed right. I also have some list and I want it to be placed left. But it stuck on photo. I used float, but nothing happens. I tried flex but nothing happens too.
its how the page is looking now
.section__img1 {
position: absolute;
background: url("../images/section1.png") center no-repeat;
background-size: cover;
width: 985px;
height: 580px;
top: 50%;
transform: translateY(-50%);
right: 50%;
margin-right: 0px;
}
.section__content {
float: right;
width: 40%;
}
.section__content.left {
float: left;
}
<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
is this what you are looking for?
.section__img1 {
background: url("https://i.stack.imgur.com/B2W26.png") center no-repeat;
background-size: cover;
width: 985px;
height: 580px;
float:right;
}
CodePen
You can use flex for your container and remove the absolute positioning on your image, then the image div will grow automatically to the same height as your content column:
.container {
display: flex;
flex-direction: row-reverse;
}
.section__img1 {
flex-grow: 1;
background: url("https://www.fillmurray.com/300/200") center no-repeat;
background-size: cover;
}
.section__content {
width: 40%;
}
<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
</div>
flex would make it easier:
.container {display:flex;}
.section__img1 {
background: url(https://picsum.photos/id/1001/2000/800) center no-repeat;
background-size: cover;
}
.section__content ,
.section__img1{
flex:1
}
/* switch/reorder position ? */
.container + .container .section__img1 {
order:1;
}
<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
</div>
First of all, you need to set their parent container to a flex display, i.e
.container { display: flex; }
Then the image section:
.section__img1 { flex-basis: 50%; max-width: 50%; }
Then, the content section:
.section__content { flex-basis: 50%; max-width: 50%; }
This gives you a basic setup to achieve what you are aiming at.
Remove the absolute positions, floatd and work on the .section_img1 height as you wish.
I just needed to write flex-direction: row-reverse; and list moved to empty space and all is looking just fine
I have some simple HTML and CSS code where I want to have a div with class container and this div need to have a img as background. Inside that parent div I have a dive with class row and inside it I have 2 div classes :class="col-md-3" and col-md-9.
The problem is that now the child divs are not showing container div.
In other words I want my container div be the background and everything is displayed on top of it.
Any suggestions?
HTML:
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>here is test for the me</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
CSS:
body, html {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("../images/backg.png");
background-size: contain;
background-repeat: no-repeat;
padding-top: 66.64%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
Actual result:
You mean something like this?
Set your container height: 100vh;
and delete the padding, it pushed the divs to the bottom
#charset "utf-8";
/* CSS Document */
body,hmtl{
background-color: #071a0f;
margin: 0;
}
h1{
color: aqua;
}
.bckgroud{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
background-size: contain;
background-repeat: no-repeat;
}
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
Something like this, perhaps:
body {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
height: 100vh;
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
background-repeat: no-repeat;
}
body, html {
color: white !important;
}
.bckgroud{
background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
<div class="row">
<div class="col-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-9">
Foo
</div>
</div>
</div>
I am trying to center text over an image of a banner.
Here is a jsfiddle of it.
https://jsfiddle.net/c6Lcr0ap/
HTML:
<div class="about-me">
<div class="about-me__banner">
<div class="about-me__banner-text">
<h3>About Me</h3>
</div>
<div class="about-me__banner-image">
<img src="https://i.imgur.com/qiUWxdd.png">
</div>
</div>
</div>
CSS:
h3 {
color: orange;
}
.about-me__banner{
position:relative;
text-align:center;
}
.about-me__banner-text{
position:absolute;
width:100%;
color: orange;
}
<div class="about-me">
<div class="about-me__banner">
<div class="about-me__banner-text">
<h3>About Me</h3>
</div>
<div class="about-me__banner-image">
<img src="https://i.imgur.com/qiUWxdd.png">
</div>
</div>
</div>
It is actually simple to do this.
first your need to absolute position the text container .about-me__banner-text relative to it's parent .about-me__banner, so it can stay over your image.
Then you can center everything inside .about-me__banner vertically and horizontally with flexbox, resulting in these new rules:
.about-me__banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.about-me__banner-text {
position: absolute;
}
That should do the trick. You can check your modified fiddle here.
.about-me {
text-align:center;
}
Here is https://jsfiddle.net/fkp9g1jr/
.about-me__banner-text
class has width same as image
If a fixed height is ok for you, here you have another solution:
.about-me__banner-text {
background-image: url("https://i.imgur.com/qiUWxdd.png");
background-repeat: no-repeat;
background-position: center;
height: 57px;
line-height: 57px;
text-align: center;
}
Here is the jsfiddle: https://jsfiddle.net/01h8tqcc/
Update:
It is probably better to split the styles like this:
.about-me__banner {
background-image: url("https://i.imgur.com/qiUWxdd.png");
background-repeat: no-repeat;
background-position: center;
}
.about-me__banner-text {
height: 57px;
line-height: 57px;
text-align: center;
}
jsfiddle: https:https://jsfiddle.net/01h8tqcc/1/
The I placed a couple of header tags overlaid on my hero image. When I resize the browser the text-overlay moves up and down. Any Ideas as to how to make the text fixed in the middle of the hero image?
html:
<!--Hero-->
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<br>
<div class="heroText">
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:100%;
}
.heroText {
text-align: center;
color: white;
margin-top: 50%;
margin-bottom: 50%;
}
#heroimage{
background: url('/../assets/img/codeHero.0.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My Website address is: http://adolfobarreto.atwebpages.com
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Adjust heroText class css to
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
Hope this helps you:
According to your query , i have tested it and tried to code bit so that might help you.
What i did is :
To your "small-12 small-centered columns" DIV; i have
given it a property as position:relative;
The another one "heroText" i have given its property as width:
100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.
I tried in my desktop and it's working good.
<html>
<head>
<title></title>
<style type="text/css">
.small-centered {
/* Set the position only */
position: relative;
}
.heroText {
text-align: center;
color: white;
/* Added two lines only */
width: 100%;
margin-top: 28%;
}
</style>
</head>
<body>
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<!-- Here in above given small-12 smaill-centered columns DIV , provide 1 CSS property that, " position: relative " that will set this div to its place to be aligned in a line. -->
<br>
<div class="heroText">
<!-- Here in above given heroText DIV , provide 2 CSS property that, " width: 100%, marngin-top:28%; " this will fix up this child div and will set your texts written. -->
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
I suggest you to use a display table structure for this.
I don't think you need such a complicated structure, but leaving it as it is:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
I would delete de <br> and clean .heroText margins
Here is solution:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}