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;
}
}
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 went through all questions related to this title and applied many of the suggested solutions.The most informative ones were link1 link2 link3. None of them worked. When I resize my browser I can not see the outer elements. I just want to be able to display my website on other devices screen properly. For example, when I halve the width of the browser screen, I can not see the other half of the website.
Here is my code pieces:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#homepage {
position: absolute;
width: 100%;
max-width: 1920px;
height: 4770px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: Ging Games- Home;
--web-view-id: homepage;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
#media screen and (max-width: 780px) {
.homepage{
width: 100%;
position: absolute;
height: 4770px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: Games- Home;
--web-view-id: homepage;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
}
#media screen and (max-width: 375px) {
.homepage {
width: 100%;
position: absolute;
height: 4770px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: Games- Home;
--web-view-id: homepage;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
}
#media screen and (max-width: 320px) {
.homepage {
width: 100%;
position: absolute;
height: 4770px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: Games- Home;
--web-view-id: homepage;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
}
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
From other StackOverflow solutions-suggestions I have already applied:
I used content="width=device-width at meta
Media query order suggested starting bigger to a smaller size
I used max-width, not the max-width-device as suggested
Original homepage class is above the media query
Gave reference to bootstrap
My media query syntax is correct (many of the posts answers were related to space issues and not putting brackets or pixels etc.)
Additional information: I use this website to host my website.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#homepage {
position: absolute;
width: 100%;
max-width: 1920px;
background-color: rgba(255,255,255,1);
}
/* Ex. Large desktop */
#media (min-width: 1280px){
.homepage{
width: 100%;
position: absolute;
background-color: rgba(255,255,255,1);
}
}
/* Large desktop */
#media (min-width: 980px) and (max-width: 1280px){
.homepage{
width: 100%;
position: absolute;
background-color: rgba(255,255,255,1);
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.homepage{
width: 100%;
position: absolute;
background-color: rgba(255,255,255,1);
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.homepage{
width: 100%;
position: absolute;
background-color: rgba(255,255,255,1);
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.homepage{
width: 100%;
position: absolute;
background-color: rgba(255,255,255,1);
}
}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
Remember that for max-width 480px and 767px if you have a navbar class declare display = block(i.e. display:block; ) while the others should be none(i.e. display:none;)
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 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)