I am trying to mimic a typical modal. When a user clicks something, the modal shows up, with a transparent background that is full-screen and fixed.
Currently I have this:
.thank-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100%;
height: 100vh;
overflow: hidden;
background: rgba(222, 222, 222, 0.7);
}
<div class="thank-outer" id="thankyou"> Some text </div>
The height of the div isn't the browser's height, but the full page content height, so it's scrollable.
How to change it so that the height of the div is just the browser's height?
You can easily achieve this by setting the body element's overflow property to hidden. This cuts off all elements that overflow off of the screen (and would make scroll bars).
const $modal = document.querySelector('.modal');
const $button = document.querySelector('button');
// Opening modal
$button.addEventListener('click', () => {
document.body.classList.toggle('modal-visible');
$modal.classList.toggle('visible');
});
body.modal-visibile {
/* remove scroll bars when modal visible */
overflow: hidden;
}
.modal {
/* it is initially hidden */
display: none;
/* it will span whole screen */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
/* make it on top of all elements */
z-index: 1000;
overflow: hidden;
pointer-events: all;
/* make the background white, but also with 80% opacity */
background: rgba(222, 222, 222, 0.8);
}
.modal.visible {
display: block;
}
button {
position: relative;
z-index: 1001;
}
<button>Toggle Modal</button>
<h1>Some amazing content</h1>
<h2>Hopefully you enjoy this awesome content.</h2>
<p>Why are you still reading this? Just click the button!</p>
<div class="modal">
<h1>It's a whole new world!</h1>
</div>
<html>
<head>
<style>
body{
height:100%;
width:100%;
margin:auto;
}
#thankyou{
height:100%;
width:100%;
background: rgba(222, 222, 222, 0.7);
}
</style>
</head>
<body>
<div class="thank-outer" id="thankyou">
Some text
</div>
</body>
</html>
Here's my favorite pure CSS method to create a modal, still needs a bit of work for it to be 100% responsive but the basic skeleton is there.
The modal can contain elements and clicking outside the modal will close it. There's also a close button within it.
open in full screen for demo purposes.
/* essential code */
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: rgba(0, 0, 0, .5)
}
.closeoverlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
display: block;
z-index: 2;
position: fixed;
cursor: pointer;
}
.closebutton {
color: red;
text-decoration: none;
font-size: 30px;
margin: 0 auto;
display: table;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal:target>.closeoverlay {
display: block;
}
.modal>div {
width: 300px;
height: 500px;
max-width: 75vw;
max-height: 75vh;
text-align: center;
position: relative;
background: #131418;
z-index: 3
}
.wrap,
.modal {
display: flex;
align-items: center;
justify-content: center
}
/*demo fluff follows */
p {
color: green;
font-size: 20px;
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
display: block;
}
.minion {
opacity: .7;
margin: 0 auto;
max-width: 50%;
max-height: 50%;
}
button {
margin: 2em 0 0 0;
cursor: pointer;
}
.closebutton:hover {
color: white;
cursor: pointer;
}
.clutter {
margin: 2em auto;
padding: 40px;
width: 400px;
max-width: 100%;
text-align: justify;
}
#keyframes rotate {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
;
}
}
<div class="wrap">
<button>Are you ready to enter the modal?!</button>
<div id="M" class="modal">
<div class="modal-content">
<a class="closebutton" href="#">×</a>
<img class="minion" src="https://68.media.tumblr.com/b7a2e2b2d3a3a21ce6e38ee9f24d10a0/tumblr_nwivayrZFM1u95rdno1_400.gif">
<p>Welcome to the modal!</p>
</div>
</div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
Strip steak pork chop sirloin, tenderloin pork loin drumstick pig t-bone hamburger tail short ribs. Prosciutto burgdoggen leberkas landjaeger venison, meatloaf flank pork chop sausage bresaola tenderloin. Ham cow t-bone leberkas capicola turkey, jowl
biltong chicken. Salami venison sirloin bresaola chicken. Ground round bacon chuck pastrami capicola tongue t-bone spare ribs leberkas. Short ribs beef andouille jerky shank ham hock. Rump hamburger boudin, short loin doner capicola cow spare ribs salami.
Chicken hamburger strip steak filet mignon salami turkey doner frankfurter ball tip kevin porchetta andouille tongue cupim. Short loin bresaola pork chop porchetta pancetta. Sirloin burgdoggen ground round short loin corned beef cupim porchetta bresaola
brisket leberkas pork chop. Leberkas salami cupim short loin prosciutto pastrami ham ground round strip steak bacon. Jowl brisket beef corned beef pancetta sausage pastrami shank swine. Tri-tip pork belly capicola ball tip tongue pork loin. Rump andouille
swine, pig tenderloin tail hamburger ribeye short loin picanha leberkas porchetta ham beef pork. Biltong bresaola meatball shank tail andouille. Pig spare ribs short ribs ground round pork chop salami turducken.</div>
Related
I am trying to build a simple responsive two columns template, and the two paragraphs are suppose to stack one another when the width being reduced to 1000px. However, I realized that two paragraphs have been pushed to the left and only have 50% of the width just before the screen size being reduced down to 1000px, then after the screen size reached to 1000px, the two paragraphs behaves normally, but what happened in between? how do I solved it.
Codepen Link
*,
body {
padding: 0;
margin: 0;
}
body {
width: 95%;
margin: 0 auto;
}
header {
width: 100%;
height: 3em;
color: #00;
font-family: sans-serif;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, .3)
}
header p {
font-size: 1.25em;
font-weight: 700;
color: #FFF;
font-family: sans-serif;
margin-left: 10px;
text-transform: uppercase;
}
header nav {
list-style: none;
margin-right: 10px;
;
}
header nav a {
text-decoration: none;
color: rgba(255, 255, 255, 1);
padding: 10px;
font-weight: 400;
text-transform: uppercase;
}
header nav a:hover {
color: blue;
text-decoration: underline;
}
main section {
float: left;
width: 48%;
margin: 5px 10px;
text-align: justify;
}
.clear {
clear: both;
}
footer {
width: 100%;
background: #eeeeee;
text-align: center;
margin-top: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: deeppink;
}
#media (max-width:1000px) {
main section {
width: 100% !important;
float: none !important;
}
main section p {
width: 100%;
min-width: 100%;
}
}
<body>
<header>
<p>Logo</p>
<nav> Home Contacts Locations </nav>
</header>
<main>
<section>
<p>Biltong bresaola salami rump, ground round tongue turkey meatloaf jowl. Tail andouille doner, hamburger shoulder short ribs ham hock alcatra strip steak turducken pancetta cupim leberkas. Landjaeger venison kevin ham hock capicola, jerky ribeye
rump burgdoggen tenderloin pork. Picanha rump biltong pastrami, cupim corned beef prosciutto salami.</p>
</section>
<section>
<p>Sausage fatback cow, venison bacon shoulder boudin strip steak short loin burgdoggen picanha. Pig cow brisket pork chop. Turducken kevin ground round, beef frankfurter biltong turkey tongue pig ham hock alcatra. Pork t-bone rump venison chuck filet
mignon pork belly. Cow pork chop alcatra capicola sausage, landjaeger turkey beef pancetta. Buffalo doner pork loin, pork chop frankfurter t-bone shankle leberkas cupim sirloin tenderloin filet mignon strip steak corned beef.</p>
</section>
</main>
<div class="clear"></div>
<footer> Design & create artwork ©copyright 2018 </footer>
</body>
The problem is that you are giving margin in px but your width is in %...so try to use margin left and right in % like
main section {
float:left;
margin: 5px 1%;
width: 48%;
text-align: justify;
box-sizing: border-box;
}
Or another solution will be which I recommend use padding instead of margin and apply width:50% to the main section
main section {
float:left;
width: 50%;
text-align: justify;
padding: 5px 10px;
box-sizing: border-box;
}
Updated Codepen
you need to change margin: 5px 1%;
main section{
float:left;
width:48%;
margin: 5px 1%;
text-align:justify;
}
for width:100% in some screen, margin 10px is more then 1% so
How can I get the image to cover the whole screen?
CSS:
.parallaxBg {
background-image: url("image_test.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML:
<div class="parallaxBg">
</div>
You need to set the body height to 100%:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
And the parallaxBg height to 100% too:
height: 100%;
Example:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
#parallaxBg {
/* The image used */
background-image: url("https://placeimg.com/1000/800/any");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
position: relative;
top: 600px;
height: 300px;
font-size: 2em;
background: blue;
padding: 2em;
}
<div id="parallaxBg">
<div class="text">
Bacon ipsum dolor amet corned beef doner pig filet mignon t-bone pancetta beef tongue ground round meatball pork belly landjaeger tail. Turducken flank pork t-bone, shoulder pastrami short loin drumstick jowl tail bresaola strip steak tenderloin frankfurter. Corned beef short loin chuck venison pork jerky. Jowl leberkas cupim turkey flank drumstick porchetta strip steak ham hock tail shoulder ball tip brisket tri-tip. Beef ribs bresaola short ribs cow tenderloin, jerky ball tip shankle pastrami shoulder t-bone.
</div>
Hope it's what you're asking for!
I am trying to create tabs similar to this - http://i.stack.imgur.com/KdBi0.jpg
After searching on web I found code for the tabs. I am facing the problem to design it according to the above screenshot.
I want to create a full width tab with a static content on the right side. If you check the screenshot, There is full width border on top and bottom of the tabs.
In the screenshot, on the right side there is "rewards" section, I want it something like that to remain even if the user click on different tabs.
Here's my code
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
#import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 11px 11px;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #878585;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 5px;
}
label[for*='1']:before {
content: '\f040';
}
label[for*='2']:before {
content: '\f27b';
}
label[for*='3']:before {
content: '\f003';
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #252424;
border: 1px solid #ddd;
border-top: 2px solid #ed1c24;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#media screen and (max-width: 650px) {
label {
font-size: 15px;
}
label:before {
margin: 5px;
font-size: 15px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Campaign</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Comments</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Contact</label>
<section id="content1">
<h2>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</h2>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
<p>comments</p>
</section>
<section id="content3">
<p>contact</p>
</section>
you want this ? considering your image.
Just added as per your requirement. just added one parent to both tab div and right side content div and applied css as you want. Hope it helps you. Thanks.
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
#import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top:1px solid #eee;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 11px 11px;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #878585;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 5px;
}
label[for*='1']:before {
content: '\f040';
}
label[for*='2']:before {
content: '\f27b';
}
label[for*='3']:before {
content: '\f003';
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #252424;
border-bottom: 2px solid #29DE75
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#media screen and (max-width: 650px) {
label {
font-size: 15px;
}
label:before {
margin: 5px;
font-size: 15px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
.parent{
width:100%;
}
.child{
width:60%;
float:left;
}
.side-content{
width: 30%;
display: inline-block;
margin: 75px 20px;
}
<div class="parent">
<div class="child">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Campaign</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Comments</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Contact</label>
<section id="content1">
<h2>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</h2>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
<p>comments</p>
</section>
<section id="content3">
<p>contact</p>
</section>
</div>
<div class="side-content">
<p>kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutt</p>
</div>
</div>
I am fairly new to html and css and I have been tasked to create a layout with irregularly shaped borders as depicted here: frame pic
I removed all the other content. I currently have no clear handle on how to approach the white area with the triangular pointer pointing at the button.
(That shape will contain more content.)
What would you suggest?
One method would be to rotate a square div by 45 degrees and have two borders visible.
Using the snippet provided by #quid:
#arrow {
background: #ffffff;
border-top: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
position: absolute;
height: 30px;
width: 30px;
top: 0;
right: 20px;
margin-top: -16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(45deg);
}
added the arrow from #Banderi
Here's a fiddle with this working: http://jsfiddle.net/frnm9ymo/7/
With this most recent edit I even matched the colors for you.
It's not the most elegant solution I'm sure, but it works. You just make the arrow image match the colors of the box then overlap the border by whatever the width of the border is. Inside the red box would be a png image with a transparent background. The most important thing to remember is the arrow div will be "absolute" positioned and it's parent div must be "relative" positioned.
CSS:
* {
font-family: arial;
}
#wrapper {
background: #c7dae7;
width: 400px;
nin-height: 400px;
display: block;
float: left;
}
#container {
margin: 20px;
display: block;
background: #f6f7fb;
border: 1px solid #dfe2eb;
}
#titlebar {
margin: 0;
padding: 15px 20px;
display: block;
background: #fff;
overflow: none;
min-height: 30px;
border-bottom: 1px solid #dfe2eb;
}
#contents {
margin: 0 0 -40px 0;
padding: 7px;
display: block;
}
#textwrap {
margin: 5px;
padding: 10px 20px;
display: block;
background: #ffffff;
border: 1px solid #dcdcdc;
position: relative;
-webkit-border-radius: 15px 5px 15px 5px;
-moz-border-radius: 15px 5px 15px 5px;
border-radius: 15px 5px 15px 5px;
}
textwrap p {
z-index: 100;
}
#enter {
float: right;
width: 80px;
padding: 7px;
background: #4992e6;
color: #fff;
font-weight: bold;
border: 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#arrow {
background: #ffffff;
border-top: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
position: absolute;
height: 30px;
width: 30px;
top: 0;
right: 30px;
margin-top: -17px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(45deg);
z-index: 50;
}
HTML:
<div id="wrapper">
<div id="container">
<div id="titlebar">
text
<button id="enter">
ENTER
</button>
</div>
<div id="contents">
<div id="textwrap">
<div id="arrow">
</div>
<p>
VHS artisan forage cornhole echo park, PBR&B ugh lomo poutine readymade cray gastropub wolf YOLO. Ugh tattooed umami, brooklyn VHS chambray crucifix celiac fixie. Pabst ennui neutra, chia truffaut brunch microdosing chartreuse flexitarian heirloom typewriter. Bushwick tattooed four dollar toast ramps, lomo sartorial pabst bicycle rights. Viral brunch direct trade chartreuse. Vegan squid pinterest, umami sartorial intelligentsia truffaut vice freegan normcore beard venmo pour-over. Direct trade knausgaard master cleanse plaid, wayfarers kogi kombucha keffiyeh.
Mustache chicharrones meggings, kale chips distillery yuccie lumbersexual shabby chic beard master cleanse crucifix blue bottle pour-over venmo. Sustainable pabst cronut whatever kale chips cliche everyday carry kinfolk, fap chicharrones gluten-free meggings microdosing umami. Irony selvage jean shorts synth gastropub, roof party keytar. Franzen fixie lumbersexual, mustache church-key flannel synth everyday carry gluten-free chartreuse pitchfork shoreditch. Tumblr viral chillwave mlkshk paleo. Jean shorts swag meggings pabst distillery tote bag. Pour-over messenger bag PBR&B cold-pressed VHS.
</p>
</div>
</div>
</div>
</div>
I have a two collumn footer that doesn't resize when I make my browser smaller (columns just stack on to of eachother) and hit the 3rd breakpoint in media queries. Any idea what should I change? Complete fiddle is here: https://jsfiddle.net/Cilvako/9wkquboa/
<footer>
<div class="small_left">
<p>Bacon ipsum dolor amet shoulder spare ribs venison cow salami, turducken ham hock tail bacon tri-tip. Ground round jowl filet mignon cupim. Drumstick ribeye porchetta cow andouille. Jerky sirloin kevin ribeye salami doner ground round. Beef ribs pork
porchetta meatloaf doner swine jowl tail kielbasa tenderloin frankfurter rump meatball. Beef meatball jerky andouille, corned beef doner chicken tri-tip pastrami porchetta spare ribs ham meatloaf. Bresaola capicola frankfurter filet mignon turducken</p>
</div>
<div class="small_right">
Turducken cow tenderloin, landjaeger fatback beef pork doner brisket boudin leberkas salami tongue. Pork belly biltong tongue alcatra turducken rump doner venison ham hock pig leberkas landjaeger sirloin kielbasa. Cow bacon t-bone ball tip kielbasa.
© Silvia Bogdan, 2015
footer {
width: 100%;
font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
font-size: 16px;
line-height: 25px;
margin-bottom: 0px;
clear: both;
}
/*left div footer*/
.small_left {
border: 1px solid black;
letter-spacing: 1px;
padding: 20px;
background-color: black;
color: white;
text-align: justify;
font-size: 13px;
}
/*right div footer*/
.small_right {
border: 1px solid black;
letter-spacing: 1px;
height: 175px;
padding: 20px;
background-color: black;
color: white;
font-size: 13px;
text-align: justify;
}
and the Media Query where I get in trouble:
#media screen and (min-width: 769px) and (max-width: 1200px) {
footer {
width: 100%;
font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
font-size: 16px;
line-height: 25px;
margin-bottom: 0px;
clear: both;
/*border: 1px blue solid;*/
}
/*left div footer*/
.small_left {
letter-spacing: 1px;
display: inline-block;
width: 44%;
height: 252px;
background-color: black;
color: white;
text-align: justify;
font-size: 12px;
float: left;
}
/*right div footer*/
.small_right {
letter-spacing: 1px;
display: inline-block;
width: 44%;
height: 252px;
height: 175px;
background-color: black;
color: white;
font-size: 12px;
text-align: justify;
float: right;
}
}
You aren't specifying any CSS for smaller screens. So it will go back to your default CSS rules. Your default rules have no width specified for these divs so it uses the default of 100%.
If you want this to change you need to add another media section for small screens.
#media screen and (max-width : 768px) {
// put your rules here
}
You need to check your code over before asking a question.
You haven't ended a starting tag
<div class="small_right">
I noticed there are some unclosed HTML tags so
correct all markup issues before modifying your CSS.
I suggest you to use box-sizing: border-box in order avoid trivial calculation of the width.
Add this on top of your CSS file
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
I saw in your code: width:47%;
If you use box sizing border-box then all padding and borders will be set as part of the actual width of your div, defined in your CSS. So your footer would not break after setting the width as 50% and float left, float right to your two footer containers.
Simply correct your media query for mobile, and add to each footer divs:
// Add your ideal mobile breakpoint
#media screen and (max-width : 640px) {
.small_left {
width:50%;
float:left;
}
.small_right {
width:50%;
float:right;
}
}