I want to place the "Page Unfound" text underneath the 404 text so that they stack sort of on top of one and other. Thanks for the help !
Here is the code
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
flex-wrap: wrap;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</div>
</body>
</html>
All you need to change is flex-direction from row to column
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5px;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</div>
</body>
</html>
Since the flex container aligns its immediate children in a line, all you need is to make the elements into 1 element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
flex-wrap: wrap;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<span>
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</span>
</div>
</body>
</html>
Related
I have been trying to use a media query to resize some letters when the device or width of the browser screen changes.
I have checked the syntax and I have added on my main HTML:
<meta name="viewport"content="width=device-width, initial-scale=1"/> on my main HTML
The media query I am trying to implement is this one:
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
If it matters I am developing on Angular 10 in a Mac and testing with Safari and Chrome on a Mac computer and iPhone XS.
app.component.html
<!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"/>
<!-- shrink-to-fit=no -->
<title>title</title>
</head>
<body class="mat-app-background">
<div class="page">
<h1>Clock</h1>
<div class="menu-container" >
<button mat-raised-button class="clock type1">World Clock</button>
<button mat-raised-button class="clock type2">Alarm</button>
<button mat-raised-button class="clock type3">Stopwatch</button>
<button mat-raised-button class="clock type4" (click)="myFunction('hello')">Timer</button>
</div>
<div class="content">
<!-- <div class="box"> box</div> -->
<app-timer>
</app-timer>
</div>
</div>
</body>
</html>
<router-outlet></router-outlet>
app.component.css
#import url('https://fonts.googleapis.com/css2?family=Karla&family=Montserrat:wght#500&display=swap');
h1{
text-align:center;
font-size: 6em;
font-family: 'Montserrat', sans-serif;
padding-top: 40px;
padding-bottom: 20px;
}
.page{
height: 100vh;
background-color: #f1eaea;
}
.menu-container{
height: 100px;
display: flex;
border: 0px solid black;
background-color: #f1eaea;
flex-direction: row;
align-items: center;
justify-content: center;
}
.clock{
display: flex;
text-align: center;
font-family: 'Karla', sans-serif;
color: white;
font-weight: 600;
font-size: 1.6em;
line-height: 1.4;
align-items: center;
justify-content: center;
height: 80%;
width: 10em;
margin: 6px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.80);
}
.type1{
background-color: #002642;
}
.type2{
background-color: #840032;
}
.type3{
background-color: #E59500;
}
.type4{
background-color: #2A9D8F;
}
.content{
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 5vh;
justify-content: center;
height: calc(100vh - 265px);
}
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 80%;
}
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
Global css style.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
html {
min-height: 100%;
}
body{
min-height:100%;
height:100vh;
}
html, body { height: 100%; }
I am not able to align center the following divs on the full page width:
header
content
footer
But it does not work! Whats needs to be changed within my CSS to get it working?
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
You can add align-items: center; to #wrapper.
Normally if you would have flex-direction: row; centering things would be justify-content: center; but as column change the axis so does the alignment properties. They kinda "go with the axis".
One thing though, I would strongly suggest that you don't style with id, use classes for that.
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
If you just want to center the text, use text-align: center and the parts?
Or if you are looking to do more centered-content, maybe make your #header, #content, and #footer the following:
display: flex;
flex-direction: column;
align-items: center;
Basically, flex boxes within flex boxes.
I want a centered heading like this using CSS only [Without flexbox].
[EDIT] My example using flexbox below. There are some limitations with this code as I can't use the same class again for a different heading as the title is hardcoded in the CSS. Does using flexbox for such a small task is a good practice?
body {
background-color: #0f1932;
}
.wrapper {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px 0px;
}
.heading {
color: white;
}
.heading::before {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
transform: translateX(-50%);
opacity: 0.06;
text-transform: uppercase;
content: "demo-shadow";
}
.heading::after {
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40px;
content: "demo";
text-transform: uppercase;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<header>
<div class="heading-container">
<h1 class="heading"></h1>
</div>
</header>
</div>
</body>
</html>
.
Got the solution. I have to use the custom data attribute to display dynamic content.
body {
background-color: #0f1932;
}
.wrapper {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px 0px;
}
.heading {
color: white;
}
.heading::before {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
transform: translateX(-50%);
opacity: 0.06;
text-transform: uppercase;
content: attr(before-title);;
}
.heading::after {
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40px;
content: attr(after-title);;
text-transform: uppercase;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<header>
<div class="heading-container">
<h1 class="heading" after-title="titele1" before-title="titele1"></h1>
<h1 class="heading" after-title="titele2" before-title="titele2"></h1>
</div>
</header>
</div>
</body>
</html>
Trying to make a responsive website for mobile/pc, and not sure what the best way is to design a mailto link.
Tried the answers found on StackOverflow and haven't been able to fill the div area with the link, aka make the entire space clickable.
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.8em;
color: #5D6063;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.contact {
background-color: #bdbdbd;
}
#contact a {
display: block;
height: 100%;
}
<body>
<div class='page'>
<div class='section contact'>
Contact Me
</div>
I was expecting the #contact a {" to fill the ".contact div, but it's not, and I don't know how to just make the whole .contact div a link without screwing up the responsive styling.
Wrap the div with a tag to make the entire div block act as a link.
<a href="mailto:test#example.com?Subject=Website%20Contact"
target="_blank">
<div class='section contact'>
Contact Me
</div>
</a>
Try Following I just change the #contact a to .contact a and few code adjustment.
<!DOCTYPE html>
<html>
<head>
<title>Click Able Div Container</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.8em;
color: #5D6063;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact {
background-color: #bdbdbd;
}
.contact a {
display: block;
width: 100%;
padding: 150px 0;
text-align: center;
}
</style>
</head>
<body >
<div class='page'>
<div class='section contact'>
Contact Me
</div>
</body>
</html>
I'm trying to create a rock, paper, scissors game and I'm having trouble getting the items to stack. I have three images on one row and I would like to display the fourth image below them (this image would be the resulting image displaying either rock, paper or scissors).
I tried using flex-wrap, changing width's, etc and after an hour of searching, I figured I'll just ask you guys who will probably solve it in a minute lol Here is my code and thanks in advance for the help :D
#import url("https://fonts.googleapis.com/css?family=Germania+One");
$primary-color: #000000;
$serif: "Germania One",
cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
#rock,
#paper,
#scissor {
display: flex;
justify-content: center;
border-radius: 20px;
cursor: pointer;
}
#scissor {
margin-left: 30px;
padding-left: 10px;
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
justify-content: center;
width: 50%;
height: auto;
flex-wrap: wrap;
border-radius: 20px;
cursor: pointer;
}
#scissor_win {
margin-left: 30px;
padding-left: 10px;
}
<h1>Rock, Paper, Scissor's</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'><img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png' /> </div>
<div id='paper'><img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png" /> </div>
<div id='scissor'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<div id='scissor_win'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<p></p>
The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.
Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:
.container {
display: flex;
flex-direction: column;
}
.items {
display: flex;
flex-direction: column;
}
The single items don't need display: flex, unless you want to center their contents using flex.
Make sure you close your img's. They are missing the ending bracket.
The display: flex goes on the container, and the children all get a flex assigned to them (Flex Guide).
I added the SASS tag, since it seems you're using that
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
.items {
display: flex;
}
#rock,
#paper,
#scissor {
flex: 1;
/* justify-content: center; */
border-radius: 20px;
cursor: pointer;
}
#scissor {
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
margin: 0 auto;
clear: both;
width: 50%;
height: auto;
border-radius: 20px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'>
<img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png'>
</div>
<div id='paper'>
<img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png">
</div>
<div id='scissor'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<div id='scissor_win'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<p></p>
</body>
</html>
I'm having trouble posting my inline code here with SCSS, so here's a jsbin link in addition. jsbin
using #kauffee000 snippet, I reduced the amount of css required.
Hope it helps.
explanation:
the trick here is to make .container be a flex and have a flex-direction of column, while .items be flex with a flex-direction of row.
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
img {
height: 13rem;
}
}
.items {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
& div {
border-radius: 20px;
flex: 1;
&:hover {
img {
height: 5rem;
}
}
}
}