Why is my website on mobile showing up like this rather than the content only? Am i missing some CSS? pls not I am using box-sizing:border-box in body. I used some media queries, but the website is so zoomed out and all of the content on the left on mobile view. You can check out the entire website at http://assistantmarcus.ml for the entire front-end.
PS: The page is perfectly zoomed in on mobile mode, its just that the user can easily zoom out making it look real bad. Is it because of the blob i put in?
Whenever you paint content outside the viewport, the browser will allow the user to scroll to it, on both directions.
By setting .blob's width to 150% on screens below 600px and to 290% on screens below 450px, you are rendering content outside the current viewport width, thus creating a horizontal scrollbar.
Since the content painted outside the viewport on the horizontal axis is irrelevant (you're only interested in the part of the enlarged element rendered inside the viewport), you probably want to disable horizontal scrolling on the body element:
body {
overflow-x: hidden;
}
See it here.
Side note: another way to enlarge .blob would have been to transform it, instead of setting its width and height:
#media (max-width: 600px) {
.blob {
transform: scale(1.5);
}
}
#media (max-width: 450px) {
.blob {
transform: scale(2.9);
}
}
I'm not just mentioning it, I'm recommending it. Using transform vs sizing or positioning has the big advantage of only happening in the compositor layer, without any effect on the layout and paint layers, which brings a big performance increase, especially when dealing with animations. This is well documented all over the web and I tried my best at explaining the mechanics here.
You are most likely missing the viewport tag inside your html head:
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
…
</head>
user-scalable=no in the meta tag helps to disable page zoom-in & zoom-out
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Related
I have made a non-respnsive site using the below viewport:
<meta name="viewport" content="width=1400">
It is showing the desktop view on both desktop and mobile without any issues.
But when I resize the browser, the page goes beyond the screen horizontally. Which is the expected behaviour.
Is there some CSS or script which I can use to make the page full width when we resize the screen too so that the screen will show full width and height will decrease just like on mobile?
I used the below CSS to make it happen:
body {
width: 100%;
}
But it breaks the layout when resizing the screen.
Can anyone point where I made the mistake?
Thank you.
If you want control on diffrent viewport you must be add this below meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm writing a book reader in which a book can be of variable width, for example, it could be 1028px or it could be 2000px or 560px width.
I'd like mobile devices to scale automatically so that when they're viewing the book it will scale the book to always be the width of the screen.
What I'm currently doing is... (example book has 1028px width & 1648px height)
In the head:
<meta name="viewport" content="width=1028"/>
In the stylesheet:
body { margin:0; padding:0; }
.bz { margin:0; padding:0; overflow:none; width:1028px; }
.pz { width:1028px; height:1648px; position:relative; }
And the body is in the form of:
<div class="bz">
<div class="pz">
Page 1 content
</div>
<div class="pz">
Page 2 content
</div>
<div class="pz">
Page 3 content
</div>
</div>
This stacks the pages vertically, which works... except there are two problems:
On mobile device the content doesn't actually fit perfectly on the screen, it needs a little horizontal scroll to view all of it. So basically it's not zoomed perfectly to the width of the device screen.
On mobile device there is loads of white space on the right, the horizontal scrollbar is present and it allows the user to scroll really far to the right into loads of white space. This doesn't occur on the desktop browser which correctly disables the horizontal scroll if the browser window is larger than the content width.
I must be doing something wrong. Any ideas?
Thanks!
wrong approach in my opinion.
the best practice for anything reponsive is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
if you want to adjust the readability of the content, you should think about font-size, not screen-size or "container" size.
you could use em units or rem units and adjust the relative size of your whole reading experience changing one simple value: font-size in body.
by default 1em = 16px = 100% - so you can start with:
body {
font-size:100%
}
through javascript you can change that value to bigger or smaller and your whole content font-size will scale accordingly.
Try this
<meta name="viewport" content="width=device-width, initial-scale=1">
instead of this..
<meta name="viewport" content="width=1028"/>
I'd like mobile devices to scale automatically so that when they're
viewing the book it will scale the book to always be the width of the
screen.
If you want the width to respond to screen width remove width:1028px; from your css. Currently it's saying to always be that wide, never wider and never narrower.
I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize
I have tried using:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
And
<script type="text/javascript">
$(document).ready(function () {
$(window).resize(function () {
calculateNewScale();
});
calculateNewScale(); // if the user go to the page and his window is less than 1920px
function calculateNewScale() {
var percentageOn1 = $(window).width() / 1920);
$("body").css({
"-moz-transform": "scale(" + percentageOn1 + ")",
"-webkit-transform": "scale(" + percentageOn1 + ")",
"transform": "scale(" + percentageOn1 + ")"
});
}
});
And also with CSS
body {
width:100vw;
height:100vh;
}
The website is here:
kotechweb.com/new_focus/page/about_us
The problem is, right now the content is overlapped when resized.
The view port:<meta name="viewport" content="width=device-width, initial-scale=1">. This will make the browser render the width of the page at the width of its own screen.
This article gives more information for the viewport meta tags:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
works only when the window is loaded not re-sized
calculateNewScale() function just tries to resize the body
Your font size are set in px - change them to % or rem
I know you dont want the site responsive but setting CSS media queries can help with what you want.
you can use for make response
1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"
some additional rules:
1. Do NOT use large fixed width elements
2. Do NOT let the content rely on a particular viewport width to render well
3. Use CSS media queries to apply different styling for small and large screens
also you can use media property and apply screen wise css.
There are few things you can do:
1. change your HTML layout. Put image, content and footer within a container or wrapper like
<html>
<head></head>
<body>
<div id="wrapper">
//everything goess inside here
</div>
</body>
</html>
use rem/em instead of px. You haven't used rem/em/vw consistently. Meaning, for left-margin you have used 50px. And there will be time when it will cause word shift.
your tag includes bootstrap. If you are using bootstrap....then you are better off using BootStrap Grid. I would first build a page for mobile viewing and then I will use same layout for bigger screen.
good luck.
If you are using bootstrap, you could simply change your container class to class = "container-fluid"
Your viewport tag is wrong, should be <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
But maybe <meta name="viewport" content="user-scalable=no" /> will work.
Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.
Some CSS things you can do:
1) You can make the main background scale based on browser width by applying
body {
background-size: cover;
background-repeat: no-repeat;
}
2) You can make all measurement units based on vw units similar to this:
Font scaling based on width of container
for instance, if you want your fonts to scale proportionate to your width, you can set
body {
font-size: 0.835vw; //around 14px at 1920px
}
Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container
.container {
height: 150vw; //around 300px at 1920px
}
Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.
Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?
Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.
So I'm trying to make my website adjust for mobile browsers. I've got 2 CSS files, one which is always included and one with
media="screen and (max-width:500px)"
To get that to work, I'm using the meta tag
<meta name="viewport" content="width=device-width" />
This works great sa long the content-wrapping divs have a fixed width, or if the screen is less than 500px wide. But when I flip my phone (and thereby get >500px width), divs directly in the body with their width set to 100% get cut off. I'm assuming because width=device-width makes css 100% equal to the screen width, even if the website is larger than the screen.
Proper in a desktop browser (the background is meant to cover the entire document width):
In (flipped) phone or chrome mobile emulation. A large chunk of the menu cuts out.
CSS:
#top{
position:relative;
background:rgba(191,186,130,1);
height:150px;
width:100%;
overflow:visible;
}
Is there any way I can make the div width span the entire document? Do I need javascript to detect this?
Set your initial scale equal to 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am having some issues with media queries. They're just not working. I have a pretty blank site right now - it's just one page with one img in it.
This question is related to this one, but is not a duplicate.
In my previous question, I was unable to get the image to center horizonally on the page when the max-width was 480px.
The code I was using:
#media (max-width: 480px)
{
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
}
Now, I have managed to solve that - partially - by adding:
<meta name="viewport" content="width=device-width" />
to the head section of the document. But now, on a different phone which has a width of 1280px, the img still centers! Even though the only style in my CSS specifically says max-width:480px.
Why is this happening?
I have two phones. One phone is 480px wide and the other is 1280px wide. Why does the img center on the 1280px phone when it shouldn't be?
Found this - http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Apparently, a devices resolution impacts its css width. I think css itself has an average pixel width which may or may not correspond with high-res devices out there.
So, according to this page, your 720 width still falls under CSS' understanding of 480. Hope that answers your question.
What you could try is -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The above is from https://stackoverflow.com/a/19933195/3652449