I've been running into issues where I cannot scroll all the way up or down in one swipe on mobile. I'm assuming the issue has to do with a mix of the mobile navigation I created and the url bar on the phone showing and hiding depending on if you're scrolling up or down.
Has anyone run into this issue/found a working solution for it?
The problem disappeared when I changed two rules
#media only screen and (max-width: 850px)
body, html {
min-height: 100vh;
min-width: 100vw;
}
and
html, body {
min-height: 100%;
min-width: 100%;
}
Just use min-height and min-width instead of declaring them explicitly.
Are you using a set viewport?
If you're using something like
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
It could be affecting the way your phone natively scrolls.
Related
I am trying to create a mobile site where the body fills the entire viewport.
I've written the following in the styelsheet
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
however, when using the chrome dev tool's responsive mode, css starts doing weird things.
screenshot
Is this simply a browser bug, or is there something I'm missing here?
Mobile browser do some automatic resizing and some other stuff. You could try to add the following line to your page in the head element:
<meta name='viewport' content='width=device-width'>
This line sets a setting on the viewport, namely that the width of the viewport should always equal the device width.
I thought that I could use media queries for both mobile version and desktop version with low width, but
objects with position: fixed property behave differently, and fixing it for the mobile version messes up the desktop version.
overflow-x: hidden doesn't work for the mobile version. Yes, I have a <meta name="viewport"> tag and yes, I wrapped everything in a div inside body, and gave it the overflow-x: hidden property, but it doesn't seem to work. Even position: relative or position: fixed, don't do the trick.
Is there a reason for this?
Try the following
#media only screen and (max-width: 600px) {
.myDiv {
position: initial !important;
}
}
The !important css tag will ensure that the css is taken into account.
This issue is on both Chrome and Firefox
I have a mobile-only sidebar that shouldn't scroll with the page. It's basically like:
body{
font-size: 16px;
width: 100vw;
height: 200vh;
background-color: orange;
}
.sideBar{
height: 100vh;
position: fixed;
background-color: blue;
left: 0;
top: 0;
width: 10rem;
}
/* media query for desktop. change the min-width */
#media screen and (min-width: 450px){
.sideBar{
position: static;
height: 20vh;
}
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="sideBar">
Hello
</div>
</body>
</html>
It works as expected when I resize the window to a narrow size. The side bar doesn't scroll with the page. But when I click on the mobile mockup button, the position: fixed doesn't work any more.
I deployed and checked on my phone, and the sidebar scrolls with my phone. So it's not just a browser mock-up problem.
Problem Walkthrough:
Resizing broswer. position: fixed still works. Notice how the logo on top is cropped which means I scrolled down. I can actually make the width really narrow and scroll pretty far without scrolling the sidebar.
After clicking on the mock up window
position: fixed doesn't work any more and the sidebar scrolls with the page.
This is kind of late but I solved it a while back adding this line to the <head> of the html document
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
seems the minimum-scale-1 is the crucial part.
The problem, if I understood the explanation correctly, seems to come from width: 100vw on body. Does removing it fix the problem?
just remove media query css it will work
www.yourtechpros.co.uk/test/
If you see the content is fine on a computer but on a mobile device there is a gap to the right with no content there just a white space? i've checked over the code of the media query and all seems to be fine, can anyone assist?
Ive checked all the code over and tried to adjust all the content inside
www.yourtechpros.co.uk/test/
May I suggest adding a viewport meta tag? You will see that the entire website changes dimensions.
Add this to the head:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
More info can be found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Extra support:
Checked your page: add the following
#media screen and (max-width: 767px) {
.callbackicon {
display: none;
}
.aboutabccleaning {
width: 100%
}
}
And change:
.frame {
width: 130%;
}
too:
.frame {
width: 100%;
}
EXTRA extra support:
If you remove the margin from .aboutabccleaning the white space will go away.
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">