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.
Related
I want to have a page that takes the full height and width of the client window. I want to be able to position divs within the page using position=absolute, with a specified transform. They will be playing cards on a table, so they'll have an x, y, and rotation. This all works great, but on mobile, when one of the absolutely positioned elements goes beyond the boundaries of the parent, the browser adds a scrollbar and lets you scroll to the out-of-bounds elements. I've found that I can clip the rendering of the absolutely positioned elements by using clip-path: inset(0) on the parent, but the mobile page still lets you scroll over to the white part beyond the application. Is there some other way to restrict the viewport to just the body so I can keep my full-page, non-scrolling experience in tact? I don't think overflow:hidden works here because of the absolute positioning.
here's an example. https://ddeklotz-static-page.s3.amazonaws.com/example.html
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<div class="square"/>
</div>
</body>
</html>
body {
margin: 0;
overflow: hidden;
}
.app {
background-color: red;
min-height: 100vh;
clip-path:inset(0);
}
.square {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
transform: translate(330px, 50px) rotate(20deg);
}
I think I found something that works: I needed to add "user-scalable=0" to my viewport meta tag's content. It looks like before the viewport was zoomed out to show the full extent of the clipped div's bounding region, which isn't what I wanted. Disabling user scaling means we just keep the layout viewport in view, I think.
It looks like I also could have use position:fixed (instead of absolute) to address this, but that would have made the positioning of the divs more difficult (as their parent isn't likely to have the same origin as the viewport).
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'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">
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.