I'm having trouble understanding why my images don't shrink when I shrink/resize my Chrome. Can someone explain and help me?
I have been trying for a while now but I can't seem to figure it out or find the answer elsewhere. The image shrinks in firefox running on my localhost, but not inside jsfiddle. Still not working in Chrome(57.0.2987.110).
<div class="page">
<div class="container">
<div class="title">
<H1>FLEXBOX PRACTICE</H1>
</div>
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="images">
<img src="http://www.placebacon.net/1280/720" alt="Bacn">
</div>
</div>
</div>
body {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
h1 {
font-size: 72px;
margin: 20px 0;
}
.page {
width: 100vw;
height: 100vh;
background-color: pink;
}
.container {
margin: 0 auto;
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
}
.content {
display: flex;
justify-content: space-between;
height: 80vh;
width: 60vw;
align-items: center;
background-color: salmon;
}
.text {
flex-grow: 0;
padding: 10px 20px 10px 20px;
background-color: red;
color: white;
border-radius: 10px;
width: 340px;
font-size: 24px;
font-family: verdana;
}
.images {
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
max-width: 600px;
width: 600px;
background-color: yellow;
}
.images img {
display: flex;
flex-grow: 1;
flex-shrink: 1;
max-width: inherit;
width: inherit;
}
https://jsfiddle.net/xb4obfce/
You're telling the image to inherit the width of its parent, which is at 600px.
Changing the .images class to width: 100%; should make it responsive.
Related
How can I make an image fill the full height in a flexbox item? The image should be stretched to fill the height while keeping the aspect ratio.
body {
background: #20262E;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
}
.banner-message .banner-message-media {
flex: 1;
}
.banner-message .banner-message-content {
padding: 20px;
flex: 2;
}
<div class="banner-message">
<div class="banner-message-media">
<img src="https://picsum.photos/id/1068/250/150" />
</div>
<div class="banner-message-content">
<h3>Content Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae delectus, quod veniam necessitatibus saepe error dicta voluptatem vitae incidunt nulla fugit! Quasi minus libero reiciendis similique cupiditate eum veniam tenetur.</p>
</div>
</div>
Add height:100%; and width:fit-content;
img {
height: 100%;
width: fit-content;
}
SCCS:
body {
background: #20262E;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
.banner-message-media {
border-radius: 10px;
flex: 1;
img {
height:100%;
width:fit-content;
}
}
.banner-message-content {
padding: 20px;
flex: 2;
}
}
body {
background: #20262e;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
}
.banner-message .banner-message-media {
border-radius: 10px;
flex-grow: 1;
}
.banner-message .banner-message-content {
padding: 20px;
flex-grow: 2;
}
img {
height: 100%;
width: fit-content;
}
<div class="banner-message">
<div class="banner-message-media">
<img src="https://picsum.photos/id/1068/250/150" />
</div>
<div class="banner-message-content">
<h3>Content Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae delectus, quod veniam necessitatibus saepe error dicta voluptatem vitae incidunt nulla fugit! Quasi minus libero reiciendis similique cupiditate eum veniam tenetur.</p>
</div>
</div>
Use object-fit property in your .banner-message-media css class. Like this
object-fit: fill or object-fit: cover.
I am learning how to create responsive websites for a desktop, tablet, and mobile using CSS3 media queries. I created a fictional site to practice but I am having trouble with the menu-icon and the horizontal menu. In the desktop view, the menu is supposed to be horizontal and float to the right but instead, it's vertical. When I shrink the screen to the mobile dimensions the menu-icon shows up and the horizontal menu. I want the menu-icon to show on the mobile-view but it's not dropping the menu down. Can someone please tell me what I am doing wrong? Thank you.
I have tried reversing the menu code in the media queries and my regular CSS code but the menus are still not working properly. I also for the display for the menu code I put none but all that did was have the all the menus disappear altogether. I have looked at numerous tutorials, but none of them helped me.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8">
<title>Abstract Alibi Agency</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<header>
<h1>Abstract Alibi Agency</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<h2>We'll catch them in the act.</h2>
</div>
</section>
<section class="main">
<aside>
<h3>Background Checks</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<section>
<aside>
<h3>Investigate Infidilty</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<section>
<aside>
<h3>Security</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<footer>© Abstract Alibi Agency 2018 - All Rights Reserved.</footer>
</div>
</body>
</html>
CSS:
body {
font-family: 'Times New Roman', sans-serif;
font-size: 1em;
color: #000;
margin: 0;
padding: 0;
background-color: #999;
}
#container {
width: 100%;
margin: 0 auto;
position: absolute;
}
header {
padding: 5px;
background: #000;
width: 100%;
height: 76px;
position: fixed;
}
h1 {
margin-left: 10px;
color: #00F;
font-size: 1.5rem;
display: inline-block;
}
h3 {
color: #00F;
text-align: center;
}
nav {
float: right;
padding: 5px;
font-family: 'Georgia', sans-serif;
}
#menu-icon {
background: url(../img/menu-icon.png);
display: hidden;
width: 50px;
height: 42px;
float: right;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
.hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
background: url(../img/couple.jpg) no-repeat;
background-size: cover;
background-position: center;
border-bottom: #000 2px solid;
z-index: -1;
}
.hero h2 {
width: 100%;
padding: 80px;
color: #FFF;
text-align: center;
}
section .main aside {
max-width: 425px;
text-align: left;
}
aside {
width: 100%;
float: none;
}
p {
margin: 35px;
}
footer {
width: 100%;
margin-top: 0;
padding: 15px;
background-color: #000;
color: #999;
text-align: center;
}
#media (min-width: 640px) { /* targets screens 640px and up */
h3 {
margin: 30px;
color: #00F;
text-align: left;
}
header {
position: relative;
}
nav {
float: right;
padding: 5px;
font-family: 'Georgia', sans-serif;
}
#menu-icon {
display: none;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 10%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 15px 0;
margin: 0;
}
section .main aside {
text-align: left;
}
aside {
width: 33.3%;
float: left;
}
footer {
margin-top: 0;
padding: 15px;
background-color: #000;
color: #999;
text-align: center;
clear: both;
}
}
I want only the mobile version to show the menu-icon and have it drop down when clicked on and the tablet and desktop version to show the horizontal menu.
set nav ul width 25% and remove nav li width and add last line current width #media (max-width: 640px) { nav ul{ width:10%; } nav li{ width:100%} } like this
#media (min-width: 640px) {
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 25%;/* set to little more because Items can fit in horizontal */
}
nav li {
text-align: center;
/*width: 100%; remove li width than its should set auto 100% means 100% of parent(ul) and this makes a row(in block view)*/
padding: 15px 15px;/*some padding for visibility*/
margin: 0;
}
}
#media (min-width: 640px) {
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 10%;/*back to the you first width*/
}
nav li {
text-align: center;
width: 100%;/*open width for row to row view*/
padding: 15px 0px;/*remove padding to normal*/
margin: 0;
}
}
mobile version to show the menu-icon and have it drop down when
clicked
Width some jquery
$('.menu-icon').click(function () {
$("nav").toggleClass("nav-hidden-mobile");
});
and in your html <nav> to <nav class="nav-hidden-mobile">
and class css #media (max-width: 640px) { .nav-hidden-mobile{ display:none; } }
should be work, not tried this but upper css tried (before write first comment), its working
Good day,
I'm not new to CSS or DIVs but have been out of touch for long enough. Trying to work out with Containers and nested DIVs but not getting much success in doing what I'm trying to do. Have already searched enough on SO and Goog but, hopefully you can help me.
Here's the representation of what I wish to achieve.
Screenshot of the layout
And here is what I have done so far ..
.dealsglobal {
width: 45%;
display: inline-block;
float: left;
margin-right:20px;
height: auto;
overflow: auto;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia {
width: 45%;
height: auto;
overflow: auto;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
float: left;
display: inline-block;
overflow: auto;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
display: inline-block;
overflow: auto;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="dealsleft">
<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
<div class="dealsindia">
<h2>Indian Coupons</h2>
<div class="dealsleft">
Test
</div>
<div class="dealsright">
Test
</div>
</div>
The image just wont center, no matter what I do. I believe, somewhere I have set the property to align left or something. Can anyone please point me to the correct direction? Thanks for your help!
I changed your code a little bit, but you'll get idea :
Here is html :
<div class="container">
<div class="left">
<h2 class="inner-text">title</h2>
<div class="image">
<img src="http://via.placeholder.com/350x150" />
</div>
<h5 class="inner-text">description</h5>
</div>
<div class="right">
<h2 class="inner-text">title</h2>
<div class="image">
<img src="http://via.placeholder.com/350x150" />
</div>
<h5 class="inner-text">description</h5>
</div>
<div style="clear: both" />
</div>
And here is the css:
.container{
width: 98%;
border: 2px solid #f00;
padding: 10px;
}
.left {
width: 47%;
float: left;
margin: 0 1% 0 1%;
border: 1px solid green;
}
.right {
width: 47%;
float: left;
margin: 0 1% 0 1%;
border: 1px solid green;
}
.inner-text{
text-align:center;
}
.image{
padding: 20px;
}
.image img{
max-width: 100%;
}
Check here jsfiddle.
You missed adding this css property:
.dealsleft {
text-align:center;
}
You can center elements inside a div by using text-align:center; for all the text elements like: h1, p, h2, a etc. To center an img or a div inside another div you can use margin: 0 auto; the auto is the important part for centering the left and right margins.
More info here
i've updated your code snippet.
.dealsglobal {
width: 45%;
display: inline-block;
float: left;
margin-right:20px;
height: auto;
overflow: auto;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia {
width: 45%;
height: auto;
overflow: auto;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
float: left;
display: inline-block;
overflow: auto;
text-align: center;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin: 5px auto;
width: 100px;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
display: inline-block;
overflow: auto;
text-align: center;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="dealsleft">
<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
<div class="dealsindia">
<h2>Indian Coupons</h2>
<div class="dealsleft">
Test
</div>
<div class="dealsright">
Test
</div>
</div>
I have added background colors for visualization purposes.
* {
box-sizing: border-box;
}
#container {
width: 100%;
padding: 10px;
background-color: red;
display: flex;
justify-content: space-between;
}
.subcontainer-outer {
width: 49%;
background-color: green;
}
.subcontainer {
width: 100%;
background-color: blue;
display: flex;
justify-content: space-between;
}
.content {
width: 45%;
text-align: center;
background-color: yellow;
}
<h3>Container</h3>
<div id="container">
<div class="subcontainer-outer">
<h4>Sub container 1</h4>
<div class="subcontainer">
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="subcontainer-outer">
<h4>Sub container 2</h4>
<div class="subcontainer">
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
You can get it by using flex below an example as your requirement.
.dealsglobal {
width: 48%;
margin-right: 10px;
height: auto;
float: left;
}
.flex {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row nowrap;
border: 1px solid red;
padding: 10px;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
flex: 1 0 0;
align-self: flex-start;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
overflow: auto;
flex: 1 0 0;
align-self: flex-start;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="flex">
<div class="dealsleft">
<img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
</div>
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="flex">
<div class="dealsleft">
<img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
</div>
Here is working fiddle
fiddle
You are probably looking for any of these 2:
parentSelector {
display: block; /* can also be an inline-block, with set width */
text-align: center;
}
childSelector {
width: 60%; /* generic. Change it */
display: block;
margin: 0 auto;
}
... or:
parentSelector {
display: flex;
flex-direction: column;
align-items: center;
}
childSelector {
max-width: 60%; /* optional. Change it.
* You don't need to set width here and,
* it's OK not to limit max-width, either
*/
}
i created a responsive rectangle and a responsive triangle with css only.
How can i align the triangle so it is always vertically centered on the right side of the box?
I´d like to do it just with css but if it is not possible i appreciate any hint for alternative options.
HTML:
<div class="container">
<div class="box green rightbox">
<div class="innerbox">Lorem ipsum....</div>
</div>
<div class="mother-triangle">
<div class="triangle-right green"></div>
</div>
</div>
CSS:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
z-index: 1;
position: relative;
}
.box {
height: auto!important;
min-height: 300px;
}
.box.green {
background-color: rgba(51, 223, 9, 0.75)!important;
}
.innerbox {
padding: 12px;
}
.triangle-right {
width: 0;
height: 0;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 10%;
overflow: hidden;
position: relative;
margin-top: auto;
margin-bottom: auto;
display: inline-block;
vertical-align: middle;
}
.triangle-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top: -500px;
margin-left: -500px;
border-top: 500px solid transparent;
border-bottom: 500px solid transparent;
border-left: 500px solid rgba(51, 223, 9, 0.75);
}
.rightbox {
width: 90%;
float: left;
}
JSFiddel demo:
You can use absolute positioning to do that.
Just change position: relative to position: absolute in .triangle-right.
Add top: 50% to move the triangle to the vertical middle.
Updated fiddle
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
z-index: 1;
position: relative;
}
.box {
height: auto!important;
min-height: 300px;
}
.box.green {
background-color: rgba(51, 223, 9, 0.75)!important;
}
.innerbox {
padding: 12px;
}
.triangle-right {
width: 0;
height: 0;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 10%;
overflow: hidden;
position: absolute;
margin-top: auto;
margin-bottom: auto;
display: inline-block;
vertical-align: middle;
top: 50%;
}
.triangle-right:after {
position: absolute;
content: "";
display: block;
width: 0;
height: 0;
margin-top: -500px;
margin-left: -500px;
border-top: 500px solid transparent;
border-bottom: 500px solid transparent;
border-left: 500px solid rgba(51, 223, 9, 0.75);
}
.rightbox {
width: 90%;
float: left;
}
<!-----container start---->
<div class="container">
<div class="box green rightbox">
<div class="innerbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="mother-triangle">
<div class="triangle-right green"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-----container end ---->
Okay, so I've been practicing yesterday and after a few hours I checked this in Chrome (was working with firefox). How should i fix that?
I don't know where does it take the ridiculous height from.
Here's the preview i get (left is firefox, right is chrome)
Styling:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0,0,0,0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0,1,.83,.67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Sctructure:
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
Can't get this to work.
This is what I have in chrome..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title> Stack Overflow issues</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;
;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0, 0, 0, 0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0, 1, .83, .67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
</style>
</head>
<body>
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
</body>
</html>