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;
}
}
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;
}
}
Consider the following HTML + CSS code:
html {
background-color: green;
margin: 0;
min-width: 320px;
min-height: 100vh;
}
body {
margin: 0;
}
nav#main-nav {
background-color: white;
height: 50px;
display: flex;
}
#container-logo {
width: 200px;
height: 100%;
flex-shrink: 0;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-logo {
width: 60px;
}
}
#container-logo a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container-logo img {
content: url("http://www.dummymag.com//media/img/dummy-logo.png");
max-width: 90%;
max-height: 40px;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-logo img {
content: url("http://coachmikelee.com/wp-content/uploads/2014/11/dummy-logo.png");
}
}
#container-searchbar {
height: 100%;
width: 100%;
background-color: orange;
}
#container-loginstate {
width: 200px;
height: 100%;
flex-shrink: 0;
background-color: blue;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-loginstate {
width: auto;
min-width: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template.css">
</head>
<body>
<nav id="main-nav">
<div id="container-logo">
<img>
</div>
<div id="container-searchbar"></div>
<div id="container-loginstate"></div>
</nav>
</body>
</html>
Basically it is a responsive Top Horizontal Navigation Bar template divided in 3 areas:
logo at left (white)
search bar in the middle (orange)
login state at right (blue)
As expected, if you resize the window, all this areas will resize accordingly. Including the media queries break-point at 640px.
Question
Although functionally the code is performing as expected, it seems to me that there is a lot of gimmicks through the CSS code in order to properly align and size the logo picture (ex: anchor tag as flexbox with width + height being set).
Is there a better way to do that?
i agree with you, its seem to be a bit too gimmicky. I used your code with inline-block, and floats, the problem is container-searchbar's width.
I have a problem with the display: none and visibility options in HTML/CSS
I have the scenario set up here
https://jsfiddle.net/vntkpus6/5/
HTML:
<!doctype html>
<body>
<div class="grabber"></div>
</body>
</html>
CSS:
#media (max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
There must be something I must be missing, it seems like when I resize the window to 800px the square should become visible, yet it doesn't work.
Can anybody tell me what I'm doing wrong? Thanks
Move your #media query below the .grabber rule set. What is happening is that your second definition of .grabber is overriding what is in the media query. It's just the way CSS works!
You should to use min-width, it mean "if the width more than 800px use it"
#media (min-width: 800px) {
.grabber {
display: none;
}
}
.grabber {
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
Here you should use media query after .grabber.Please let me know after doing in below way all things work perfectly or not.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>OFFSET</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="grabber"></div>
</body>
</html>
CSS CODE:
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat;
}
#media all and ( max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}
#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)