<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<title>Frontend Mentor | QR code component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
#media screen (max-width: 300px) {
.body {
background: blue;
}
}
.attribution { font-size: 11px;
text-align: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: rgb(244, 244, 244);
margin-top: 1%;
margin-left: 30%;
margin-right: 30%;
margin-bottom: 1%;
border-radius: 10px;
width: 300px;
padding: 10px;
padding-right: 20px;
}
.attribution a { color: hsl(228, 45%, 44%); }
body {
background-color: red;
}
.fade {
color: #a9a9b1a7;
font-size: 14px;
}
.QR {
width: 310px;
height: 320px;
border-radius: 10px;
margin:0%
}
</style>
</head>
<body>
<div class="attribution">
<img src="images/image-qr-code.png" alt="img" class="QR">
<h1>Improve your front-end skills by building projects
</h1>
<h2 class="fade">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
Challenge by Frontend Mentor.
Coded by lalith prasad.</h2>
</div>
</body>
</html>
why my background color is not changing accordingly to the code of media screen.
why my background color is not changing accordingly to the code of the media screen? I used a simple code of media query isn't working. plz, provide a solution for this.
A few things here:
.body should be body
Media query should come after the initial body declaration
Format of media query is #media only screen and
body {
background-color: red;
}
#media only screen and (max-width: 300px) {
body {
background: blue;
}
}
correct form of using media query is:
#media screen and (max-width: 300px) {
and you should change
.body {
background: blue;
}
to
body {
background-color: blue;
}
and because of specificity in css, you should use media query at the last part of style.
So your code should be like this:
<style>
.attribution {
font-size: 11px;
text-align: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: rgb(244, 244, 244);
margin-top: 1%;
margin-left: 30%;
margin-right: 30%;
margin-bottom: 1%;
border-radius: 10px;
width: 300px;
padding: 10px;
padding-right: 20px;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
body {
background-color: red;
}
.fade {
color: #a9a9b1a7;
font-size: 14px;
}
.QR {
width: 310px;
height: 320px;
border-radius: 10px;
margin: 0%
}
#media screen and (max-width: 300px) {
body {
background-color: blue;
}
}
You have a class named attribution and the related div has a width of 300px with some paddings. Therefore, the width of div becomes 300px + {paddingLeft} + {paddingRight} = 330px. Therefore, your screen width cannot be 300px even if you don't have the margins; hence, the media query condition is always false.
Possible solutions to this problem can be:
Leveraging the width or not giving a width to the div that has the attribution class,
Changing the media query condition.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 months ago.
It's good on big screens, but when I resize the window to less than 600px, everything aligns on left. I wanted it to break on different lines if the screen size is less + aligned centre. Can you please help, as I am frustrated with this...don't know what am I doing wrong. Also, is there a way to add some breakpoint manually to break text (or other things) on different screens manually.
Thankyou.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
}
.head__container > h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="csshake.min.css">
<link rel="stylesheet" href="color-brewer.min.css">
<title>Select10X</title>
</head>
<body>
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
Hello There!
</h2>
<a class="start-button" href="#name">
Explore
</a>
</section>
</body>
</html>
h2 is a block level element, whose default text-align is left unless specified.
What's happening is that while h2 block is center-aligned, its text content inside is left-aligned. You simply need to add text-align: center; to your h2 as in the snippet below.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
text-align: center;
}
.head__container>h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
One-click Solution for <span>Hirings</span>.
</h2>
<a class="start-button" href="#name">
Start Assessment
</a>
</section>
I created a simple network of HTML pages styled with SCSS but the SCSS rules aren't being applied!
Heres how my SCSS file looks like:
//SCSS variables
$Heading-size: 60px;
$Mobile-Heading-size: 40px;
$Mobile-Body-Size: 30px;
$Defualt-background: rgba(149, 149, 243, 0.616);
//SCSS Inheritance and .class selector
.nav{
#extend h1;
}
img{
width: 250px;
}
body {
color: black;
background-color: $Defualt-background;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
//SCSS Nesting
h1 {
text-align: center;
size: $Heading-size;
color: tomato;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: $Defualt-background;
}
}
table {
border-radius: 5px;
border-width: 5px;
th {
border-width: 4px;
}
td {
border-width: 2px;
}
}
//responsive #media query
#media only screen and (max-width: 768px){
h1 {
size: $Mobile-Heading-size;
}
body {
//The background is a test to see if it works :)
$Defualt-background: orange;
background-color: $Defualt-background;
size: $Mobile-Body-Size
}
}
And this is how I linked it to my html:
<link rel="stylesheet" href="./CSS/style.css">
Just to be clear im linking the CSS generated by my compiler not the original SCSS!
I have a simple HTML layout and I want to set the font-size based on CSS media queries. For screen sizes less than 767 I want font-size 24px and for screen size greater than or equal 768 I want font-size 28px. However when I go into mobile mode in Chrome (Version 75.0.3770.142 (Official Build) (64-bit)) the font-size still stays at 28px. Interestingly though if I'm in desktop mode and I just drag the right side of the browser window in the left direction (decreasing window width manually) the font-size does change to 24 px when the screen is less than 768px.
I don't know if my problem is because of incorrect query, or some Chrome quirk that I'm not aware of.
This is my CSS:
html {
box-sizing: border-box;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
}
.container {
margin-top: 1.6%;
display: flex;
flex-direction: column;
align-items: center;
}
hr {
margin-top: 1.6%;
width: 100%;
border: solid 1px #eeeeee;
}
.under-maintenance {
margin-top: 2.3%;
font-family: Helvetica;
color: #333333;
text-align: center;
font-weight: bold;
}
.back-soon {
margin-top: 1.4%;
margin-bottom: 52px;
font-family: Helvetica;
font-size: 24px;
font-weight: 300;
color: #333333;
}
#media (max-width: 767px) {
.under-maintenance {
font-size: 24px;
}
}
#media (min-width: 768px) {
.under-maintenance {
font-size: 28px;
}
}
and this is my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./error-page-500.css">
</head>
<body>
<div class="container">
<img src="./images/logo.svg" alt="logo">
<hr/>
<span class="under-maintenance">UNDER MAINTENANCE</span>
<span class="back-soon">We will be back soon</span>
<img src="./images/man.png" alt="man">
</div>
</body>
</html>
You need to add below meta tag in your html inside <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Here is the updated fiddle:
html {
box-sizing: border-box;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
}
.container {
margin-top: 1.6%;
display: flex;
flex-direction: column;
align-items: center;
}
hr {
margin-top: 1.6%;
width: 100%;
border: solid 1px #eeeeee;
}
.under-maintenance {
margin-top: 2.3%;
font-family: Helvetica;
color: #333333;
text-align: center;
font-weight: bold;
}
.back-soon {
margin-top: 1.4%;
margin-bottom: 52px;
font-family: Helvetica;
font-size: 24px;
font-weight: 300;
color: #333333;
}
#media (max-width: 767px) {
.under-maintenance {
font-size: 24px;
}
}
#media (min-width: 768px) {
.under-maintenance {
font-size: 28px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./error-page-500.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<img src="./images/logo.svg" alt="logo">
<hr/>
<span class="under-maintenance">UNDER MAINTENANCE</span>
<span class="back-soon">We will be back soon</span>
<img src="./images/man.png" alt="man">
</div>
</body>
</html>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
At the bottom of the form. There is white.
I can't recreate it in a snippet because the snippet isn't big enough to recreate the problem. Here is a picture of what is happening and below that is the code.
I need to get rid of that white space so that the div covers the whole page. Any helps is appreciated
/* styles */
/* called by your view template */
* {
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
}
h1 {
text-align: center;
font-style: oblique;
color: red;
font-size: 100px
}
#join {
width: 100%;
height: 100%;
background: repeating-linear-gradient( 225deg, cyan, blue 250px);
border: 1px black solid
}
.bold {
font-weight: bold;
}
#joinForm {
display: block;
width: 100%;
height: 100%;
}
#username {
margin: auto;
display: block;
margin-bottom: 5px;
padding: 10px;
width: 35%;
border-color: blue;
border-radius: 25px;
font-size: 15px;
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
background: #D4D2D2;
color: red;
}
#play {
margin-left: 32.5%;
text-align: center;
font-size: 28px;
width: 35%;
border-radius: 1px;
background-color: red;
border: 1px solid grey;
box-shadow: 2px 2px black;
cursor: pointer;
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
}
#play:hover {
background-color: yellow;
}
#play:active {
box-shadow: none;
}
#ctx {
width: 100%;
height: 100%;
display: none;
border: black 1px solid
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animz.io</title>
<meta name="description" content="A cool thing made with Glitch">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js" defer></script>
</head>
<body>
<main>
<div id="join">
<form id="joinForm">
<h1>
Animz.io
</h1>
<input placeholder="Username here" id="username">
<button id='play' onclick="startgame()">Play!</button>
</form>
</div>
<canvas id="ctx"></canvas>
</main>
</body>
</html>
Your parent's height must be determined if you want to work with a percentage value of height.
Add this to your css or style tag
html,body,main,#join,#joinform {
height: 100%;
width: 100%;
min-height: 100% !important;
}
with regards..
Tested solution
Replaced
height: 100%;
with
height: 100vh;
in #joinForm
Also, I see a lot of CSS styles that are repetitive and could be optimized for better performance and maintenance. You would thank yourself later if you get the basics right from beginning. Hope this solves your issue. You can read more about the fix here.
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe