My slick slider images are covering up the elements that are supposed to sit below, and I'm not sure why. I need #features to sit below #slideshow, but right now it's covered up. I'm not sure what's making the slider overlap the elements below it on the page. I don't want to just "push" the #features div down with CSS, like by using bottom: -50px or whatever because I'm aiming for responsive design. I need the slideshow slider and slides to take up the same amount of height that the images do. Hopefully this makes sense! Here's my code:
HTML:
<div id="slideshow">
<div class="slide"><img src="images/Need Space.jpg"></div>
<div class="slide"><img src="images/Open Lot.jpg"></div>
<div class="slide"><img src="images/IMG_0713a.jpg"></div>
<div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS:
/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50vh;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */
#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;
}
I have found 2 issues -
Instead of height: 50vh, use height: 50%. (Reference line- 19). This will solve your problem.
Wrap all slide pictures with a parent div. Let name it - class='slick' (reference line- 53). This .slick class will Iterate it's all pictures. If your slider operates perfectly, you don't have to do this part.
I have attached the code below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50%;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */
#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="slideshow">
<div class="slick">
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
</div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 500, // autoplaySpeed: 1000, or autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
</script>
</body>
</html>
Related
I working in a page builder
For a shop, I am creating. I can change the CSS which is great.
I’m struggling to get a responsive resize of the images in this 4 column row. Since the images are different heights I have to have to set a height and have responsive width. Is there any way to get it to scale correctly?
The width is auto and the height is a set height based on the size of the screen.
You can see that when I resize it separates from the box and then sometimes get squished.
object-fit property
I did your design by using display : flex; and object-fit : cover; properties. I think that this object-fit property directly on the image is the only lacking property to make your images still looking good despite the screen resolution.
Notice the use of object-position : center; which makes the resizing always axed on the center of the image.
index.html
<div class="foo">
<div class="bar">
<img src="https://picsum.photos/200/300" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/200" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/200/700" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/400" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
</div>
style.css
body {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
.foo {
width: 100%;
display: flex;
gap: 20px;
}
.bar {
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bar > img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
h4 {
color:#9ccf74;
}
.bar > div {
padding: 10px;
height: 100px;
}
I have a div with positons fixed inside a fixed width parent, yet it's content overflows.
How can I contain the content to the fixed div?
<div style="width: 400px;">
<div style="position: fixed;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
You won't see a good result setting the position to fixed. Because the div that is inside the parent is position fixed, and it's not true. It's not like position relative and absolute.
You can fix it like this:
You must set a fixed width, e.g. the parent is 200px and so you have to set the width to 200px on the second div. Remember that if you set it to 100%, it will cover the whole page, which is a mistake.
<div style="width: 200px; height: 200px; border: 1px solid red">
<div style="position: fixed; width: 200px;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
Here are some overflow properties this will help you
div{
overflow: scroll;
}
div{
overflow: hidden;
}
div{
overflow: auto;
}
div{
overflow: visible;
}
Maybe this code will help you check
<!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>
</head>
<body>
<style>
.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
Verifiy my answer if this help you.
I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:
*I have added padding inside the divs so you're able to see the boxes
I need to display these 2 items next to each other on desktop screen sizes.
I the purple bordered box which contains the 2 elements is set to display flex.
The circle div sqaushes up.
I have set is to a height: 200px width: 200px - this is fine before I set the parent to display flex.
How can I make sure that the circle stays at the set width and height and the rest of the content in the red box resizes - rather than the other way around?
If you could also please explain like I'm 5 why this is happening that would be really appreciated.
.card__inner {
display: flex;
}
.news__feature-image {
border-radius: 100%;
width: 200px;
height: 200px;
background: red;
}
<article class="card">
<div class="card__inner">
<div class="news__feature-image"></div>
<div class="card__content">
<header class="news__header">
<span class="new__post-date">
18 Sep
</span>
<a class="card__link" href="/">
Read More
</a>
</header>
<h2 class="news__title">Lorem ipsum title this is a title etc Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed turpis est, eleifend.</h2>
</div>
</div>
</article>
I have tried using flex grow and flex shrink on the feature image and the content.
I have added settings for the flex items that contains the circle. By default the setting for flex-shrink is 1, which allows it to shrink if necessary. Setting it to zero ensures the circle is displayed as desired.
* {
box-sizing: border-box;
}
.container {
border: thin solid green;
padding: 1rem;
}
.inner {
border: thin solid purple;
display: flex;
padding: 1rem;
}
.circle {
width: 200px;
height: 200px;
background-color: red;
border-radius: 100%;
flex-shrink: 0;
}
<div class="container">
<div class="inner">
<div class="circle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
Im creating a website where the header, footer, body are all 100% width of the page, but I need all the content to be centered of the page no matter the resolution. I've tried using a wrapper but then the header and stuff are only 100% width of the wrapper and not the page.
I'm going out on a limb and guess that the background color/imagery is 100% wide, but you want the actual content to be centered (with a fixed width?). Here is sample code that uses an internal wrapper div on each item to keep internal content centered. I would recommend doing something totally different and possibly using repeating backgrounds on the html and body elements, but I don't know what your page looks like.
So.., the following will work, but will alarm HTML purists because of the extra markup :)
You can view a (super ugly) example of this method on this sample page I put together.
CSS:
.wrapper {
width: 960px; /* fixed width */
margin: 0 auto; /* center */
}
HTML:
<div id="header">
<div class="wrapper">
<h1>My Title</h1>
</div>
</div>
<div id="content">
<div class="wrapper">
<h2>Sub Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer">
<div class="wrapper">
<p class="credits">Copyright 2009 by Your Company.com, LLC</p>
</div>
</div>
you can't do this with a div element unless it has a specified width.
for just text, you can use
<div style="text-align: center;">text content</div>
this should work for you:
The CSS:
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px 20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
The HTML:
<body>
<div id="content">
<p><b>center</b><br /><br />
This BOX ist centered and adjusts itself to the browser window.<br />
The height ajusts itself to the content.<br />
</div>
</body>
This example was taken from this site, which I found a while ago and always refer to it for nice simple, clean css templates:
http://www.mycelly.com/
Have a play with this
body {
text-align: center;
position: relative;
}
#content {
width: 100%;
height: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}
Then in the HTML
<html>
<body>
<div id="header"></div>
<div id="content">
<!-- place all of your content inside of here -->
</div>
</body>
</html>