I'm just curious, when you upload a banner to https://h5validator.appspot.com/dcm#/asset, what line of code does it use to detect the dimensions of the banner.
I have a banner that is 160x600, but the HTML5 Validator is detecting it as 300x250. My body, and my container are set to a width: 160px and height: 600px
I'm not sure where else to look. Thanks in advance!
For anyone curious, the answer is that the banner needs a meta tag.
From Google DoubleClick's Developer Guidelines:
Fixed: for fixed dimensions, (such as 300x250), enter fixed the dimensions as shown below.
<meta name="ad.size" content="width=300,height=250">
Flexible: for flexible dimensions, enter a 0 for the width and a 0 for the height:
<meta name="ad.size" content="width=0,height=0">
Flexible width: for a flexible width and a fixed height, enter a 0 for the width and a fixed value (such as 250) for the height:
<meta name="ad.size" content="width=0,height=250">
Flexible height: For a flexible height and a fixed width, enter a fixed value (such as 300) for the width and a 0 for the height:
<meta name="ad.size" content="width=0,height=250">
Related
body {
margin: 0;
}
div {
box-sizing: border-box;
background-color: red;
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Text that overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows </div>
</body>
</html>
When I inspect the above page with Chrome devtools, turn on Device Toolbar
and set device width to anything below 450 (so that the text overflows)
and device type to Mobile,
there is a gap of space to the right from div.
And as I adjust the width of the device the width of the div is always smaller than the width of the screen. Though the text overflows I expect the div to always be as wide as the screen because the div is a child of the body and it has width: 100%;. Moreover, the devtools say that the div has the same width as the screen.
This issue does not happen on desktop (i.e. if I set device type to Desktop).
What is even weirder is that the devtools say that the div is as wide as the screen.
If I switch to Desktop device type and then back to Mobile than the issue disappears but the page seems zoomed in.
Also when I launch this page on a real mobile device where text still overflows, the issue seems to disappear
but when I zoom out it is still there.
So I assume that when I initially opened the page on the real mobile device, the browser set the zoom value automatically so that the div seems to be as wide as the parent.
What piece of HTML and CSS theory do I miss so that I don't understand the reason behind the issue? Why does it happen? How do I fix the problem?
Try this instead:
div {
box-sizing: border-box;
background-color: red;
width: 100vmax;
height: 300px;
}
I think the problem is the word 'overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows' is so long and exceeding the div.
Now, I'm not sure why it's just happen on desktop using mobile mode.
But you can fix it using in your CSS div class the following line
word-break: break-all;
This will force the word break.
Result
Result after add "word-break: break-all;"
In this simplified HTML, I have a fixed div that is meant to be the exact width of the window. But there is also a very long word in the content above the div that messes up the layout.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
div {
position: fixed;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body><p>Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword</p>
<div><b>0%</b><b>25%</b><b>50%</b><b>75%</b><b>100%</b></div>
</body>
</html>
It looks as if the long word causes the "viewport" to stretch to be wider than the window, so the div (fixed to the viewport) ends up being wider than the window.
Now this only happens on mobile devices, even using Chrome Dev Tools. In Desktop mode, all is fine:
But change to Mobile and the fixed div stretches:
So two questions:
How can I prevent the div from stretching wider than the window?
What is Chrome Dev Tools doing differently when I switch to Mobile view?
1) I've managed to fix all the issues I can create with your code by:
p {
max-width: 100vw;
overflow: hidden;
}
2) Chrome does very strange things with the width of that div as I mess with the css and refresh the page. It does not render at all consistently even with the same css. In fact, I have two tabs open that show the page differently from the same code in the same file, even while refreshing. I think the behavior of a div when smaller than the viewport may be unspecified, and you must use something like my solution to tell Chrome what to do.
this problem is caused by justify-content: space-between. You dont actually set a width, and different things add different amounts of spacing.
If you were to set a width for the div like this: width: 300px, the width wouldn't change on mobile or pc.
I wrote width: 100%, but it doesn't fill all the width. What's the problem? This is the website I'm talking about can be found here.
currently, .adfon looks like this:
.adfon {
background-color: #D6ECF4;
height: 470px;
width: 100%;
display: block;
}
change the width:100%; to min-width:1100px;
To get your footer working, apply the same concept I explained and it should work.
Some parts of your body have CSS specified at a width of 1100px instead of a percentage. A percentage width references the container that it sits in. In this case, the problem area is contained directly in the body. The body's width is only the width of the window, not the width of the contents on your site, which seems to be set to a width of 1100px;
Your site is not adaptive, but you use:
<meta name="viewport" content="width=device-width, initial-scale=1">
These values for adaptive sites only. In your case better to use something like this:
<meta name="viewport" content="width=1100"/>
P.S. width: 100% with display: block do nothing in any case.
I'm working on http://preview.j64e7zzvo82p4x6r4fdjze6piimmfgviwsruf9j89pidaemi.box.codeanywhere.com/ and have nearly finished making it responsive.
But for some reason when the browser is sized to anything below 991px in width then it creates whitespace on the right side. All of the content will snap to the screen size but at the end of the day you can still scroll to the right and see a big black background because of all the whitespace.
I thought it was the images on the size that were to big for the viewport but even after removing the images, adding the img-responsive class to the images, and other attempts to fix, the site still has this problem
What is causing all of this whitespace?
The rule for #ctaButtons has a fixed width. Try replace it to auto:
#ctaButtons {
width: auto;
height: 120px;
padding: 20px;
margin: 0 auto;
}
Adding this fixed it for me - you are missing the viewport code from what I can see - for example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You can read more at - the third paragraph down http://getbootstrap.com/css/
edited, actually I must have tried that while you applied you fix... I'd still put the viewport in though!...
Try adding overflow-x: hidden; to your container <div>.
I am building a mobile app in PhoneGap using HTML5,CSS3, Javascript and Jquery-mobile.
I have an html page with an img element to display an image. The problem i am facing is that with diffrent screen size it does not display based on the screen but the actual size of the image causing images to be displayed half. Is there a way i can automate this process so that it will display based on the screen size of the device ?
<img src="img\following_followers.png" alt="" >
This SO question may be of some help.
Technically, you can't access the screen's dimensions directly from CSS, nor can an element know about its parent's absolute dimensions without the help of JavaScript. Instead you usually express an element's dimensions relative to its parent, such as
#logo {
width: 500px;
}
#logo img {
width: 33%;
}
If an image's CSS height is not explicitly set or inherited, it'll scale with the width; the reverse is also true.
You can set an image to fill its parent container using width: 100% or height: 100%, but this may cause the image to overflow the container. The properties max-width and max-height can account for this. Try:
img {
max-height: 100%;
width: 100%;
}
but be aware that most browsers by default allow a document to grow in height as necessary, so a max-height: 100% property will do very little if its parent container doesn't have some sort of restriction on its own height.
That said, Javascript can access the browser's dimensions directly with window.innerWidth and window.innerHeight. However, these properties are only set when the page initially loads, and they won't change if the browser window is resized. document.documentElement.clientWidth and document.documentElement.clientHeight are more reliable.
As always, UX libraries like jQuery and Bootstrap.js make this kind of task much easier.
Make sure that you're having the right meta tag. If not then add this
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Then in css
<img src="img\following_followers.png" alt="" style="width:100%;height:100%;" >
Use this in your style
img {
height: 100%;
width: 100%;
}
You will have to use the CSS3 #media property. This is part of what we call "responsive" design.
There are even ready-made themes available on the internet, just search up "responsive template".
You can also take a look at this link for more information.