I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element.
But when size of browser changes, then it changes(font-size). Why? and How can I stop this?
*,
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: calc(16px + .75vw);
}
.container {
background-color: #d1c6c6;
padding: 10px;
min-height: 100vh;
}
.container__box {
font-weight: bold;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 15px 10px;
background-color: #8b2be4;
width: 90vw;
font-size: 30px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="container__box">Gridfan Jessica</div>
</div>
But when size of browser changes, then it changes(font-size). Why?
Because you used vw font size changes when browser size changes.
How can I stop this?
Use px instead. If that's not eye comfortable, Use media query for different font sizes for different screen widths.
Related
<!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.
I have two DIVs, which I would like to stack vertically …
<div id="searchContainer”>…</div>
<div id="searchResultsContainer”>…</div>
I have the following styles assigned to them …
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
width: 100%;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
width: 100%;
}
However it seems that adding padding to my top DIV causes it to be wider than the DIV below it. I would like both DIVs to be the same width, but I would like the top DIV to have the padding so that the elements don’t scrunch up to the border. How do I do that? Here is the Fiddle that illustrates my problem — https://jsfiddle.net/1zb5mqmo/ .
Use box-sizing: border-box; on the padded div:
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
/* max-width: 1000px; */
width: 100%;
box-sizing: border-box;
}
box-sizing: border-box The width and height properties include the content padding and border
box-sizing: content-box The width and height properties include only content
Updated JSFiddle
In this case, simply remove the width and you can combine both padding and border without throwing it off
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
border: 5px solid steelblue
}
<div id="searchContainer">...</div>
<div id="searchResultsContainer">...</div>
I have a h1 in my header and in another section of the document. I'm told this effects SEO but I digress, i'm just learning by copying other peoples pages and attempting to style them as they did without looking at their code.
So my h1 styles fine but when i target h1 inside a section class the style doesn't apply.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
font-family: inherit;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
My guess is that the class.h1 rule is overriding the h1 rule. If this is the case, how can I apply my top border to my h1, while still inheriting the h1 properties.
Apologies if I am murdering any CSS nomenclature.
The inherit keyword specifies that a property should inherit its value from its parent element. So the parent is section, and there is no rules for font on section. Remove the inherit.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
There doesn't seem to be much wrong with your code. Indeed if you declare global h1 properties they will be used for all h1's on your site.
If you create specific rules then those will apply to any h1 which meets that rule but the other properties will be inherited (if they are different).
I updated the fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/
Example:
h1 {
/* global porperties */
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.photography h1 {
border-top: 3px double #232323; /* new property */
padding-top: 10px;
font-size: 2em; /* overwrite existing property */
}
Use !important on the rules that you want to use to override whatever rules the <section> applies to your <h1>.
For instance, if you want to apply the fonts on your original h1 to the one inside the section:
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
Demo: http://jsfiddle.net/gcj6xLL0/
I want to add boundaries around four sides of the web pages(black color 25px width). Now it is not lucky.
Please see my jsfiddle at demo.
The partial css:
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
margin: 25px;
padding: 0;
background-color: #000000;
}
Take away the background and margin from the body element and add stuff to the HTML element instead:
* { /*this * selector selects every element*/
box-sizing: border-box;
}
html{
background: #000;
padding: 25px;
}
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
}
(also use box-sizing: border-box; on everything to not screw stuff up with margins and padding)
http://jsfiddle.net/CenND/4/
I also removed position: absolute; from the footer. Now it behaves.
Can someone tell me why FireFox is not rendering the Lucida Sans Unicode font type? It's a default websafe font according to w3schools. Chrome and IE both render it fine.
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode" Geneva, Tahoma;
}
You probably want a comma after the Lucida part:
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode", Geneva, Tahoma;
}
http://jsfiddle.net/GVCy2/