#media screen and (min-width: 300) and (max-width: 800px) {
#top {
font-size: 200%;
}
#first {
width: 30%;
height: 20%;
font-size: 120%;
position: relative;
top:40%;
}
#second {
float: right;
width: 30%;
height: 20%;
font-size: 120%;
position: relative;
top: 20%;
}
#quote {
position: relative;
left: 10%;
}
#bannertextb{
font-size: 250%;
margin-left: 0;
}
#sps {
font-size: 180%;
position: relative;
top: -08%;
margin-left: 0;
}
#class {
margin-left: 0;
}
#greek {
font-size: 350%;
margin-left: 0;
}
#banner {
height: 30%;
}
}
I wish to change the widths when opened from a phone.But this doesnt seems to happen.
But when i re-size my browsers window, everything works fine..
You can view the whole website #- This link
Reduce the min and max width and then try it.
Try using this tag inside your <head> of your html .
<meta charset="utf-8" content="width=device-width, minimumscale=1.0" name="viewport">
use the following code instead of your media query
#media screen and (min-device-width: 300px) and (max-device-width: 800px){
//your code goes here
}
Use like this
#media screen and (max-width: 800px)
Related
I am trying to create a header for my website, with my logo at the very left, and when the screen is too small, the logo disappears. I have searched all over Stack Overflow for half an hour and I haven't found a solution.
I am using a viewport. ==> <meta name="viewport" content="width=device-width, initial-scale=1">
I think I have the right code for #media screen too. ==>
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.one_image {
display: none;
}
}
My image is set up to the CSS correctly, so it's not that.
When I run the code, the image just disappears. Why?
Broken Code:
.menu-bar {
background-color: #303030;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
}
.one_image {
display: block;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#media screen and (max-device-width: 1400px) and (min-device-width: 480px) {
.one_image {
display: none;
}
}
</style>
<div class="menu-bar">
<img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png">
</div>
Code without #media screen:
.menu-bar {
background-color: #303030;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
}
.one_image {
display: block;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="menu-bar">
<img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png">
</div>
If anyone knows of any workarounds please let me know
Thanks in advance!
Correct min-device-width and max-device-width to min-width and max-width. Then place the #media after the other styles.
.menu-bar {
background-color: #303030;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
}
.one_image {
display: block;
}
#media screen and (min-width: 480px) and (max-width: 1400px) {
.one_image {
display: none;
}
}
Use min-width and max-width for media queries
.menu-bar {
background-color: #303030;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
}
.one_image {
display: block;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#media only screen and (max-width: 600px) {
.one_image {
display: none;
}
}
</style>
<div class="menu-bar">
<img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png">
</div>
I'm making a static website from HTML and CSS.
What I want is I have a div oversized such that even the screen size goes down, it overflows and gets out of the screen having an oversized kind of effect.
Also, I have set the position: absolute so that it gets out of the flow, that's not a problem till now (providing this information so that maybe this can be the problem)
My HTML:
<div class="background-title">Adarsh Dubey</div>
*My CSS:
.background-title {
font-size: 300px;
position: absolute;
top: 0;
left: 0;
transform: translate(-2%, -13%);
white-space: nowrap;
overflow: hidden;
}
The picture above shows the overflow kind of effect, which is fine. But notice that I'm in dev tools and the screen size is 1920px.
Now when I go screen size of around 1200px, the .background-title doesn't overflow but instead, it just allows the user to see horizontal scrollbar. What I want is that to get out from the screen so it looks really big.
Please Help.
You need to tell the browser how big you want the box, otherwise it will keep expanding.
You can either set a width, or set the right property.
.background-title {
font-size: 300px;
position: absolute;
top: 0;
left: 0;
transform: translate(-2%, -13%);
white-space: nowrap;
overflow: hidden;
width: 100%;
right: 0;
}
The simplest answer for this problem is to set the overflow property to hidden on body and set width to 100%.
In this way the body will remain at 100% and the overflowed content in it will be hidden
you have to use #media for particular screen where your text is oveflow
.background-title {
font-size: 300px;
position: absolute;
top: 0;
left: 0px;
transform: translate(-2%, -13%);
white-space: nowrap;
overflow: hidden;
padding: 15px;
}
#media only screen and (max-width: 1750px) {
.background-title {
font-size: 250px;
}
}
#media only screen and (max-width: 1500px) {
.background-title {
font-size: 200px;
}
}
#media only screen and (max-width: 1200px) {
.background-title {
font-size: 150px;
}
}
#media only screen and (max-width: 1024px) {
.background-title {
font-size: 130px;
}
}
#media only screen and (max-width: 991px) {
.background-title {
font-size: 100px;
}
}
#media only screen and (max-width: 767px) {
.background-title {
font-size: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<div class="background-title">Adarsh Dubey</div>
</body>
</html>
it's easier if you use bootstrap unless you can use media for that issue
e.g.
.background-title {
font-size: 300px;
position: absolute;
top: 0;
left: 0;
transform: translate(-2%, -13%);
white-space: nowrap;
overflow: hidden;
}
#media (min-width: 576px) { // you can change the screen size to any size that you like but there are some standard sizes
.background-title {
font-size: 80px;
}
}
.livesearch{
width: 228px;
position: relative;
margin-top: -8px;
margin-right: 72px;
margin-left: auto;
}
#media only screen and (max-width: 600px) {
.livesearch{
width: 100%;
position: fixed;
margin-top: 0;
margin-right: 0;
background-color: #EEE;
}
}
And it is accepting background-color: #EEE; only (in my page)
More, there are other classes in the same media query, that I've removed here for semplification, and both style additions and modifications works in them. The problem exists only with the one I wrote here
Check this:
You can see the difference on full page resize
body {
background-color: white;
}
.livesearch {
width: 228px;
position: relative;
margin-top: -8px;
margin-right: 72px;
margin-left: auto;
}
#media only screen and (max-width: 600px) {
.livesearch {
width: 100%;
position: fixed;
margin-top: 0;
margin-right: 0;
background-color: yellow;
}
}
<div class="livesearch">Test</div>
I can't seem to hide the #right image on my iPhone. I want it to display on my webbrowser, but not on small phones.
Edit I've tried visibility: hidden !important;
I've tried screen and
I've tried display: none
I've tried hiding by class name
Thanks!
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
html {
width: 470px;
height: 725px;
}
div {
position: absolute;
left: 150px;
top: 75px;
width: 70%;
}
#left {
width: 300px;
height: 700px;
}
#right {
position: absolute;
width: 300px;
height: 700px;
right: 10px;
z-index: -1;
}
#title {
position: absolute;
top: 10px;
left: 31%;
width: 330px;
height: 90px;
}
#rightP {
position: absolute;
width: 75%;
left:30px;
}
#cross {
position: absolute;
top: 610px;
left: 48%;
width: 30px;
height: 30px;
}
#media screen and (max-width: 600px) {
#right{
display: none !important;
visibility: hidden !important;
}
.mobile-hide {
display: none;
visibility: hidden;
}
}
body {
min-width: 300px;
background-color: #f1e2c1;
}
</style>
<body link="#000000" vlink="#808080" alink="#FF0000">
<img id="title" src="images/title.jpg">
<img id="left" src="images/left.jpg">
<img class="mobile-hide" id="right" src="images/right.jpg">
<div>
<p >
</p>
</div>
<img id="cross" src="images/cross.jpg">
</body>
</html>
In the code of the stylesheet on your website, you have this line above your media queries:
//small screen sizes
// is NOT to be used for CSS comments ( but only in PHP and JS)! In fact, this messes up your code, since the browser thinks it's some kind of CSS and can't handle it (and all the other code following it).
So just change that line to
/*small screen sizes*/
and it will work.
I strongly recommend you not to use id's while using css as classes tend to do all the work required without that level of specificity, for this example all you need to do is switch the display with visibility
#media screen and (max-width: 600px) {
#right {
visibility: hidden !important;
}
}
Hope This helps!
Add a media query for that specific element, or create a class called mobHide and create something like the following
Element
#media screen and (max-width: 767px) {
#right {
display: none !important;
}
}
Class Specific - Apply .mobHide class to anything you want removing on mobile devices.
#media screen and (max-width: 767px) {
.mobHide{
display: none !important;
}
}
I tired many ways, but I can't get this media query to work.
"#Content" just doesn't change left position when I resize the window !
must be a way to make it run correctly !
Here's the code:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>index</title>
</head>
<body>
<div id="layout">
<div id="fixed-sidebar">
</div>
<div id="content">
content to make error visible !
</div>
</div>
</body>
</html>
style.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#layout {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#fixed-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 460px;
background-color: rgb(33, 40, 46);
overflow: hidden;
padding: 20px;
color: white;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 460px;
overflow-y: scroll;
padding: 20px;
background-color: lightgrey;
}
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#Content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#Content { left: 40%; }
}
Here is a jsfiddle: http://jsfiddle.net/X3U2f/1/
What I'm doing wrong ? :/
(PS: I tried to put them important but still ignoring left position !)
Thank you
"What I'm doing wrong ? :/ "
You're using a capital 'C' for the ID within the #media rules, but class and ID attribute values are case-sensitive in HTML, so you'll need to change #Content to #content:
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#content { left: 40%; }
}
http://jsfiddle.net/X3U2f/