I am trying to do something that, I thought, was very simple. The header of a website I am building is a solid color that needs to span the entire width of the screen regardless of which browser it is veiwed in. What I have created so far works wonderful on desktops and laptops, but when I test it on a tablet or a mobile phone, the header does not span all the way to the right. The content inside of the header does span all the way however, which is really confusing to me. The only way I can get the header bar to span the entire width is by setting the position property to static, which is not what I need for this site, so that doesn't do me any good. Below is the CSS and HTML I am using. Could someone take a look at it and let me know what I am missing.
HTML:
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS:
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.
This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <head>...</head>)
Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.
UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:
<meta name="viewport" content="width=800" />
This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
I haven't tested this out on tablet or a mobile phone, but I think the problem is in setting a fixed width to the "container" div. Since you have set 100% width for html, body and the header div, these will always occupy 100% of the width irrespective of whether it is a browser, a tablet or a mobile phone. However, this is not the case with the "container" div as it has a fixed width. Try resetting the width of the "container" div in this manner:
.container {
width: inherit;
margin: 0 auto;
text-align: center;
}
Building on PJ Brunet's answer, I had a similar styling problem, but wasn't getting enough versatility from changing the meta tags in the html head. Instead, I added minimum width values in pixels to the css. Using the original question as an example:
.header {
/* restrict the smallest device size to this width */
min-width: 475px;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
Then you can target the next conventionally sized device:
#media (min-width:641px) {
.header {
/* force devises with a smaller width to observe this style */
min-width: 700px;
}
}
Maybe not the best practice, but it will allow you to capture all devise sizes into more manageable groups to suit the the design.
You can also give min-width to body. Something like body {width: 1200px;}, depending on your width settings. Some clients might want the exact copy of desktop in their mobile!.
Related
It seems everything I add as meta to work for mobile version of the site , it is actually ignored and is full-zoomed ( when I visit my site on a mobile ) to the actual size of what I have in CSS.
> I tried :
> <meta name="viewport" content="width=device-width,> initial-scale=1, maximum-scale=1"> &
> <meta name="viewport"> content="width=device-width">
As a matter of fact, I completely took off that line in hope it will not scale, but it still zoom-in !
The header, seems to be ok, and is scaling good on mobile , but everything else, is zoomed-in .
Exemple : thumb is 728x410 in css , yet , with or without the mobile meta viewport , it still have the same size on mobile which makes it huge!
Also, when the website is loading on mobile, the actual meta=viewport works , meaning if I have set to have a 320 px on mobile, the thumbs does show as it should , but when website is fully loaded, bum .. back to 728px which i have in css!
Anyone knows how to fix this?
Thanks!
Having built many responsive websites, I have to state that if you have content wider than the mobile screen (in this case 320px, Iphone only?), it will mess everything up.
To solve this, make sure you have a few main wrappers around your content like a header, content and footer div.
Give these divs the following css rules when on mobile:
#media screen and (max-device-width: 480px) {
.header,.content,.footer{
display:block;
position: relative /*for absolute positioning or to get them behind
pop-ups with z-index
this also prevents absolute-position elements being outside
the parent element from stretching the view*/
width:100%;
overflow:hidden;
}
}
The above should prevent anything from messing up your scaling. From there, you can see which elements don't fit and style them accordingly.
Also, if you want to disallow zooming, you have to put in user-scalable=0, like so:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0' name='viewport' />
Make sure your content actually scales down to your phone's screen size. It will make a major difference. I would also personally recommend you to get used to using box-sizing:border-box;. This means adding any padding or borders to any elements be taken off the element rather than being added to the element.
example: Your screen is 320px wide. You have a <div width="320"></div>, it will be 320px wide. Adding padding:20px to it, will make it 360px wide (20px padding to both sides)
However, using box-sizing:border-box will make sure it stays at 320px (same with 100% width) and instead, the content will be fit within the leftover 280px. Just a tip.
also: What kind of media queries are you using in your CSS file?
Update specifically for your website
I got it to be like this:
--img removed for privacy reasons --
These are the css changes I've made including adding the meta tag in my answer to your head, replacing yours:
#headerContent {
width: 100%;
height: 40px;
margin: 0 auto;
}
#mainContainer {
width: 100%;
margin: 0 auto;
}
.videoListItem .thumb img {
position: absolute;
width: 100%!important;
overflow: hidden;
top: -68px;
left: 0;
}
#leftColumn {
float: left;
width: 100%;
}
.videoListItem .thumb .playIcon {
background: url(./images/play_icon.png) no-repeat 0 0;
top: 50%;
left: 50%;
width: 86px;
height: 60px;
position: absolute;
margin-top: -30px;
margin-left: -43px;
}
I'm trying to make my site a little more mobile-friendly. I have some graphs that look best when they can be pretty wide (800px), but I would prefer for them to shrink on mobile instead of having a scroll bar. I've added this to a stylesheet:
#media screen and (max-width:600px){
div.graph {
max-width: 100%;
margin: auto;
height:400px;
}
}
#media screen and (min-width:601px){
div.graph{
max-width: 800px;
margin: auto;
height: 400px;
}
}
And included that in my master page:
<link href="~/Styles/ResponsiveDesign.css" rel="stylesheet" type="text/css" />
Here is one of the divs that holds a graph:
<div class="graph" id="myDiv" ></div>
The problem is when I view the page with the browser full-size now, the graph is huge--far more than 800 px. Even if I change the max-width to something ridiculous like 25px, it's still huge. Any thoughts?
Do like this (and make sure custom CSS is loaded last if you use a library)
Update based on a comment
Since inline style work, add !important like this and it should work
width: 800px !important;
max-width: 100% !important;
and if it does work, you do have another rule overriding these or else they would have worked without the !important
div.graph{
width: 800px;
margin: auto;
height: 150px;
background: red
}
#media screen and (max-width:800px){
div.graph {
max-width: 100%;
}
}
<div class="graph" id="myDiv" ></div>
In this particular case you actually don't need the media query at all
div.graph{
width: 800px;
max-width: 100%;
margin: auto;
height: 150px;
background: red
}
<div class="graph" id="myDiv" ></div>
i think you should set it in percentage.
Ok, so if I understand it correctly you are trying to set the max width to 800px if the screen's width is bigger than 600px. How bout concretely setting the width of the div to 800px if the screen is bigger than 800px?
Alright, than the only other thing I can think of is its calling the other css block where you set the max-width to 100%. Maybe since its the same class name it is doing this I dont know. You could try commenting out that line and just trying it to see what happens. And sorry Im editing and not commenting I just started so I cant comment...?
I think the problem might be with the graph size itself, could you inspect element and check the size of the contents of the graph? My guess is that the div is the correct size, the graph isn't. We'd need to know how you are creating the graph for more specifics. Could you screen or put a demo of the graph?
Possibly also try a more specific selector? Ex:
body div#id div.graph{}
(I can't comment, sorry if this is not an answer)
I already have a working fixed footer in my webpage in iOS, but I want to repair it so it will not zoom with the rest of the content. Currently, it appears fine at normal zoom level, but when the user zooms in, the footer gets too big and runs off the page (see screenshot images linked below). I have achieved the desired behavior in the header such that it does not zoom with the rest of the page. I am currently using div tags, not the actual footer tag but I have tried it both ways and the problem persists. I am including relevant CSS code below the image links. I have tried using width:100%; instead of max-width:380px; with no luck. To view the full HTML/CSS source, please use your browser's "view source" function at
http://www.michigandayspas.com/index.php. The footer divs are very close to the bottom and the div classes are "footer-cont" and "footer".
I have wrapped the header and footer content in similar divs so I am confused as to why they are not behaving similarly. One difference is that the header has an IMG tag, but the footer div contains more complicated HTML elements such as a table, but I don't see how this can cause an issue. I got and modified the code from a helpful video tutorial at: http://www.cssreset.com/creating-fixed-headers-with-css/
NOTE: I have two stylesheets; one for the desktop or tablet and another designed for mobile phones, especially iPhones. In order to demo this live, please visit the link above on your smartphone or in a simulator such as the iOS Simulator as a part of Xcode. I am using Safari on iOS.
These are URLs for screenshot images that demonstrate the problem:
michigandayspas.com/images/iOS_index.png
michigandayspas.com/images/ads_too_large.png
Relevant CSS from small-device.css file
.header-cont {
width:100%;
position:fixed;
top:0px;
background-color: white;
}
.header {
margin-right: auto;
margin-left: auto;
display:block;
width: auto;
}
div.footer-cont {
max-width:380px;
position:fixed;
bottom:0px;
margin-right: auto;
margin-left: auto;
opacity: 100%;
}
div.footer {
margin-right: auto;
margin-left: auto;
display:block;
width:auto;
background-color: white;
opacity: 100%;
}
You can stop the zoom on mobile adding this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have an inner of fixed width containing the content of variable size. I want the height of that inner-container to be as big as the content, and at least as big as the screen's height (when the content is smaller). The page also has a fixed size footer.
Normally I'd think of setting min-height: 100% to both inner and outer (root) containers, but that doesn't work in CSS.
The code I present below is a simplified example of the situation I have on a bigger page (with much more various elements in the root-container). A green inner-container is not filling the entire screen's height as I'd like it to be. I did manage for it to do so (for example by setting root-container's height instead of min-height, but then the rendering behaved wrongly when the content was bigger than the screen's height (you can quickly simulate that by changing the font-size to a bigger value, like 21px). I want to have it working (the green column filling at least the screen's height, black on it's both sides throught the whole height and the footer on the very bottom) in both cases.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
#root-container {
min-height: 100%;
background: black;
color: white;
margin-bottom: -200px;
}
#root-container:after {
height: 200px;
content: "";
display: block;
}
#inner-container {
min-height: 100%;
width: 400px;
background: green;
color: white;
font-size: 11px;
margin-left: auto;
margin-right: auto;
}
#footer {
height: 200px;
background: orange;
color: black;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="root-container">
<div id="inner-container">
<h1>Content</h1>
And when the body finally starts to let go<br/>
let it all go at once<br/>
not piece by piece<br/>
but like a whole bucket of stars<br/>
dumped into the universe<br/>
Whoh! Watcb it go!<br/>
Good-bye small hands, good-bye small heart<br/>
good-bye small head<br/>
My soul is climbing tree trunks<br/>
and swinging from every branch<br/><br/>
They're calling on me<br/>
they're calling on me<br/><br/>
Do you think I'm an animal?<br/>
Am I not?<br/>
Do you like fur<br/>
Do you wanna come over<br/>
Are we captive only for a short time<br/>
Is there splendor, I'm not ashamed<br/>
Desire shoots through me<br/>
Like birds singing<br/>
(The way you move no ocean's waves were ever as fluid)<br/><br/>
They're calling on me<br/>
they're calling on me<br/>
I hit the mark!<br/>
I target moon, I target sky, I target sun<br/>
Fall down on the world before it falls on you<br/><br/>
Like beggars, like Stars<br/>
like whores, us all<br/>
Like beggars, like dogs<br/>
Like Stars, us all<br/><br/>
Shoot straight for my heart<br/>
(And when you were near no sky was ever quite so clear)<br/><br/>
Like stars, so small<br/>
Like us, when we fall<br/>
Like beggars, like whores<br/>
Like lovers, Get Up!<br/>
Get up, too far
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
And the same example uploaded to JSFiddle: http://jsfiddle.net/gNT8m/
This is a bug: children of parents with min-height can't inherit the height property.
There are many potential workarounds, but you're right that this should work the way you initially tried.
Update:
As to workarounds, the simplest that occurs to me is to set display: flex on your #root-container. I haven't cross-browser tested this solution, so you might want to investigate it further, but using flexbox is a good way to go.
See it working.
You'll want to add a few other niceties, like adding position: relative to your footer and adding some space (padding: <your footer's height>px) to your #inner-container to make sure your footer doesn't cover up any content.
I want all (or just some) of my images getting resized automatically when I resize my browser window.
I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.
source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
Define the width and/or height using % values.
Use a series of #media queries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.