As you can see on the example, when I try to hover the buttons, it does nothing.
Also, i tried to right-click the buttons and go to "inspect element" to see what was the problem, but the chrome inspector selects the parent element.
I tried to change the z-index of all the elements, and give them all the position absolute or relative (because i know z-index has problems with position static).
note: The elements with position absolute have to have position absolute
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
background: rgb(63, 66, 175);
background: linear-gradient(305deg, rgba(63, 66, 175, 1) 0%, rgba(99, 145, 204, 1) 47%, rgba(139, 216, 236, 1) 100%);
}
:root {
--d_blue: rgb(91, 84, 190);
--l_blue: rgb(169, 165, 232);
--minw: 350px;
--maxw: 450px;
--medw: 30%;
--i: 0;
}
#media (pointer:none),
(pointer:coarse) {
:root {
--medw: 100%;
}
}
.layout {
z-index: 1;
position: relative;
display: block;
width: var(--medw);
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
margin: auto;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
}
.presentation-img {
z-index: 2;
display: block;
width: calc(var(--medw));
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
background: white;
border-radius: 20px;
position: absolute;
transform: translate(0px, calc(var(--i)*-100%));
pointer-events: none;
transition: transform 0.3s cubic-bezier(0, 0, .41, 1);
}
.presentation-img #image img {
z-index: 3;
position: relative;
height: 80%;
width: 95%;
margin: 15% 0% 0% 0%;
margin-left: auto;
margin-right: auto;
display: block;
padding: 0% 0% 0% 0%;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#image {
width: 100%;
height: 100%;
}
.btn {
z-index: 4;
position: absolute;
width: 100%;
top: 87%;
display: inline-flex;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.btn div {
z-index: 5;
position: relative;
width: 50px;
height: 50px;
padding: 15px 15px 15px 15px;
}
.btn div:first-child {
margin: 0% 0% 0% 7%;
}
.btn div:first-child:hover {
background: rgb(210, 210, 210);
}
.btn div:last-child {
margin: 0% 7% 0% 0%;
}
.profile,
.buy-votes {
z-index: 999999;
position: relative;
display: block;
background: white;
border-radius: 50%;
box-shadow: 0px 0px 11px #858585;
align-items: center;
text-align: center;
}
.profile:hover,
.buy-votes:hover {
background-color: rgb(214, 214, 214);
}
.profile i,
.buy-votes i {
margin: auto;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>site</title>
</head>
<body>
<div class="layout" id="container">
<div class="presentation-img" id="pres">
<div id="image">
<img draggable="false" touch-action="none" src="https://images.wallpapersden.com/image/download/forests-beautiful-landscape_a2duaWyUmZqaraWkpJRpbWWta2ll.jpg">
</div>
<div class="btn">
<div onclick="console.log('test');" class="profile">
<i class="fa-solid fa-user"></i>
</div>
<div onclick="console.log('test');" class="buy-votes">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
note: the stackoverflow snipet is a bit flat
if you do not understant the stack overflow, I have it too in
jsfiddle
any doubt, just ask, and please help me
I discovered,
I added pointer-events: none to the parent
Related
I need to make a smooth wave for my website. I have been trying and did alot of research but cannot find what I want. I have tried all animations on the net but they are not as smooth as the one on this site.
In the attached file, I have trying clip paths which did not work well. I need a wave animation like one on this site
https://rno1.com/
Please help me!
This is my class:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=|Quicksand">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
</head>
<body>
<ul class="nav" id="nav">
<li class="search"><a>Search</a></li>
<li class="home"><a>Home</a></li>
<li class="help"><a>Something</a></li>
<li class="acc"><a>Account</a></li>
<li class="help" id="help">
<button class="helpb" id="helpb">
<a class="helpa" id="helpa">Help</a>
<div class="arrow" id="arrow"></div>
</button></li>
</ul>
<div class="con1">
<div class="wave">
<div class="ani"></div>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #1f1f1f;
overflow: hidden;
font-family: "Quicksand", sans-serif;
}
ul {
display: flex;
align-items: center;
justify-content: center;
position: relative;
list-style-type: none;
}
ul li {
display: inline;
margin-left: 90px;
padding-top: 30px;
font-variant: all-small-caps;
font-size: 20px;
color: whitesmoke;
}
ul li:first-child {
margin-left: 280px;
}
ul li button {
display: flex;
align-items: center;
justify-content: center;
margin-left: 60px;
width: 160px;
height: 60px;
background-color: transparent;
border-radius: 5px;
border: 2px whitesmoke solid;
transition: .5s;
overflow: hidden;
cursor: pointer;
}
ul li button a {
position: absolute;
font-size: 17px;
font-weight: 10000000;
color: whitesmoke;
right: 200px;
font-variant: all-small-caps;
margin-left: 20px;
transition: .5s;
}
.arrow {
position: absolute;
display: block;
margin: 30px auto;
width: 8px;
height: 8px;
right: 150px;
border-top: 2px solid whitesmoke;
border-left: 2px solid whitesmoke;
transform: rotate(135deg);
transition: .5s;
}
.arrow::after {
content: "";
display: block;
width: 2px;
height: 45px;
background-color: whitesmoke;
transform: rotate(-45deg) translate(15px, 4px);
left: 0;
top: 0;
transition: .5s;
}
.con1 {
overflow: hidden;
background-color: transparent;
}
.wave {
height: 60%;
width: auto;
background-color: #6b5da4;
margin-top: 230px;
}
.wave div {
width: auto;
height: 20%;
background-color: #433388;
margin-top: 0;
clip-path: polygon(2% 57%, 99% 56%, 100% 99%, 1% 100%);
transition: 1s;
animation: animate 3s infinite ease-in-out;
}
#keyframes animate {
0%, 100% {
clip-path: polygon(2% 57%, 99% 56%, 100% 99%, 1% 100%);
}
50% {
clip-path: polygon(0% 50%, 11% 60%, 31% 66%, 59% 70%, 84% 73%, 84% 75%, 99% 77%, 100% 99%, 2% 100%);
}
}
</style>
<script>
</script>
</html>```
Basically, I have created an image gallery that looks like the code below. However, I am having trouble creating a hover effect that goes with the images. I would like the hover effect to look something like this if possible: https://codepen.io/jguerra/pen/rNBdYeJ. Could anyone help me with creating this? Any help is appreciated. Thanks.
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*block level elements*/
.page {
margin: 0px;
padding: 0px;
}
.themains {
margin: 0px;
padding: 0px;
max-width: none;
}
.inner {
max-width: 1000px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
height: 400px;
scroll-snap-type: mandatory;
scroll-behavior: smooth;
background: #2C3E50;
border: solid 7px yellow;
font-size: 0px;
margin-bottom: 50px;
}
.scroll-container .scroll-section {
display: inline-block;
vertical-align: middle;
background: transparent;
border: solid 5px #BFC9CA;
white-space: nowrap;
}
/*Slider X (different sized images)*/
.scroll-container.diff-size {
scroll-snap-destination: 50% 0%;
padding: 20px 0px;
}
.scroll-container.diff-size .scroll-section {
width: auto;
height: 100%;
margin-right: 15px;
scroll-snap-coordinate: 50% 0%;
}
.scroll-container.diff-size .scroll-section:first-child {
scroll-snap-coordinate: 0% 0%, 50% 0%;
margin-left: 15px;
}
.scroll-container.diff-size .scroll-section:last-child {
scroll-snap-coordinate: 50% 0%, 100% 0%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Gallery</title>
<meta charset="UTF-8">
<title>Horizontal Scroll Gallery</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<article class="page">
<article class="themains">
<div class="scroll-intro" id="intro"></div>
<div class="inner">
<div class="scroll-container diff-size"><img class="scroll-section" src="https://cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280.jpg"></div>
</div>
<p><br>
<br></p>
</article>
</article><!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</body>
</html>
I would probably position the images inside a container and use the following kind of code in css. Hopefully it helps somehow.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
Try using after and before pseudo-elements to make that white border-lines and give blue(or what color you want) background to image. You can make all them invisible and 0 opacity. And when on hover you can make them visible again. Check this css below.
figcaption {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 4rem;
text-align: center;
}
figcaption::before,
figcaption::after {
content: '';
position: absolute;
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
transition: 0.5s;
}
figcaption::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid white;
border-left: 1px solid white;
transform: scale(1,0);
}
figcaption:hover::before,figcaption:hover::after{
transform: scale(1);
}
and you can make the same thing with text opacity.
This is a movie review app. Once you get past the 3rd row on PC and I believe the 3rd or 4th movie listing on mobile, it cuts off the review as seen in the image below. Only the buttons are cut off in that image, but if I added another row, it would be 100% cut off/hidden.
I tried adding height: 100% width:100% to my html and body elements, but that adds a second vertical scrollbar when I show the movie listings?
How can i fix this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/2a0c07254d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="icon" href="./public/favicon.ico">
<title>Reviewer</title>
</head>
<body>
<div id="notification">
</div>
<header>
<h1>Reviewer</h1>
<h5>Create a movie review below or search for movie reviews by the movie title!</h5>
</header>
<div id="error-div"></div>
<form autocomplete="on" class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" alt="Movie title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime (in minutes, numbers only):</label>
<input type="text" name="runtime" alt="Movie Runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating (Between 1 and 10, numbers only):</label>
<input type="text" name="rating" alt="Movie Rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<textarea name="review" alt="Movie Review" id="review" rows="4" cols="50" placeholder="Movie review"></textarea>
<button type="submit" id="create-btn">Create movie review</button>
</form>
<form autocomplete="on" id="get-movies-form" action="submit">
<label class='search-by-title-label' for="search-for-movie-input">Search by movie title:</label>
<div class="get-movies-div">
<input type='search' name="search-for-movie-input" alt="Search input" id='movie-title-to-search-input' placeholder="Search" />
<button id="get-movie-by-name-btn">Search</button>
</div>
</form>
<button id='display-all-movies-btn'>Display All Listings</button>
<div id='movie-list'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/movies.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
This is my CSS
html, body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
background: #fff;
}
* {
box-sizing: border-box;
}
/* KEYFRAMES */
#keyframes notificationSlideDown {
0%, 100% { transform: translateY(-50px);}
10%, 90% { transform: translateY(0px);}
}
#-webkit-keyframes notificationSlideDown {
0%, 100% { -webkit-transform: translateY(-50px);}
10%, 90% { -webkit-transform: translateY(0px);}
}
#-moz-keyframes notificationSlideDown {
0%, 100% { -moz-transform: translateY(-50px);}
10%, 90% { -moz-transform: translateY(0px);}
}
#keyframes sectionSlideDown {
0% { transform: translateY(-15%);}
100%{ transform: translateY(0);}
}
#keyframes h1-SlideDown {
0% { transform: translateY(-20%);}
100%{ transform: translateY(0);}
}
#keyframes h5-SlideDown {
0% {opacity: 0;}
0% { transform: translateY(-100%)}
100%{ transform: translateY(0);}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% { opacity: 0;}
100% {opacity: 1;}
}
/* Notification box */
#notification {
display: none;
font-size: 20px;
font-weight: bolder;
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: rgb(255, 255, 255);
color: rgb(0, 119, 255);
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px #000;
-mox-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#close {
margin: auto;
color: #000;
z-index: 102;
}
.notification-animation {
animation: notificationSlideDown 1.5s ease forwards;
}
/* Header Elements */
header {
text-align: center;
letter-spacing: 1.5px;
color: rgb(0, 119, 255);
font-weight: bold;
}
h1, h5 {
margin-top: 5%;
margin-bottom: 0;
}
h1 {
font-size: 40px;
animation: h1-SlideDown 1.2s ease;
}
h5 {
font-size: 12px;
padding: 0 3%;
animation: h5-SlideDown 1.3s ease;
}
/* DIVS */
.get-movies-div {
text-align: center;
display: flex;
flex-flow: row;
justify-content: space-around;
}
.delete-and-update-btn-div {
text-align: center;
width: 100%;
position: absolute;
bottom: 10px;
}
#error-div, #section-error-div {
color: rgb(243, 86, 86);
text-align: center;
}
#section-error-div {
position: relative;
top: 0;
}
/* FORMS */
.create-movie-form {
display: flex;
flex-direction: column;
border-radius: 15px;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: #fff;
padding-bottom: 5%;
padding-top: 3%;
}
#get-movies-form {
margin-top: -5%;
}
/* LABELS */
label {
color: rgb(0, 119, 255);
display: block;
width: 100%;
margin-top: 6%;
margin-left: 15%;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
}
.search-by-title-label {
margin-left: 15%;
}
/* INPUTS */
input, textarea {
font-family: 'Montserrat', sans-serif;
border-radius: 3px;
border: 1px rgb(173, 173, 173) solid;
margin: 0 auto auto auto;
padding: 2.5% 1.5%;
width: 70%;
}
input:focus, textarea:focus {
transition: .2s;
border-color: rgb(0, 119, 255);
outline: transparent;
}
#movie-title-to-search-input {
width: 44%;
}
/* BUTTONS */
button {
font-family: 'Montserrat', sans-serif;
outline: none;
padding: 2.2%;
border-radius: 5px;
font-weight: bolder;
font-size: 15px;
background: linear-gradient(90deg, rgb(0, 119, 255), rgb(0, 97, 243));
border: solid 1px transparent;
margin: 5% auto auto auto;
color: #fff;
letter-spacing: 1px;
}
button:hover {
cursor: pointer;
color: rgb(180, 180, 180);
transition: .2s;
transform: scale(.97);
background-color: rgb(0, 119, 255);
outline: rgb(0, 119, 255);
}
#create-btn {
width: 70%;
}
#get-movie-by-name-btn, #display-all-movies-btn {
font-weight: 700;
}
#get-movie-by-name-btn {
margin-top: 0;
margin-left: -14%;
width: 25%;
padding: 2.1% 1%;
}
#display-all-movies-btn {
margin-top: 5%;
margin-bottom: 7%;
width: 70%;
display: block;
}
.delete-btn, .update-btn {
margin: 0;
font-weight: 400;
padding: 1.5%;
width: 30%;
}
.delete-btn {
margin-right: 2%;
}
/* MOVIE LIST */
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden;
}
section {
border: 1px rgb(223, 223, 223) solid;
border-radius: 5px;
padding: 2%;
margin-top: 10%;
box-shadow: 0 10px 15px #d6d6d6;
outline: transparent;
background: #fff;
color: rgb(88, 88, 88);
position: relative;
animation:
sectionSlideDown .5s ease-out,
fadeIn .5s ease-in;
}
li {
list-style: none;
margin: 2% 0 5% -10%;
letter-spacing: .5px;
font-weight: 500;
color: rgb(0, 119, 255);
}
ul {
padding-bottom: 5%;
margin-bottom: 20%;
}
p {
display: inline;
overflow-wrap: break-word;
letter-spacing: .5px;
}
.rating,
.runtime,
.title,
.review {
color: rgb(65, 65, 65);
}
.id {
display: none;
}
#media only screen and (min-width: 768px) {
h5 {
font-size: 15px;
padding: 0 15%;
}
#error-div {
position: relative;
top: 40px;
}
label {
margin-top: 2%;
margin-left: 25%;
}
.search-by-title-label {
margin-left: 25%;
}
input, textarea {
width: 50%;
padding: 1.5%;
}
#movie-title-to-search-input {
width: 34%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 50%;
padding: 1.2%;
}
#get-movie-by-name-btn {
width: 15%;
padding: 1.3%;
margin: 0 25% 0 1%;
}
#movie-list {
grid-gap: 2.5%;
}
section {
margin-top: 0;
}
}
#media only screen and (min-width: 1024px) {
h5 {
font-size: 17px;
padding: 0 25%;
}
h1 {
margin: 1% 0 -3% 0;
font-size: 50px;
}
label {
margin-left: 32.5%;
}
.search-by-title-label {
margin-left: 32.5%;
}
input, textarea {
width: 35%;
padding: 1%;
}
#movie-title-to-search-input {
width: 26%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 35%;
padding: .9%;
margin-top: 1.5%;
}
#get-movie-by-name-btn {
width: 9%;
padding: .85%;
height: 10%;
margin: 0 32.4% 0 .25%;
}
}
#media only screen and (min-width: 1440px) {
#error-div {
top: 70px;
}
}
This is the HTML generated by my JavaScript for each movie review/section.
// Generate HTML for section elements holding movie data.
function generateHTML(res) {
const movie = res.data;
for (let i = 0; i<movie.length; i++) {
const sections = document.createElement('section');
sections.innerHTML = `
<div class='id'>${movie[i].id}</div>
<div id="section-error-div"></div>
<ul>
<li> Title: <p class='title'>${movie[i].title}</p> </li>
<li> Runtime: <p class='runtime'>${movie[i].runtime}</p> minutes</li>
<li> Rating: <p class='rating'>${movie[i].rating}</p>/10 </li>
<li> Review: <p class='review'>${movie[i].review}</p> </li>
</ul>
<div class="delete-and-update-btn-div">
<button class="delete-btn">Delete</button>
<button class="update-btn">Update</button>
</div>
`
movieListDiv.appendChild(sections);
}
}
Any help is appreciated!
Thank you!
I believe removing
overflow: hidden;
from
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden; <--- remove that
}
will fix that issue.
I have problem little problem... unfortunately big for me yet... I prepared demo for you guys:
$('#rulerSlider').click(function() {
$('#canvas').css({
'margin-left': '0px',
'margin-top': '0px'
});
});
#justdraw {
position: relative;
width: 100%;
height: 200px;
overflow-y: hidden;
margin-left: 20px;
margin-top: 20px
}
#ruler {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
}
#canvas {
position: relative;
width: 100%;
height: 200px;
overflow: scroll;
}
/* slider */
.slider {
bottom: 350px;
left: 300px;
width: 80px;
height: 26px;
background: #333;
/*margin: 20px auto;*/
margin-left: 35px;
position: absolute;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slider:after {
content: 'OFF';
color: #000;
position: absolute;
right: 10px;
bottom: 0px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slider:before {
content: 'ON';
color: #3bb100;
position: absolute;
left: 10px;
top: 1px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slider label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slider input[type=checkbox] {
visibility: hidden;
}
.slider input[type=checkbox]:checked+label {
left: 43px;
}
/* end slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="justdraw">
<div id="ruler">
<div id="canvas">
<canvas id="diagram" width="2100" height="2100">
</canvas>
</div>
</div>
</div>
<div>
<div class="slider">
<input type="checkbox" value="None" id="rulerSlider" name="check" checked />
<label for="rulerSlider"></label>
</div>
</div>
I have problems with the following steps:
0. Slider default state is (ON)
1. Click the slider (OFF)
2. Delete margins 20 from #justdraw
#justdraw {
margin-left: 20px; /* ---> margin-left: 0px; */
margin-top: 20px /* ---> margin-right: 0px; */
}
3. Click the slider again (ON)
4. Add margins 20 to #justdraw
#justdraw {
margin-left: 0px; /* ---> margin-left: 20px; */
margin-top: 0px /* ---> margin-right: 20px; */
}
Can someone help? I am done with this... I tried using javascript a little but without succes.
#Brarod
Try this code to add and remove css, it works properly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#toggle1").toggleClass("intro");
});
});
</script>
<style>
.intro {
font-size: 200%;
background-color:black;
text-shadow:1px 2px 3px yellow;
color: red;
}
</style>
<title>Tenth Demo Page</title>
</head>
<body>
<div>
<h3>Toggle Class</h3>
<p id="toggle1">Hello!! This My Tenth Demo Page....<code>◙♣♣♣♣☼╧#á</code></p>
<button id="btn4">Add Toggle Class</button>
</div>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)