This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 7 years ago.
So when I resize the browser window to less than 480px, my site changes back to the original style (the css not defined inside the mixins). I figured I'd work around this by just limiting the html with min-width, but although the browser gets a horizontal scrollbar, the css still changes. Why is that and how do I work around it?
html {
min-width: 500px;
}
/********************************
HEADER
********************************/
.header img, .header h1 {
float: left;
}
.header h1 {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
#media only screen and (min-width: 480px) {
.header h1 {
font-size: 2em;
}
}
#media only screen and (min-width: 768px) {
.header h1 {
font-size: 3em;
}
}
#media only screen and (min-width: 992px) {
.header h1 {
font-size: 4em;
}
}
#media only screen and (min-width: 1200px) {
.header h1 {
font-size: 5em;
}
}
html for reference:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZIC Knjižnica</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="header">
<img src="img/ijs_logo.gif">
<h1>ZNANSTVENO INFORMACIJSKI CENTER</h1>
</div>
</body>
</html>
Setting minimum or maximum dimensions on the root element does not restrict the dimensions of the viewport for the purposes of the width and height media features.
As you have observed, the browser creates a horizontal scrollbar once you resize the viewport to be narrower than 480px. The root element remains 480px wide because of its own min-width declaration, but the viewport is too narrow to contain it and that is why the scrollbar appears. Which means that the viewport is narrower than 480px and thus no longer matches the (min-width: 480px) expression.
You can't restrict the viewport dimensions in a desktop browser. If you want the styles in (min-width: 480px) to apply even when the browser window is smaller than 480px, remove the #media conditional entirely:
.header h1 {
font-family: 'Lato', sans-serif;
font-size: 2em;
font-weight: 900;
}
#media only screen and (min-width: 768px) {
...
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
Can the width or height of the browser screen be used to determine the transition, or animation of a tag's opacity (css)? If so how?
For example as the width of the browser screen gets bigger, fonts become more clear.
Any resources are appreciated, thanks!
For example this html
<div class="header">
<h1>Example title</h1>
</div>
Then use #media breakpoint to give each browser view size a differtent css.
/* first, give a default font-size (for a view less then 768px) */
.header h1 {
font-size: 20px;
}
/* from 768px upwards */
#media (min-width: 768px) {
.header h1 {
font-size: 24px;
}
}
/* from 992px upwards */
#media (min-width: 992px) {
.header h1 {
font-size: 28px;
}
}
/* from 1200px upwards */
#media (min-width: 1200px) {
.header h1 {
font-size: 36px;
}
}
I looked on every thread and I tried every possible solution to no avail. It just doesn't work on any browser...
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="bg">
</div>
</body>
CSS:
#media only screen and (max-width: 1200){
.bg{
background-color: green;
}
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg{
background-color: black;
height: 100vh;
}
Any suggestions?
You have 2 problems that are preventing it from working:
You need to specify the unit (e.g. px) in the (max-width: 1200px) - otherwise it doesn't recognise the breakpoint
You need to include the media query after the default css for .bg. Because you are including the media query before .bg{background-color: black;...}, this is overriding the CSS rule in the media query that set is to green.
See this in a working snippet (Click "Expand Snippet" to see it in fullscreen with a black background):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg {
background-color: black;
height: 100vh;
}
#media only screen and (max-width: 1200px) {
.bg {
background-color: green;
}
}
<div class="bg">
</div>
You should be using min-width in your media queries and apply them using mobile first approach. It means first you apply default styles which will apply to any screen if there are no media queries. Then you reset styles for larger screen sizes. The default styles then only apply to smaller screens.
Example:
/* Default style */
.sample-class {
color: #ff0000;
}
/* Reset style for screen sizes that are 768px or higher */
#media screen and (min-width: 768px) {
.sample-class {
color: #777777;
}
}
Do make sure that you are implementing styles in the order above.
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/
How I create the resizable <h1> element on the getboostrap.com homepage for Bootstrap 3: http://getbootstrap.com/getting-started/
I know I can use tools like fittext.js but theirs adjusts by using CSS media queries it seems.
You can put your <h1>tag in a Jumbotron.
The default h1 font-size is 36px. You can use media queries to make it bigger:
#media screen and (min-width: 768px) {
h1.resizable {
font-size: 63px;
}
}
You can add the resizableclass to any h1 tag and it will make it bigger if the screen width is at minimum 768px.
From their CSS
#media (min-width: 768px) {
.bs-masthead h1 {
font-size: 100px;
}
}
.bs-masthead h1 {
font-size: 50px;
line-height: 1;
color: #fff;
}