I have this weird problem and I can't figure out a solution.
My html file loads three stylesheets.
<meta content="width=device-width, initial-scale=1" name="viewport">
<link type="text/css" rel="stylesheet" href="/static/css/common.css">
<link type="text/css" rel="stylesheet" href="/static/css/admin.css">
<link type="text/css" rel="stylesheet" href="/static/css/navbar.css">
and I have the exact same #media query in both admin.css and navbar.css
admin.css
#media screen and (max-width: 768px)
{
html {display: none;} /*<-- Just for testing purposes*/
}
navbar.css
#media screen and (max-width: 768px)
{
body
{
overflow-x: hidden;
}
.navlinks
{
margin-left: 0;
margin-right: 0;
position: absolute;
left: 0;
height: 40vh;
width: 100vw;
top: 7vh;
display: flex;
flex-direction: column;
z-index: 99;
background-color: var(--background);
padding: 0.75em;
align-items: center;
transform: translate(-100%);
transition: transform 0.25s ease-in;
}
.navlinks a
{
font-size: 2.25em;
}
.burger
{
display: block;
position: absolute;
left: 0;
margin-left: 3vh;
}
.show
{
transform: translate(0%);
}
}
The #media query in navbar.css works but the one in admin.css doesn't.
I have tried just loading admin.css (did not fix it)
I also tried different media querys, they worked in navbar.css but not in admin.css.
It looks like you have two separate media queries set to the same width "768px"
if your "navbar" media query is below the "admin" media query then specificity will apply and i believe the "admin" media query will just get ignored. why not put html {display: none;} /<-- Just for testing purposes/ in with the same "768p" breakpoint? you can also try to add !important at the end of the html {display: none !important;}
Related
i tried to style my screen size in the #media tag but the contain in my page is still not responsive at all. What can i do to make it responsive other than bootstrap? The below code is my css code that i added into my project. Thank you in advance.
#media screen and (max-width: 600px) {
body{
position: absolute;
width: 411px;
height: 823px;
left: 0px;
top: 0px;
background: #00644C;
font-family:Inter;
}
}
.container {
width: 309px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
label {
color: #FFFFFF;
display: flex !important;
padding-left: 70px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: normal !important;
}
.btn.btn-block{
background: #FFFFFF;
border-radius: 2px;
}
input[type=submit] {
width: 20em !important;
height: 2em;
}
Try to add this code into your head section of your html. This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
I'm fairly new to using media queries and i'm probably missing something obvious but I've had a look around stack overflow and haven't yet found my solution.
Also to note, I'm using an old phone (iPhone 4S) on Chrome browser to view my site.
When I view the site on my mobile it's the exact same as if I was to view it on my browser and hasn't took my media queries into account as the browser does when I resize it.
Note the first image is how it currently looks, I want it to look like the second image
I'll try to include the relevant code:
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Media queries:
#media all and (max-width: 701px) {
.quote {
width: 550px;
}
}
#media all and (max-width: 551px) {
.quote {
width: 400px;
bottom: 325px;
}
nav { display: none }
header {
width: 100%;
}
.title {
display: block;
margin: 0;
padding: 35px;
text-align: center;
color: #2d2d2d;
}
.quote span { color: #2d2d2d; }
.explore span { color: #2d2d2d; }
.explore {
display: block;
border: 1px solid #2d2d2d;
}
body {
background-image: url("http://htc-wallpaper.com/wp-content/uploads/2013/10/Mountain1.jpg?8a4edc");
background-size: cover;
background-repeat: no-repeat;
}
}
I think it has. It's the font size you need to have changed. I believe some mobile devices automatically adjust your font, but it may be something you don't want. Try this:
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
Let me know if that answers your question.
I am seeing inconsistent results when using print stylesheets and #media print.
When should I use either one or both?
print.css
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
height: 100%;
font: small;
background: #eee;
position: relative;
margin-left: 0;
width: 100%;
display: table;
margin: 0 auto;
overflow-x:scroll;
white-space: nowrap;
overflow:visible !important;
border : solid 2px;
}
html, body
{
height:100%;
width:100%;
}
This external linking of css print stylesheet cuts of the report and just shows a scroll bar or image and does not print the entire page. If I inclued #media print in the aspx page, it prints it correctly(does not cut off the report and no image like scrollbars). What is the difference between the two approaces. Also does #media print work in all versions of IE. The client uses IE 8.
If i comment out the style type =text/css and #media print chunk, its all messed up and prints only half of the page.
I am using window.print()
This is how the Aspx page looks this
<link href="Style/print.css" type="text/css" rel="Stylesheet" media="print" />
<style type="text/css">
#media print
{
html, body
{
height: 100%;
width:100%;
}
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
height: 100%;
font: small;
background: #eee;
position: relative;
margin-left: 0;
width: 100%;
display: table;
margin: 0 auto;
overflow-x:scroll;
white-space: nowrap;
overflow:visible !important;
border : solid 2px;
}
body
{
background: white;
font-size: 12pt;
margin: 0px;
}
}
</style>
There are 2 approaches here: one is the external css and the other is #media print.
If I include the #media print in the aspx file, it prints like this and does not cut off the report.
so my media queries are playing up and I can't see why. Theyre located on the end of styles.css on carrotcruchpvp.comule.com. 720p and 1366 x 768 seem to be working. However any media query over that resolution doesnt work and 1366 x 768 seems to take precedence. Just in terms of debugging.
Things I've tried,
using !important on things.
Moving the media queries around, i.e 2160 x 1440 at top and descending in resolution.
width/height, min-width/min-height. I know min- uses browser width but just wanted to double check.
My next step is just to do it all in javascript if I can't find a solution here. Using an updated version of chrome.
Heres the lot:
/* Media query for standard 1280 x 720 resolution, 16:9 aspect ratio */
#media all and (min-device-width:1280px) and (min-device-height:720px) {
.complainant_txt {
font-size: 1.6vh;
}
.hex-grid-mid {
left:9.5%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
.hexagon-scale {
width: 8.5vw;
height: 29.5vh;
}
.hex-grid-top .hexagon {
float: left;
margin: 0 0.57vw;
}
.hex {
width: 55%;
position: relative;
height: 40%;
left: 31%;
margin-top: -1.5%;
}
.quote {
font-family: 'Open Sans', sans-serif;
top: 30%;
left: 5%;
font-size: 0.7vw;
height: 38%;
}
h4 {
margin-bottom:1%;
}
#info_btn {
left:82vh;
}
#fourth_quote {
left:3%;
}
#firststat {
left: 3% ;
}
#secondstat {
margin-left: 4.6%;
}
#thirdstat {
margin-left: 2%;
}
#firststat{
opacity: 0;
-moz-transition: opacity 1.2s;
-o-transition: opacity 1.2s;
transition: opacity 1.2s;
display: inline-block;
font-family: 'Open Sans';
font-size: 76%;
width: 14%;
margin-left: 26%;
text-align: center;
margin-top: 0;
margin-bottom: 0;
position: relative;
bottom: 1em;
vertical-align: top
}
}
/* Media query for standard 1366 x 768 resolution, 16:9 aspect ratio */
#media all and (min-device-width:1366px) and (min-device-height:768px) {
.hex-grid-mid {
left:9.5%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
.hexagon-scale {
width: 8.5vw;
height: 29.5vh;
}
.hex-grid-top .hexagon {
float: left;
margin: 0 0.57vw;
}
.hex {
width: 55%;
position: relative;
height: 41%;
left: 30.6%;
margin-top: -1.5%;
}
.quote {
font-family: 'Open Sans', sans-serif;
top: 32%;
left: 5%;
font-size: 0.7vw;
height: 38%;
}
.complainant_txt {
font-size: 1.6vh;
}
#firststat,
#secondstat,
#thirdstat {
bottom: 3.8em;
}
#history {
margin-top:3.3%;
}
h4 {
margin-bottom:1%;
}
#info_btn {
left:82vh;
}
#fourth_quote {
left:3%;
}
#window4 {
height:19vh;
}
#window5 {
height:26vh;
}
#window6 {
height:28vh;
}
#window7 {
height:34vh;
}
#window8 {
height:31vh;
}
#window9 {
height:28vh;
}
}
#media all and (min-device-width:1600px) and (min-device-height:900px) {
.hi-icon-wrap {
margin-left: 4.7%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
#history {
margin-top:3.3%;
}
#info_btn {
left:80vh;
}
}
#media all and (min-device-width:1920px) and (min-device-height:1080px) {
.quote {
top: 39%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
#info_btn {
left:81vh;
}
}
/* Media queries for my SP3 with 3:2 aspect ratio. */
#media all and (min-device-width:2160px) and (min-device-height:1440px){
.quote {
top:32%;
}
#exit, #exit1, #exit2 {
right: 4%;
top: -2%;
}
.hi-icon.button.hi-icon-earth {
left:-21vh;
}
#second_quote {
top: 35%;
left: 5%;
}
#decision_btn {
top: -12vh;
left: 36vw;
}
#up_right2 {
bottom: 4.8%;
left: 56%;
}
#info_btn {
left: 68vh;
top: -11.5vh;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-height, initial-scale=1">
<title>Catholic Professional Standards</title>
<link href="plugins/fullpage/jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="plugins/fullpage/jquery.fullPage.js" type="text/javascript"></script>
<script src="js/fullpage_initialisation.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
Assuming this is a website and not a something you're specifically using on a mobile device such as an app, there's no reason to use min-device-width over min-width in your media query. min-device-width will go with the device size and not change based on expanding a browser. min-width will achieve that.
Here's some futher information based on another StackOverflow question:
CSS media queries min-width and min-device-width conflicting?
I have the following CSS setup up on my site. I'd like for it to be disabled when a browser width gets narrower than 900 px, but to remain enabled when a browser width is greater than 900. Any suggestions on how I can do this?
Thanks!
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
Don't forget to add the html tag for smaller devices:
HTML
put the following meta inside your page head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
CSS
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
#media screen and (max-width: 900px) {
.image-slide-title {
/* do what you want here */
display: none !important;
}
}
Honestly, if you can remove the important tag, it will be much more simpler to manage the responsive effect
I believe you're looking for media queries.
#media (max-width: 899px) {
.image-slide-title {
display: none !important;
}
}
Don't forget to do this on your html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
My recommendation is to create a secondary css page for your mobile.
<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />
Then in that stylesheet have the settings specific to that.
Just you need to add media query
#media screen and (max-width: 1200px) {
.div-name {
width: max-content !important;
}
}
This usage avoid to rescale your flex system and you achieve a solid structure does not effect screen resizing