I need my slick slider carousel to be completely centered in whatever browser someone is viewing it in. In other words, whether your viewing it in desktop chrome or an iPhone X Max the slider is positioned in the middle of the viewport. the slider is stuck to the top of the page.
I've tried every solution i could find but whatever i try the carosuel remains stuck to the top of the page.
this is the first method i tried https://github.com/kenwheeler/slick/issues/281
I tried to fiddle with what i found in both slick.css and slick-theme.css and still couldnt figure it out.
.slick-slide.c {
display: inline-block;
vertical-align: middle;
float:none;
}
My current style.css
#wrapper{
width: 100%;
margin: auto;
height: 100%;
background: grey;
}
html, body {
height: 100%;
margin: 0
}
body.Site{
text-align: center;
width: 100%;
outline: 0;
min-height: 100%;
background: blue;
}
main.Site-content{
}
footer {
height: 120px;
background: red;
}
.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 2vw;
}
.slider {
display: block;
margin: 0 auto;
text-align: center;
font-size: 17px;
background: green;
}
.player {
width: 80%;
text-align: center;
background: purple;
outline: 0;
}
I expect my slider to remain centered vertically and horizontally within its viewport.
Here is the code you can use to center your slider horizontally and vertically. As there are some issues in adding external libraries in the code snippet, I have created a codepen for you. You can refer to this link:
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="main">
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
</div>
EDIT NOTE: Please check the codepen link instead of snippet result for the final result.
Related
So I think the solution I need is to extend the wrapper div to the right of the page without wrapping. If I set the width to width: 100vw or width: 100%, all of the content within the div move below all the other content.
looks kinda weird but here's the fiddle: https://jsfiddle.net/8u3Lzjxw/
what happens if you set width to 100% or 100vh
wrapper should extend to cover all highlighted in green. The height is not a problem as it's not being interfered with.
Relevant HTML:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ispum</h2>
</div>
</div>
</div>
CSS:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}
there are several ways to structure a page like this. To keep inline with what you have, there are a couple CSS properties that need to change in your fiddle.
Since the side-bar has a width of 2em, then the margin of the active sockets needs to be at least 3em. And also, if you want it to snap to the top, then remove the top margin. This is what the style will look like:
.active-sockets {
float: left;
margin: 0 1em 1em 3em;
height: 100vh;
width: 100%;
}
you also want to take away the padding of the side bar:
.side-bar {
background-color: rgb(24, 24, 24);
padding: 0;
width: 2em;
height: 100%;
position: relative;
float: left;
}
What's the best approach to achieving a lasting effect like in this gif?
I thought the framer-motion whileHover attribute would be my best chance, but I misunderstood how it works, I thought its possible to enter from and to parameters like in CSS animation.
I want to reveal the 'footer' either while the cursor hovers on it or when reaching a certain viewport height.
What's in the gif was made with keyframes animation in css.
I'd appreciate any hint, guide, link to a video on how to build such things.
Thanks in advance
I believe that you can achieve that exact effect using CSS only. This is often preferable, since javascript would bloat your code and be slower to execute.
You can see a way of achieving this effect in this fiddle
Basically, you can use the "hover" pseudoclass to make the aesthetic changes, and then use the "transition" property to animate them.
In the fiddle above, this is the code that actually does the trick:
/* setting base styles for the footer element */
footer {
margin: 0 auto;
width: 200px;
transform: translateY(60px);
transition: width 1s, transform 1s;
}
/* having an inner child will give that "truncated border radius" effect you see in the gif */
footer .inner {
background-color: lightblue;
padding: 3em;
border-radius: 50%;
transition: border-radius 1s;
}
/* Make changes using the "hover" pseudoclass */
footer:hover {
transform: translateY(0px);
width: 100%;
}
footer:hover .inner {
border-radius: 0%;
}
Please be aware that the fiddle I posted is just a hint on how to build this component, but it still miss some features, like the handling of the footer text content itself (right now it won't work well if it's multiline) and accessibility.
See this solution using only css:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Segoe UI, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
}
.container main {
width: 80%;
height: 400px;
margin: auto;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
font-weight: 800;
color: white;
background: rgb(70, 100, 52);
}
.container footer {
width: 100%;
display: flex;
justify-content: center;
}
.container footer .expand {
width: 200px;
height: 50px;
background: royalblue;
border-radius: 40px 40px 0 0;
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
font-size: 1em;
color: white;
transition: 1000ms;
}
.container footer .expand:hover {
width: 100%;
animation-name: resize;
animation-duration: 700ms;
height: 150px;
border-radius: 0;
}
#keyframes resize {
0% {
height: 50px;
border-radius: 60px 60px 0 0;
}
50% {
height: 160px;
border-radius: 90px 90px 0 0;
}
100% {height: 150px;}
}
<div class="container">
<main>
this is your main feed
</main>
<footer>
<div class="expand">^^^</div>
</footer>
</div>
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great!
Here is the HTML:
<div class="appdesign">
<img class="appmockup" src="img.jpg"/>
<div class="apptext" style="display:none">
<p class="apptexttitle">Name</p>
<p class="apptextinfo">Mobile App Design<br><br>Insert info</p>
<button>
View Project
</button>
</div>
</div>
Here is the CSS
.appdesign{
display: inline-flex;
img{
height: 450px;
width: 650px;
margin-bottom: 30px;
}
.appdesign img:hover .apptext{
opacity: 0.5;
}
.apptext{
display: block;
opacity: 0.8;
position: absolute;
background-color: $customgrey;
height: 450px;
width: 650px;
margin-bottom: 30px;
z-index: 100;
.apptexttitle{
color: $white;
font-size: 30px;
border-bottom: 2px solid $white;
border-top: 2px solid $white;
width: 15vw;
padding: 10px;
text-align: center;
}
}
.apptextinfo{
width: 40vw;
font-size: 18px;
font-family: Merriweather;
}
}
Here is the JS
<script>
$('.appdesign').hover(function(){
$(this).find('.apptext').fadeIn('slow');
},
function(){
$(this).find('.apptext').stop().fadeOut('slow');
});
</script>
The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:
From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}