I tried a lot of solutions here at stackoverflow but nothing is working.
a.buttongc {
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin: 10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
width: 100%;
overflow: hidden;
display: block;
}
.gc-button-center {
position: fixed;
left: 0;
right: 0;
display: block;
width: 100%;
bottom: 50px;
z-index: 999999999;
}
<div class="gc-button-center">
test
</div>
I want to have a margin left and right but it is only working at the left side and the button goes over the scrollbar. any solution?
Nothing fancy needed. Just remove your width: 100% If display is block, and width is not supplied, the width will auto size to fit the parent.
a.buttongc{
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin:10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
overflow:hidden;
display: block;
}
.gc-button-center{
position:fixed;
left:0;
right:0;
display:block;
width: 100%;
bottom: 50px;
z-index:999999999;
}
<div class="gc-button-center">
test
</div>
Just change width: calc(100% - 20px); for subtract margin
a.buttongc{
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin:10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
width: 100%;
overflow:hidden;
display: block;
}
.gc-button-center{
position:fixed;
left:0;
right:0;
display:block;
width: calc(100% - 20px);
bottom: 50px;
z-index:999999999;
}
<div class="gc-button-center">
test
</div>
Related
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>
Observe the following banner I have:
I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.
JS Fiddle: http://jsfiddle.net/z63234p1/
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
<header id="masthead" class="site-header" role="banner">
<button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
<div class="site-branding">
<div id="sitelogo" class="clear">
<h1 class="site-title">My Website</h1>
<h2 class="site-description">Your Go To Stop</h2>
</div>
</div>
</header>
I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.
Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?
Thank you in advance.
Use this Css:
<style type="text/css">
#masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 73px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 4px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 6px 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
</style>
New css for #sitelogo:
display: inline-flex;
align-items: stretch;
New css for .site-title:
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
New css for .site-description:
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
padding: 0 16px;
font-size: 3vh;
display: flex;
align-items: center;
justify-content: center;
Besides that I strongly suggest to not use vh for font-size.
I messed around with your line height of site-title as well as line height and height of site-description. Here's my result:
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: 58px;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 108%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 3.7;
float: left;
clear: none;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
Here's a diff compare to see the differences: http://www.mergely.com/vGQedH1p/ Is this what you were looking for?
I have some CSS applied to a few divs. It looks all good on windows, but it behaves differently on Mac on the event of mouse over.
The behavior can be seen here. If you could manage opening it on Mac and on Windows you will notice the difference.
I would appreciate if some can tell me how can i make it behave similar as it behaves on windows. Again, i want it to behave as it behaves on Windows.
I will show my code here as well.
The html
<div class="goal" >
<div class="top-layer" >
<div class="component">
<select class="component-select">
<option value="">select me </option>
<option value="">option one</option>
<option value="">option two</option>
<option value="">option three</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="period" >
<select class="period-select">
<option value="">something</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="close clickable" >X</div>
</div>
and the CSS,
.noselect, .clickable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clickable {
cursor: pointer;
/*border: 1px solid transparent;*/
}
.clickable:hover {
/*border: 1px solid #4D7994;*/
background: #3f6379;
}
[contenteditable="true"].single-line {
white-space: nowrap;
overflow: hidden;
display: inline-block;
margin-bottom: -7px;
height: 12px;
max-width: 60px;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
.goal {
position: relative;
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 14px;
margin-bottom: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.goal span[contenteditable=true] {
padding: 5px;
border: 1px solid #5A8EAE;
padding-left: 2px;
}
.goal span[contenteditable=true]:focus {
background-color: white;
color: black;
border: 1px solid #5A8EAE;
min-width: 10px;
}
.top-layer{
width: 100%;
height: 33px;
float: left;
font-size: 12px;
font-weight: bold;;
}
.component{
float: left;
width: 63%;
padding: 2.5% 3% 3% 2%;
}
.period{
float: left;
padding-top: 10px;
}
.close{
float: right;
padding: 2.8%;
border-left: 1px solid #9FBDCF;
}
select.period-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
border-radius: 2px;
background-color: #5A8EAE;
color: white;
font-weight: bold;
width:auto;
direction: ltr;
float: right;
font-size: 12px;
padding: 3px 0;
margin-top: -6px;
}
select.period-select:hover, select.component-select:hover {
-webkit-appearance: menulist;
background-color: #3f6379;
color: white;
}
select.component-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
background-color: #5A8EAE;
font-size: 12px;
font-weight: bold;
width:240px ;
padding: 3px 0;
margin-top: -6px;
padding-left:0px;
margin-left:0px;
}
select:hover {
cursor: pointer;
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
}
Project
adding circles that expands when users hover, on an image so it adds interesting animation to it.
Problem
After I was done I realized that depending on the screen display used, the elements (red balls) I put over the image are in different locations. How can I do this so it works on all devices except mobile.
You will get a better idea of what im doing when you see the demo
HTML
<div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="circle-top-left">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 1
</div>
</div>
</div>
<div class="circle-top-right">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 3
</div>
</div>
</div>
<div class="circle-bot-right">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting
</div>
</div>
</div>
<div class="circle-bot-left">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 4
</div>
</div>
</div>
</div>
CSS
.footer_top_holder {
border-top: #17171A solid 8px;
box-shadow: none;
}
/* Home page tree image CSS */
* {
box-sizing: border-box;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
.circle-top-left {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 103.5px;
left: 26.3%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-top-left:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 160px;
top: 45px;
}
.circle-top-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 49.5px;
left: 52.5%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-top-right:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 49%;
top: 35px;
}
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 267.5px;
left: 75%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-bot-right:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 74%;
top: 215px;
}
.circle-bot-left {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 379px;
left: 19.6%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-bot-left:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 8%;
top: 320px;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
Demo
You can get your element circles to start out on top of the image's circles by replacing your hard-coded left styles with the following:
.circle-top-left {
left: calc(50% - 260px);
}
.circle-top-right {
left: calc(50% + 29px);
}
.circle-bot-right {
left: calc(50% + 275px);
}
.circle-bot-left {
left: calc(50% - 335px);
}
CodePen 1
If you want the circles to always expand in place, replace your hard-coded left and top hover styles with the following:
.circle-top-left:hover, .circle-top-right:hover,
.circle-bot-right:hover, .circle-bot-left:hover {
transform: translate(-90px, -90px);
}
CodePen 2
I’m looking for a way to make sure that all label have the same space to the bottom border. (It should look like the image, and not like the fiddle)
JsFiddle
Goal:
My CSS:
.outerDiv {
text-align: center;
/*display: inline-block;*/
float: left;
border-radius: 10px;
border: 2px solid #c3c3c3;
height: 100px;
width: 100px;
margin: 5px;
}
.innerDiv {
width: 80%;
height: 100%;
line-height: 50px;
margin: 0 auto;
}
.errorLabel {
background-color: #a90329;
padding: .2em .6em .3em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
}
Your vertical-align doesn't have any affect due to your display: block.
Try changing vertical-align to "bottom" and display to "inline-block". Then adjust your bottom margin/padding to your desire!
.errorLabel {
background-color: #a90329;
padding: .2em .6em .3em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: bottom;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: inline-block;
margin-bottom: 0.5em;
width: 100%;
}
Edit:
Added width: 100%; to keep the labels the full width.
As #RokoC.Buljan pointed out in the example in the comments, this can be accomplished with cleaner CSS. My example above is just a few small modifications on the OP's original code (in case those classes are used elsewhere too). :)
Absloute positioning would seem the logical choice.
.errorLabel {
background-color: #a90329;
padding: .2em .6em .2em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
margin-bottom: 5px;
}
.outerDiv {
text-align: center;
/*display: inline-block;*/
float: left;
border-radius: 10px;
border: 2px solid #c3c3c3;
height: 100px;
width: 100px;
margin: 5px;
}
.innerDiv {
width: 80%;
height: 100%;
line-height: 50px;
margin: 0 auto;
position: relative
}
.errorLabel {
background-color: #a90329;
padding: .2em .6em .2em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: 5px;
}
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">OK</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">Error2</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">
Line1<br/>
Line2
</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">
Line1<br />
Line2
</span>
</div>
</div>
You can fiddle with the bottom amount:
http://jsfiddle.net/z7hL3any/5/
add:
.errorLabel {
position: relative;
}
.innerDiv {
position: absolute;
bottom: 5px;
width: 100%; }
try this
.errorLabel {
background-color: #a90329;
border-radius: 0.25em;
bottom: 0;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 100%;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
overflow: hidden;
padding: 0.2em 0.6em 0.3em;
position: absolute;
text-align: center;
vertical-align: baseline;
width: 100%;
}
.it should also work