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;
}
}
Related
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;
}
}
I can't get my hero background image to stop zooming in when I scale the browser width. I want the image to look the same on a desktop/laptop as it does on mobile. I have tried to use object-fit but it doesn't seem to be making any difference, I have also tried setting static width and heights.
can anyone help or point me in the right direction.
Html
<body>
<header id="showcase" class="grid">
<div class="bg-image"></div>
</header>
</body>
CSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 1.1em;
line-height: 1.5;
text-align: center;
}
img {
display: block;
width: 100%;
height: auto;
}
h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}
p {
margin: 0;
padding: 1em 0;
}
#showcase {
min-height: 450px;
}
.bg-image {
position: relative;
background-image: url(girlsmall.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 450px;
}
/* small tablet styles */
#media screen and (min-width: 620px){
}
/* large tablets and laptops */
#media screen and (min-width: 960px){
body{
font-size: 18px;
}
}
/* desktop styles */
#media screen and (min-width: 1200px){
body{
font-size: 20px;
}
}
is that what you want ? i didn't set the picture as a background, but just used the z-index property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html, body
{
height: 100%;
margin: 0px;
}
#a
{
position: relative;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: -1;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<img id="a" src="girlsmall.jpg" alt="">
</body>
</html>
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 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/