I need to make this Range slider responsive. Text is getting overlapped when i start using in mobile version. Please help me to achieve this.
I have tried to add it in Table responsive and adding some responsive divs but still it didn't workout.
It would be great if someone help me to find out the way to make it responsive. You can see executable code in
#import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
#import url("https://fonts.googleapis.com/css?family=Dancing+Script");
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.label-slider:nth-child(1) {
padding-left: 0px;
}
.label-slider:nth-child(2) {
padding-left: 18px;
}
.label-slider:nth-child(3) {
padding-left: 34px;
}
.label-slider:nth-child(4) {
padding-left: 32px;
}
.label-slider:nth-child(5) {
padding-left: 32px;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
<body>
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</body>
Just replace width: 600px by max-width:600px; in container.
For the font-size, I would recommand you to set font size based in rem. and set breakpoints font-size on your html element to size as you wish. as this subject: Rem not compatible with media queries?
Ad I will also recommand you to remove container padding-left and right when you under a certain width of screen, this way, the scale will stay well align with your input.
Edit
To fix the the container label, I set them with position absolute.
First step add position relative on container:
.label-container{
position:relative;
}
Then add position: absolute on labels:
.label-slider{
position: absolute;
}
And finaly just Adjust correctly with absolute as follow:
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
DEMO FULL
#import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
#import url("https://fonts.googleapis.com/css?family=Dancing+Script");
body {
font-family: "Catamaran", sans-serif;
background: #2b8aeb;
}
.container {
font-family: "Catamaran", sans-serif;
max-width: 600px;
margin: 30px auto 0;
display: block;
background: #fff;
padding: 10px 50px 50px;
border-radius: 4px;
box-shadow 0 6px 16px rgba(0,0,0,0.15)
}
.title {
text-align: center;
font-family: "Dancing Script", cursive;
color: #3949ab;
font-size: 35px;
}
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
position : relative;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
position: absolute;
}
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
.ticks {
font-family: "Catamaran", sans-serif;
color: #3949ab;
font-size: 14px;
font-weight: 700;
display: flex;
justify-content: space-between;
height: 6px;
margin: 0 10px 0 15px;
counter-reset: count -1;
}
.ticks > div {
height: 100%;
width: 1px;
background: silver;
counter-increment: count 1;
}
.ticks > div:nth-child(5n - 4) {
height: 200%;
}
.ticks > div:nth-child(5n - 4)::before {
display: block;
content: counter(count,decimal);
transform: translate(-50%, 100%);
text-align: center;
width: 16px;
}
<body>
<div class="container">
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</div>
</body>
Related
I have a animation where when i hover the icons swing from the right, i want to have it for both of my icons, the delete and edit, but i can't find out which style should i use to separate them and change colors indivitually without messing up the sizing of the icons or the placement.
Html:
import React, { useState } from "react";
import "./App.css";
import axios from "axios";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faTrash, faPlus, faEdit } from "#fortawesome/free-solid-svg-icons";
function App() {
return (
<>
<div className="backgound">
<div className="wrapper">
<header>Todo app MERN</header>
<div className="inputField">
<input type="text" placeholder="Add your new task"></input>
<button>
<FontAwesomeIcon icon={faPlus} />
</button>
</div>
<ul className="todoList">
<li>
Do something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
<li>
Buy something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
<li>
Learn something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
</ul>
<div class="footer">
<span> You have 3 pending tasks</span>
<button>Clear</button>
</div>
</div>
</div>
</>
);
}
export default App;
The classes i been trying to change to separate them are the .todoList li and .todoList li span
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::selection {
color: #ffff;
background: rgb(142, 73, 232);
}
body {
width: 100%;
height: 100vh;
padding: 10px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}
.wrapper {
background: #fff;
max-width: 400px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.wrapper header {
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField {
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input {
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus {
border-color: #8E49E8;
}
.inputField button {
width: 50px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8E49E8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover {
background: #721ce3;
}
.inputField button.active {
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList {
max-height: 250px;
overflow-y: auto;
}
.todoList li {
list-style: none;
height: 45px;
line-height: 45px;
position: relative;
background: #f2f2f2;
border-radius: 3px;
margin-bottom: 8px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li span {
position: absolute;
right: -60px;
color: #fff;
width: 45px;
text-align: center;
background: #e74c3c;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.todoList li:hover span {
right: 0px;
}
.wrapper .footer {
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button {
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8E49E8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active {
opacity: 1;
pointer-events: auto;
}
you forgot a principle:
single responsible principle
So the best way is the component is only responsible for one thing.
So let's make a separate component that gets a conditional rendering based on prop and then be responsible for its own behavior.
You can then wrap them with an element and use flexbox in css.
solution :
1-add "icon_container" className to span
<span className="icon_container">
...
</span>
2-add "font_custom_class" className to FontAwesome
<FontAwsome className="font_custom_class" .../>
3.change some style in css file:
.todoList li {
display : flex;
flex-flow : row;
justify-content : space-between;
list-style: none;
height: 45px;
line-height: 45px;
position: relative;
background: #f2f2f2;
border-radius: 3px;
margin-bottom: 8px;
cursor: default;
overflow: hidden;
padding-left: 15px !important;
}
.icon_container {
width : 100px;
background : red;
display : flex;
flex-flow : row nowrap;
justify-content : center;
align-items : center;
transform : translateX(100px);
transition : all 0.5s;
}
.icon_container > .font_custom_class {
flex-grow: 1;
text-align: center;
}
.todoList li:hover .icon_container {
transform : translateX(0);
}
I have a question about my responsive website.
I deployed my project to web server. In my local server and PC web server, I checked in google chrome dev tool, and z-index worked properly. The menu bar slides from the left side to the right side.
But when I checked in the real browser from a smartphone, the menu field did not show up. Background color and letter color are invisible.
When I tap each a tags (tags are invisible but I guessed each position.), I could jump to each page such as a result page, login page, and homepage. So I guess the menu bar is at the top of the screen.
The question is that,
when I see a responsive website, the menu bar doesn't appear and is
invisible. But a tags inside the menu are working properly so, I
cannot figure out what this problem is coming from.
.logo {
line-height: 50px;
float: left;
text-transform: uppercase;
color: #fff;
}
.header {
height: 50px;
background: #2D2524;
padding: 0 20px;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
}
.header2 {
display: none;
}
.menu {
float: right;
line-height: 50px;
}
.menu a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.background-img {
background: url("../LPImages/karina-lago-wEucG_sLRsY-unsplash.jpg");
background-size: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
position: relative;
height: 70vh;
}
.main_search {
position: absolute;
top: 70%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 70%;
text-align: center;
}
.search_text {
background: #232323;
opacity: 0.9;
padding-left: 10px;
border: solid 3px #fff;
font-size: 16px;
line-height: 30px;
width: 35%;
height: 3rem;
font-weight: 400;
color: #fff;
}
.search_text:focus {
outline: none;
}
.Genre {
color: #fff;
background: #232323;
opacity: 0.9;
border: solid 3px #fff;
padding-left: 5px;
font-size: 16px;
line-height: 30px;
width: 20%;
height: 3.4rem;
font-weight: 400;
text-transform: uppercase;
}
.Genre:focus {
outline: none;
}
.search_date {
background: #232323;
opacity: 0.8;
margin-right: 15px;
padding-left: 15px;
color: #fff;
border: solid 3px #fff;
font-size: 16px;
width: 20%;
font-weight: 400;
height: 3rem;
}
.search_date:focus {
outline: none;
}
.search_icon {
color: #fff;
}
.show-menu-btn, .hide-menu-btn {
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 20px;
cursor: pointer;
display: none;
}
.show-menu-btn {
float: right;
}
.show-menu-btn i {
line-height: 50px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: grey;
}
.paragrah {
height: 50%;
width: 30%;
color: white;
margin-left: 5em;
margin-top: 7em;
margin-bottom: 20em;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.7);
text-align: justify;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -1111;
}
/*.content {
padding: o 20px;
img {
width: 100%;
max-width: 700px;
margin: 20px 0;
}
}*/
#media screen and (max-width: 800px) {
.header {
display: none;
}
.search {
display: none;
}
.header2 {
display: block;
width: 100%;
max-width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
position: fixed;
height: 50px;
background: #2D2524;
overflow: hidden;
z-index: 10;
}
.background-img {
width: 100%;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarSearch {
position: relative;
height: 100%;
left: 0;
width: 100%;
margin-top: 50px;
-webkit-transform: translateX(1500px);
transform: translateX(1500px);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
background: #000000;
color: #fff;
position: fixed;
text-align: center;
}
.sidebarIconSearch i {
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: absolute;
top: 16px;
right: 25px;
z-index: 99;
font-size: 20px;
}
input[type="checkbox"]:checked ~ #sidebarSearch {
-webkit-transform: translateX(0);
transform: translateX(0);
}
input[type="checkbox"]:checked ~ #sidebarSearch ~ .sidebarIconToggle {
display: none;
}
.openSidebarSearch {
float: right;
}
.search-title {
font-size: 20px;
font-weight: bold;
margin: 20px 0 10px;
}
.search_text {
outline: none;
height: 30px;
width: 60%;
border: solid 3px #fff;
background: none;
border-radius: 30px;
color: #fff;
padding: 0 20px;
font-size: 16px;
}
.tag-list {
color: #000000;
margin: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 10px;
}
.tag-list li {
background: #fff;
border-radius: 30px;
margin: 4px;
height: 24px;
width: 80px;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 12px;
}
.Category dt {
background: #fff;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Category dt img {
width: 50px;
height: 50px;
}
.Category dd {
text-transform: uppercase;
font-weight: bold;
margin: 0 auto;
}
.Category-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.Day-box {
outline: none;
height: 30px;
width: 200px;
border: solid 3px #fff;
background: none;
border-radius: 30px;
color: #fff;
padding: 0 20px;
font-size: 16px;
}
#sidebarMenu {
position: relative;
width: 100%;
height: 100%;
position: fixed;
left: 0;
margin-top: 50px;
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
background: #000000;
}
.sidebarMenuInner {
position: absolute;
text-align: center;
top: 40%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
margin: 0;
padding: 0;
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
padding: 30px;
cursor: pointer;
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
-webkit-transform: translateX(0);
transform: translateX(0);
}
input[type="checkbox"]:checked ~ #sidebarMenu ~ .sidebarIconSearch {
display: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu ~ #sidebarSearch {
display: none;
}
input[type=checkbox] {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 18px;
left: 20px;
height: 22px;
width: 22px;
}
.spinner {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin-top: -9px;
}
}
.image img {
border: 1px solid white;
}
.event-name {
font-size: 20px;
color: white;
}
.heart {
margin-top: -20px;
margin-left: 17rem;
}
.event-date {
font-size: 20px;
color: #FD8700;
}
.card-info {
color: white;
font-size: 18px;
}
.save-mark {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 300px;
margin-left: 120px;
}
.seemore-btn {
margin-top: 4rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.seemore-btn a {
color: white;
border-radius: 30px;
font-size: 24px;
padding: 4px 20px 4px 20px;
border: 0;
cursor: pointer;
text-decoration: none;
background: #7206F7;
}
.category-container {
margin-top: 8rem;
}
.category-card {
padding: 0 50px 80px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.category-card p {
text-transform: uppercase;
margin-top: 20px;
color: #ffffff;
font-size: 35px;
}
.category-image {
overflow: hidden;
border-radius: 50%;
width: 220px;
height: 220px;
border: solid #ffffff 1px;
}
.category-image img {
width: 220px;
height: 220px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
}
.category-image img:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
#media screen and (max-width: 800px) {
.category-card {
display: block;
}
.category-card-content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 70px;
position: relative;
}
.category-card-content p {
position: absolute;
top: 43%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
font-size: 45px;
}
.category-image {
margin: 0 auto;
border: solid 1px #ffffff;
}
.category-image img {
opacity: 0.7;
}
}
.use_contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.use_contents img {
margin-right: 7rem;
width: 20%;
}
.Description {
text-align: center;
width: 30%;
}
.Description p {
text-align: center;
font-size: 19px;
margin-top: 0.5rem;
color: #c7c7c7;
}
.register-btn {
margin-top: 4rem;
}
.register-btn a {
background-color: #F70661;
text-decoration: none;
color: white;
margin-top: 10px;
border-radius: 30px;
font-size: 24px;
padding: 4px 20px 4px 20px;
border: 0;
cursor: pointer;
}
.find_func {
margin: 1rem;
}
.use_contents2 img {
margin-left: 7rem;
margin-right: 0;
}
.start {
margin: 4rem 0 10rem;
text-align: center;
}
.right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 0 auto;
}
#media screen and (max-width: 800px) {
.use_contents {
padding: 20px;
}
.use_contents img {
margin-right: 1rem;
width: 40%;
}
.use_contents2 {
margin-left: 0;
}
.use_contents2 img {
margin-right: 0;
margin-left: 1rem;
}
.Description {
width: 100%;
}
h4 {
margin: 0;
}
}
.login {
background: url("../LPImages/danny-howe-bn-D2bCvpik-unsplash.jpg");
background-size: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
position: relative;
height: 80vh;
}
.login-contents {
background: rgba(0, 0, 0, 0.4);
height: 80vh;
width: 100%;
text-align: center;
}
.login-base {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.login-base h2 {
margin: 0;
}
.login-erea p {
font-size: 18px;
color: white;
}
.login-box {
margin: 12px 0;
padding: 0 20px;
font-size: 12px;
color: #fff;
background: none;
border-radius: 30px;
height: 2.3em;
width: 25em;
outline: none;
border: #fff solid 3px;
}
.login-link {
margin-top: 2.5rem;
}
.login-link a {
background-color: #0FCC41;
color: white;
margin-top: 10px;
border-radius: 30px;
font-size: 24px;
padding: 4px 38px 4px 38px;
border: 0;
cursor: pointer;
text-decoration: none;
}
.forgot {
margin-top: 0.8rem;
}
.forgot a {
font-size: 18px;
color: white;
text-decoration: none;
border-bottom: 0.5px solid white;
}
.sns-icon-erea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 2rem 0 0.5rem;
}
.sns-icon {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.sns-icon i {
color: #fff;
position: absolute;
top: 50%;
left: 52%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.footer {
height: 50vh;
width: 100%;
background-color: #2D2524;
}
/*#import "./footer";*/
* {
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
font-weight: 100;
}
body {
background-color: black;
}
h2 {
color: white;
text-align: center;
margin-bottom: 3rem;
font-size: 38px;
}
h3 {
color: white;
font-size: 33px;
}
h4 {
color: white;
font-size: 23px;
margin-top: 2rem;
}
.face {
background: #305097;
}
.twi {
background: #00aced;
}
.goo {
background: #db4a39;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<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">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="../css/swiper.css">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<title>landing page</title>
</head>
<body>
<div class="header">
<h1 class="logo">Dark Code</h1>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars" style="color: white;"></i>
</label>
<ul class="menu">
<div class="menu-list">
Register
Events
Login
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times" style="color: white;"></i>
</label>
</div>
</ul>
</div>
<div class="header2">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Home</li>
<li>Events</li>
<li>Profile</li>
<li>Log out</li>
</ul>
</div>
<input type="checkbox" class="openSidebarSearch" id="openSidebarSearch">
<label for="openSidebarSearch" class="sidebarIconSearch">
<i class="fas fa-search search_icon"></i>
</label>
<div id="sidebarSearch">
<div class="search-erea">
<div class="search-title">Enter the name of event</div>
<input type="text" class="search_text">
<div class="search-title">Choose tags</div>
<ul class="tag-list">
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
</ul>
<ul class="tag-list">
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
<div class="search-erea">
<div class="search-title">Categorys</div>
<div class="Category-list">
<dl class="Category">
<dt><img src="./image/martini.png" alt="bar-img"></dt>
<dd>bar</dd>
</dl>
<dl class="Category">
<dt><img src="./image/beer.png" alt="pub-img"></dt>
<dd>pub</dd>
</dl>
<dl class="Category">
<dt><img src="./image/dj.png" alt="club-img"></dt>
<dd>club</dd>
</dl>
</div>
</div>
<div class="search-erea">
<div class="search-title">Day</div>
<input type="text" class="Day-box">
</div>
</div>
</div>
<div class="background-img">
<div class="main_search">
<div class="search_content">
<form action="#" class="search">
<input type="text" class="search_text" placeholder="Enter the key words !">
<select name="select" id="select" class="Genre">
<option value="" hidden">genre</option>
<option value="1">bar</option>
<option value="2">pub</option>
<option value="3">club</option>
</select>
<input type="date" class="search_date">
<i class="fas fa-search search_icon"></i>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 4,
spaceBetween: 10,
centeredSlides : true,
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>
From a smartphone, it doesn't work, but if you check from PC, it works so I hope you can check this link from a smartphone.
thank you.
I checked both iOS and Android chrome browser.
And this issue is happening only in iOS.
So please check by iPhone.
I also experience this issue on iOS devices time to time.
z-index behaves different on iOS (no matter the browser). Even if you correctly index content on Z axis, it won't be shown correctly on iOS devices.
Workaround is, giving container div a higher z-index than background.
In your case #sidebarMenu {z-index: 100;} should work.
This looks like it might be an issue with iOS.
According to the specs, the CSS property z-index should only not work if an element has the default positioning:
position: static
Consequently, to ensure that z-index works, any of the following may be applied to the element (which we can see you're already doing):
position: relative
position: absolute
position: fixed
position: sticky
Further Reading:
position: static
The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no
effect. This is the default value.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position#values
I have the following two elements: a caption and a slider that I want to be displayed in one line, but I don't manage to do that.
What could I fix?
Thanks!
#biasindex {
position: fixed;
bottom: 40px;
width: 100px;
height: 15px;
right: 200px; /* "#menu width" */
font-size: 14px; /* change this value to increase/decrease button size */
/* width: 2em;
height: auto;*/
z-index: 10;
float: left;
}
.slidercaption {
display: inline-block;
float: left;
}
.slidecontainer {
width: 100%;
float: left;
display: inline-block;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
display: inline-block;
float: left;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div id="biasindex"><div class="slidercaption">bias index: </div><div class="slidercontainer"><input type="range" min="1" max="100" value="50" class="slider" id="biasRange">
</div></div>
Use dispaly:flex to wrap element.
Also use .slidercontainer in css instead .slidecontainer
#biasindex{
display:flex;
}
.slidercaption {
display: inline-block;
float: left;
}
.slidercontainer{
width: 100%;
float: left;
display: inline-block;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
display: inline-block;
float: left;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div id="biasindex">
<div class="slidercaption">bias index: </div>
<div class="slidercontainer"><input type="range" min="1" max="100" value="50" class="slider" id="biasRange">
</div>
</div>
Use flexbox. Remove float and add display flex
Below is the modified code
#biasindex {
position: fixed;
bottom: 40px;
width: 100px;
height: 15px;
right: 200px; /* "#menu width" */
font-size: 14px; /* change this value to increase/decrease button size */
/* width: 2em;
height: auto;*/
z-index: 10;
/*float: left;*/
display: flex;
}
.slidercaption {
display: inline-block;
float: left;
}
.slidecontainer {
width: 100%;
float: left;
display: inline-block;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
display: inline-block;
float: left;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
I'm able to achieve this effect, "the white range track going beyond yellow circle" on an HTML range slider using CSS, but when viewing the slider on google chrome the sliders track don't show the same effect as show in the images.
here is my code for the range slider :
.slider {
-webkit-appearance: none;
width: 615px;
margin: 25px 0;
height: 15px;
border-radius: 5px;
background: transparent;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
text-align: center;
}
.slider input {
text-align: center;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-runnable-track {
height: 5px;
width: 102%;
cursor: pointer;
background: #ffffff;
}
.slider::-moz-range-track {
height: 5px;
width: 102%;
cursor: pointer;
background: #ffffff;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
margin: -7px 0 0;
border: 0;
border-radius: 50%;
background: #F2E375;
cursor: pointer;
border: 0 !important;
}
.slider::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #F2E375;
cursor: pointer;
border: 0 !important;
}
.background {
background:#64c2c8;
}
<html>
<body class="background">
<input type="range" min="1" max="5" value="1" class="slider" id="mySlider" steps="1">
</body>
</html>
Padding worked for me:
padding-left: 10px;
padding-right: 10px;
.slider {
-webkit-appearance: none;
width: 615px;
margin: 25px 0;
height: 15px;
border-radius: 5px;
background: transparent;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
text-align: center;
}
.slider input {
text-align: center;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-runnable-track {
height: 5px;
width: 102%;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
background: #ffffff;
}
.slider::-moz-range-track {
height: 5px;
width: 102%;
cursor: pointer;
background: #ffffff;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
margin: -7px 0 0;
border: 0;
border-radius: 50%;
background: #F2E375;
cursor: pointer;
border: 0 !important;
}
.slider::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #F2E375;
cursor: pointer;
border: 0 !important;
}
.background {
background:#64c2c8;
}
<html>
<body class="background">
<input type="range" min="1" max="5" value="1" class="slider" id="mySlider" steps="1">
</body>
</html>
Hi guys I've created a toggle button from checkbox. I have a icon from awesome font as a css content. I've been trying almost everything but I'm not albe to align css content string in the middle of the circle.
Here is the css content part:
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
}
Here is full example
http://jsfiddle.net/vzjyyob4/
Thank you for your help
You can use text-align: center to get the icon centered horizontally, then set line-height to a desired value to get it aligned vertically.
Here is the CSS for the label:
text-align: center;
line-height: 32px;
Here is an updated JSFiddle: http://jsfiddle.net/vzjyyob4/1/
And here is an inline live demo:
.onoffswitch {
position: relative;
width: 94px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
height: 38px;
padding: 0;
line-height: 38px;
border: 2px solid #59B200;
border-radius: 38px;
background-color: #FFFFFF;
transition: all 0.3s ease-in;
}
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
text-align: center;
line-height: 32px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
border-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #fff;
background-color: #fff;
color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
Just add this CSS rule to align content:
.onoffswitch-label:before {
text-align: center;
}
try it here
Use either line-height property:
.onoffswitch-label:before {
text-align: center;
line-height: 32px;
}
Or flexbox:
.onoffswitch-label:before {
display: flex;
align-items: center;
justify-content: center;
}