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
Related
For screen > 1000px I want to utilize :checked effect(pseudo class). When the input is checked, an adjacent div background color changes to light-blue. When unchecked the background color changes to grey.
In smaller screen (<=1000px), I want to remove everything specified by the :checked pseudo class. This means no color change upon check/uncheck.
But I cant make it work.
In other words I want to utilize :checked in screen > 1000px and for smaller screen I need behaviour like the previous :checked declaration never existed. Here is an example:
https://jsfiddle.net/rikotech/r7cmbayp/2/
And some code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background:rgb(100,100,100);
/* width: 500px;
height: 500px; */
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
position: absolute;
}
.toggle-label{
cursor: pointer;
}
.toggle:checked ~ .container {
background: rgb(100,200,200);;
}
#media screen and (max-width: 1000px){
/* I want to remove .toggle:checked ~ .container behavior here
I dont want checking to change the color or do anything at this screen
*/
.toggle:checked ~ .container {
all: unset; /*This doesnt work it just initialize the bacground color*/
}
}
</style>
</head>
<body>
<div>
<label class="toggle-label" for="toggle">Hamburger</label>
<input type="checkbox" id="toggle" class="toggle">
<div class="container"></div>
</div>
</body>
</html>
Instead of using a media query to unset :checked pseudo class in smaller screens, why not write a media query to use :checked pseudo class only in larger screens.
CSS:
.container{
background:rgb(100,100,100);
/* width: 500px;
height: 500px; */
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
position: absolute;
}
.toggle-label{
cursor: pointer;
}
#media screen and (min-width: 1000px){
.toggle:checked ~ .container {
background: rgb(100,200,200);
}
}
https://jsfiddle.net/su2hyLkb/
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;}
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.
So I noticed that there's a problem with the document height of Safari in iOS7 on an iPhone. I've seen a bunch of threads about the iPad, but nothing about the iPhone.
For some reason it does not display the full height of the document.
Here's a JSBin demo:
http://jsbin.com/bohociyo/1
Markup + CSS for reference:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iPhone iOS7 bug</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body></body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
background: #fff;
color: #000
}
body::before {
display: block;
text-align: center;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 9999;
padding: 5px;
white-space: pre; /* or pre-wrap */
}
#media only screen and (orientation:portrait) {
body::before {
content: "Portrait \A Works as intended.";
}
}
#media only screen and (orientation:landscape) {
body::before {
content: "Landscape \A Does not display the full height of the document. \A Grey bar appears.";
}
}
A simple window.scrollTo(0, 0); on orientation change seems to have fixed it.
It's the minimal ui metag tag that's causing the bug.
window.addEventListener("orientationchange", function() {
window.scrollTo(0, 0);
}, false);