Is there a way to set an absolute positioned element to cover whole screen on a mobile browser with enabled desktop site view?
My app consists of some absolute positioned elements that are covering the whole screen (width - 100% and height 100%) so I can change them by simply sliding one out and one in. It is wokring perfectly fine both on desktop and mobile browser but when I enable desktop site view on mobile the body element is still covering the whole screen while the absolute elements are much more smaller.
It looks like this
I was testing it on mobile chrome browser and I am using similar css rules to this page: https://tympanus.net/Development/PageTransitions/ and it also has the same problem.
Is it possible to make it really 100% wide and high?
Here is the simplest html showing my problem
<html>
<head>
<style>
body,html {
margin: 0;
padding: 0;
height: 100vh;
width:100vw;
}
body {
background-color: #AAA;
}
.phaseScreen{
width:100vw;
height:100vh;
position: absolute;
left: 100%;
background-color: #000;
}
</style>
</head>
<body>
<div class='phaseScreen'>
</div>
</body>
</html>
And the result on my chrome mobile looks like this
Is this what you're looking for?
$("#trigger").click(function() {
if (!$("#slide").hasClass("slide-in")) {
$("#slide").addClass("slide-in");
} else {
$("#slide").removeClass("slide-in");
}
});
body {
height: 100%;
width: 100%;
background: #1a1a1a;
margin: 0;
}
#slide {
position: absolute;
height: 100%;
width: 100%;
background: tomato;
color: #fff;
left: -100%;
transition: .2s left ease-in-out;
}
.slide-in {
left: 0 !important;
}
#trigger {
position: absolute;
top: 50px;
right: 10px;
background: yellow;
padding: .5rem;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="slide">
<h1>Hello this is a headline</h1>
<p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </p>
</div>
<div id="trigger">click me</div>
</body>
I am trying to build a full screen 'modal' that displays images. I am making the modal by creating a div with maximum height and width, giving it a large z-index & fixed position.
Inside that modal, I have placed an image. I am trying to automatically size the images with this css:
.center {
width: 100%;
object-fit: contain;
height: 100%;
}
This works on desktop, but on mobile the browser address bar, tabs, and other controls often overlap the content requiring the user to scroll to see it. Is it possible for my image to fit inside the available space and be entirely visible without scrolling? Do I need to account for the extra space the browser could take up (maybe with padding or margins) and just consider it lost? In my actual implementation, we want to disable scrolling because this is a fullscreen modal (using react-scrolllock).
My Example code is below, which can also be found here: https://github.com/ericdcobb/fullscreen-image
and is hosted as a github page:
https://ericdcobb.github.io/fullscreen-image/
<html>
<head>
<style>
.full {
right: 0;
bottom: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 12348;
border: 0;
margin: 0;
background: #222222;
}
.center {
width: 100%;
object-fit: contain;
height: 100%;
}
</style>
</head>
<body>
<div class="full">
<img class="center" src="Hello%20World.jpg"/>
</div>
</body>
</html>
You can use the object-fit tag. Try it like this:
<style>
.center {
display: block;
position: relative;
width: 100%;
object-fit: contain;
}
I wanted to create a footer which need to stay on the bottom of every screen, i have done it but the problem is it breaks on landscape view on small devices but on the portrait view it is working fine.
body, html {
height: 100vh;
position: relative;
}
.footer {
background: #0066cc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="footer">
<div class="content">
<h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
</div>
</div>
i want it to stay at the bottom of every device and on landscape also!!
I have done it with this code it stays on the bottom of the page on landscape as well as portrait
-first i did css on my container (main div)
.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }
-second i change footer css
.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }
and it fixed my problem .
by the way you don't get this problem every time but when you don't have enough content for your page footer will leave it's place and you'll get extra space on different devices even on the web view but when you have enough content for a page then footer will always stay at the bottom.
You just need to change the way you position the footer. As you wanted in same position, the fixed instead of absolute will do the job.
body,html{
height: 100vh;}
.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
Update: the page URL is https://nuclearterrortoday.org/test/pledge.php - if you inspect on mobile, you'll notice the navbar doesn't take the full width of the page, though inspector says the width is 100vw
Stylesheets (in cascading order - some elements may be overridden in forms.css):
https://nuclearterrortoday.org/test/style.css
https://nuclearterrortoday.org/test/forms.css
I have a website with a nav bar that's standard across the site. On one page, the nav bar only covers approximately 90% of the width of the screen, leaving a gap on the right side. There's an additional stylesheet styling the affected page, but nothing affecting any nav elements or the page itself (ie changing the body's width). Resetting HTML, body, topnav, and .pledge-bg (custom body class) has no effect.
That said when using js to change the display of a child element of .topnav for the mobile menu, the width of .topnav changes to the width of the screen as intended.
On every other page, .topnav takes 100% of the screen width. The HTML structure where the header is included is identical.
CSS:
/*left:0 and right: 0 per #Magnus Eriksson*/
var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
myLinks.style.display = "none";
}
html {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
body {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav {
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
height: 10%;
height: 10vh;
background-color: rgba(169, 169, 169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
#topnav {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav #myLinks {
left: 0;
right: 0;
z-index: 999;
display: none;
height: 100%;
height: 100vh;
width: 100%;
width: 100vw;
z-index: 11;
background-color: rgba(148, 181, 201, 0.9);
color: white;
}
.pledge-bg {
left: 0;
right: 0;
background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
width: 100vw;
}
<script src="https://nuclearterrortoday.org/test/swap.js"></script>
<body>
<!-- <?php include "../../inc/header.php" ?>
-->
<!-- Top Navigation Menu (header.php:)-->
<div class="topnav" id="topnav">
<div id="myLinks">
menu
</div>
</div>
<div class="main">
<div class="main-header">
<h1 id="vision">Miracles Have Been Created in The Past</h1>
<p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
<img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
<img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
</div>
</div>
</body>
Instead of using width: 100vw on #topnav just use width: 100%. Also if you define two values for one property the last one will override the first one so don't do that.
Remove width: 100vw and width: 100% from .topnav as id topnav already got the precedence over class topnav so width applied on .topnav will never apply.
Also, remove all the styling from the body. left and right will not work on body tag as it's position is static. Also, body by default take 100% width you just need to remove default margin which browser applies on the body tag:
body {
margin: 0;
}
Also, remove all the styling from HTML tag reason is same I mentioned for body tag above.
The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.
The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.
Hope this helps
Actually this problem is because of the element with the class .top-bar.
Since your .topnav is having
.topnav {
position: fixed;
}
You need to give some position style to your .top-bar and that can be
.top-bar {
position: fixed;
}
OR
.top-bar {
position: absolute;
}
And then you can handle the display property for your text which I think is the Heading or Logo of the website.
Here is the screenshot of my modifications.
screenshot with the required changes
I hope this will help you with your problem.
To use width, you need to make the element block or inline-block For example:
.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
You can fixed in two way first way is trick way and second way is right way.
First way,
Remove width: 100vw; from #topnav and .topnav.
Second way,
Your navbar is fine and working correctly.But your some element's
are wrong.When you use vw for width.You should careful.Your all
elements total width must be maximum 100%.I mean total width is
"width + left + right".You should check and recalculate for total width for every
width.
Solution for second way::
.main-header{
min-width: 95%;
}
.form{
width:95%;
}
On the page with the navigation bar error where there is a big gap
add some inline style with the <style> tag inside the 2 <head> tags
and try margin-top: -150px;
If it works but not enough increase the negative amount of pixels.
This is not enough information to debug this issue. The code you provided works fine in a Codepen (topnav is full width). There is some additional stylesheet or markup affecting your layout, and without that, this question cannot be answered.
The only thing I noticed is topnav does not have a left: 0; style, resulting in a small whitespace on the left side, but I am not sure if that is the issue you are referring to as it is much smaller than a 10% gap.
I have an image that could be smaller than the user's browser, or larger, vertically centered in a div. I'd like a CSS-only solution, but based on the amount of research I've done I am beginning to be skeptical.
More precisely: if the image is smaller (height-wise) than the browser's height, it should be vertically centered -- if the image is taller than the browser's height, there should be a scroll bar to see the rest of the image. This works perfectly in Firefox, but not in Chrome -- and I cannot figure out why.
On Chrome, the image is vertically shifted above the scrollbar so it is still being centered, even though it is too tall. Any ideas? Minimum browser requirements is IE9+, Firefox, Chrome, and Safari (all latest versions of those).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
min-height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item img {
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="item">
<img src="dummy.jpg">
</div>
</div>
So, I've got something working -- but it still has one problem (reduced a bigger problem to a smaller one).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item-box{
background-image: url(dummy.jpg);
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
min-height: 100%;
}
.item img {
max-width: 100%;
opacity: 0 !important;
max-width: 100%;
}
<div class="container">
<div class="item">
<div class="item-box">
<img src="dummy.jpg">
</div>
</div>
</div>
This works as the original problem was posed, in that now if the image is smaller, the box will be centered, but if the image is too tall there will be a scrollbar. No cutoff in non-firefox browsers. The new issue is that the image is not entirely selectable, because the invisible image is fixed to the top instead of centered (the original problem), so you can't "right-click to download image" or any of the stuff that the entire point of using an img tag, was meant for.
Any further ideas on how to use this solution?