While studying Emacs, I'm creating a web page (Prince). The number of columns is managed by the following directives:
body {
font-family: var(--s-font-family);
font-size: var(--normal-font-size);
column-count: 3;
column-gap: 10px;
}
#media screen and (min-width: 800px) {
body {
column-count: 3;
column-gap: 10px;
}
}
#media screen and (min-width: 600px) and (max-width: 799px) {
body {
column-count: 2;
column-gap: 8px;
}
}
#media screen and (max-width: 599px) {
body {
column-count: 1;
column-gap: 0;
}
}
as you can see in the CSS stylesheet.
Now if I test the above code on my desktop pc (with Firefox 70), modifying the width of the browser window, everything work as expected. But when I open the page with my smartphone (whose size is 774x412 px, as reported by webfx) I see ever three columns, as if the media queries would be totally ignored by the browser.
Where can it be the problem?
you just have to add the following meta tags in the head tag of your html page
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the head of your page
Related
I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,
On both divs display is default and on the media queries I have it set as this:
/* DESKTOP AND MOBILE VEIWPORT TOGGLE */
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
#media screen and (max-width: 100vw) {
.mobile {
display: none;
}
}
}
HTML
<div class="desktop">
<p>desktop</p>
</div>
<--- MOBILE DIV --->
<div class="mobile">
<p>mobile</p>
</div>
Also, all of my code can be found here with the html
https://codesandbox.io/s/soph2?file=/css/index.css:244-451
Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.
When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!
Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.
Media queries never go in media queries. Each one is basically a separate bit of css for a specific screen. In addition, 100vw should never be used in media queries, since it will always match. Also, please try to properly format your code. Makes it much more readable
#media screen and (max-width: 400px) {
.mobile {
display: none;
}
}
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
}
Add this in the head section :
<meta name="viewport" content="width=device-width, initial-scale=1">
#media screen and (max-width: 1023px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media screen and (min-width: 1024px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="desktop">
<p>desktop</p>
</div>
<div class="mobile">
<p>mobile</p>
</div>
</body>
</html>
Below is the script within my head tag. The min-width:500 is working properly but the immediate next query max-width:499px doesn't seem to work, I tried it with and without screen and and even adding it in styles.css stylesheet didn't work. I'm trying it just on my screen, and it is supposed to work. Can anyone spot what I'm doing wrong?
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
body{
color:greenyellow;
background-color: black;
}
}
#media screen and (max-width: 499px) {
body {
color:pink;
background-color: navy;
}
}
</style>
<link rel = "stylesheet" href = "styles.css">
Can anyone tell why is my VSCode not able to predict mid-width or max-width but accepts it while writing.
I Checked your code in VS Code, it is working fine for Background color but it is not changing color of text(H2 tag), i don't think there is any problem with VS Code you can do this to change text color.
When you are writing media query you are changing background color and text in body, but if you are using h2 tag then it is not working so you should write specific code for h2
Try below code....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
h2 {
color: green;
}
body {
background-color: black;
}
}
#media screen and (max-width: 499px) {
h2 {
color: pink;
}
body {
background-color: navy;
}
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>TechWithVP</h2>
Some other text
</body>
</html>
i want to give css for mobile view and tablet view. i have created media tag and wrote the code but its not working i have wrote
at top of the phtml file and wrote class name for which i have give css like below
<code>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //at top
#media only screen and (max-device-width: 1000px)
{.numbertext
{
font-size: 50px;
color: red;
}
}
</code>
please help me how should i write to get correct output
wrapp your media queries inside the style tag.
<style type="text/css">
#media screen and (max-width: 1000px){
.yourClass{
}
}
</style>
Probably you are missing a style tag.
It should be like this :
<style>
#media only screen and (max-device-width: 1000px)
{
.numbertext
{
font-size: 50px;
color: red;
}
}
</style>
I would normally be able to solve simple CSS problems with just some trial and error (or so I thought). But I've been trying this all day with no luck. At this point I am not sure what to do.
I am trying to center a picture at the top of my page. I am also using a template, and by default there is text there. I figured I could just replace the title text with an image and it would be fine. I was wrong.
To give a better idea of what I am doing, here is a picture of the github template. The part I am referring to is "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
The code for the header looks like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sample Title by Somebody</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Sample Title</h1>
<h2 class="project-tagline"></h2>
View on GitHub
Download .zip
Download .tar.gz
</section>
The stylesheet for the Header portion looks like this (the project-name portions seemed to be related to the Sample Title part though):
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
#media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
#media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
#media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
#media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
#media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
I have tried everything that I know of to try to center the picture (a small logo) where the Sample Title text was with no luck. I've tried doing margins with 50% and auto, absolute positions, and changing the float. I've tried editing the proeject-name stylesheet info, as well as giving the picture an ID and editing it that way. It always ends up in some odd position and I cannot get it to work. Any help would be greatly appriecated!
you should add your image to your source like this:
<h1 class="project-name">
<img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>
no extra css are needed. it will center your image at the top of page.
PS
The src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.
This is not currect:
<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>
Currect Version:
<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>
I'm in the learning process of making my site responsive. I'm having this issue with Opera working with a specific div under #media query to "display-none". Works in all the newer browsers except Opera. Am I missing something?
CSS:
#media only screen and (max-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
#-o-viewport {
width: device-width;
height: device-height;
max-zoom: 2;
min-zoom: 0.5;
}
}
Actual DIV I'm trying to hide in my HTML:
<div id="column2">
<h1 id="name">P U N K I E D E S I G N S</h1></div></div>
Viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Change your media query to this
#media only screen and (max-device-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
}
It behaves in the same way on Opera Mini as on other browsers – so by using media queries and targeting the device capabilities it caters for all.
CSS3 Media Query support
http://caniuse.com/#feat=css-mediaqueries