Couldn't find anything about this so I ask this here:
I got a really simple page and wanted an element to be full width (width: 100vw). I noticed that at a smaller screen than around 300px it got smaller and wasn't actual full width.
No inserted a complete new div on top of all my html, gave it a background: black; with height: 100vh; and width: 100vw; and it's actually not the full screen size.
As you can see in my screenshot, the set "display size" is 352px x 778 and the element should be 352x778 (so exact the screensize), but as you can see it's smaller.
What causes this and how do I fix it? What is correct now? What I see or what the value says? It's pretty annoying.
If needed: I use chrome 89.0.4389.114 on macOS Big Sur Version 11.2.3 (20D91)
Added while inserting code: As I reduced the code to post it here, I see that the wrapper is the problem. But this question is still valid I believe. Why is the wrapper thats not connected with the <header> a problem for the viewport?
html,
body {
margin: 0;
}
.wrapper {
width: 380px;
margin: 0 auto;
}
.header {
background: black;
width: 100vw;
height: 100vh;
}
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="user">
<h2>
Lorem Ipsum,
<br> Lorem Ipsum Dolor sit amet!
</h2>
</div>
</div>
</body>
</html>
Has been stucked for 2 days, and I found that it is actually the zoom rate of chrome is affecting the element size under devTool's responsive model.
<img src="https://i.stack.imgur.com/dEdFF.png" style="width: 80vw;">
1
The zoom rate of your current brower is affecting the element size:
<img src="https://i.stack.imgur.com/MpAdd.png" style="width: 80vw;">
2
read more about scales in webpage with desktop browser or mobile browser
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Related
I have developed page of simplified shape like this:
<html>
<head></head>
<body>
<nav></nav>
<main>
<section id ="Introduction"></section>
<section id ="aboutme"></section>
<a href="#Introduction">
<span class="triangle__more">
<img src="./assets/up-arrow.svg" alt="arrow up" />
</span>
</a>
</main>
<body>
</html>
with css:
.section {
#include clearfix();
min-height: 100vh;
width: 100%;
position: relative;
display: none;
&:target {
display: block;
}
The problem is, that if I do steps like this:
open the page with laptop on real laptop
change section to #aboutme with menu(no menu details here)
change device in Inspector to any of small-screen devices
change section to #Introduction with link in the bottom
I have both sections active(displayed) and not only #Introduction (what was my expected result).
I have also noticed that changing only screen size or orientation (and not device) does not lead to that unwelcome effect.
Could someone explain to me why it happens (is that purely FF Inspector issue)? And whether I can feel safe with that code in real life (where no-one changes device during session).
OK, finally, I think it is Firefox console bug rather. I have checked with other browser, and it is OK. Besides - when I only change the viewport wide by numbers - is OK. It really happens only when I switch device. Hopefully quite an unusual in real life.
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
<div class="footer">
<img class="fisk" src="fisk1.jpg" alt="fisk">
</div>
I have a img inside a div and i want this image to keep the same size when zooming in and out, but i can't get this to work. I feel like i have tried everything and it feels like this is not possible?
I get the text to stay the same size but not the image.
This should be the solution, it seems to stay the same even during resize!
Note: tested in my local html file, while zooming in/out!
html,
body {
width: 100%;
margin: 0px;
}
<div class="footer">
<img class="fisk" src="http://via.placeholder.com/350x150" alt="fisk" width="100%">
</div>
I have this but when I open the webpage on my phone it is wider than the screen.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
so I have to pinch in to make it fit.
Might this be caused by the fact that there are some images used as the background of the html page? For instance, further below I have the following:
<img src="index_files/img2.png" width="970">
I don't know much about HTML so I will not be able to understand complex answers.
I also saw some div elements with absolute dimensions like this:
<div class="container">
<div class="row">
<div class="sm-12">
<div class="blue-bg">
<h3 style="color: #F37620; font-weight: bold; font-size: 22px; background: #34495D; width: 400px; text-align: center; padding: 10px;margin-bottom: 0; margin-left: 56.6%; text-transform: uppercase;" "=""> requirements specification </h3>
<img src="index_files/img2.png" width="970">
<div class="row">
<div class="sm-6">
<h6 style="font-weight: bold;
As you can see it has a width: 400px and there's a lot of this going on in this html file
Couple things:
Your meta viewport tag is simply setting the scale at which the viewport is set to. It has nothing to do with your images.
Your image is not a background image in the technical sense. A background image is a css property of an element.
You have a fixed width on your img of 970px. That is why it's wider than your viewport.
A quick fix is:
Change:
<img src="index_files/img2.png" width="970">
to:
<img src="index_files/img2.png" style="width: 100%"/>
This will set your img width to 100% of it's containing element. So as long as that containing element is fluid, you're good to go.
Unless you want that image to be 970px and have the ability to scroll it to see the hidden portions on small screens, then you need to start playing with overflow css properties.
That's because the meta tag doesn't make it fit, but simply tells the browser to display the page at a scale of 1 (or 100% of it's original size) rather than trying to shrink it down to fit. To make the page fit you will need to ensure the content is smaller than the width of the device, or that the styles allow for it to respond to the width of the device. I'd suggest looking up some resources on responsive design as this is a pretty large area to try and cover here.
I have a web page with questions on it. I want the user to be able to use a 7" Android tablet (with Chrome) to answer the questions. Some people will want to zoom. Some will not.
How can I get the div container to resize (wrapping the text inside the borders of the screen) when the user zooms in or out? I tried this:
.resizcontainer {
width: 90%;
background: #CEE;
margin: 0 auto; /* the auto value on the sides, */
}
with the top of the code as this:
<body>
<div class="resizcontainer" style="border: thin black solid">
<div class="header">
<h2>Risk Assessment Test</h2>
</div>
<div class="content">
I'm not sure if it matters, but Chrome on the desktop does the job just fine. The container resizes just fine. Or is it because this is a form???