I have a mobile app. I want to make my css work with all mobile phones. To do this I just use percentages for all my css calls:
.Wrapper
{
margin: auto;
text-align: center;
width: 60%;
}
The problem is that I cannot get the web page height to match for all pages. By this I mean that Android screens for example are huge (with a lot of white space on the bottom) but other phones are not.(Imagine that the image below is a android. That is how my app will look on it)
I have tried this to get the heights to all be the same:
body
{
text-align: center;
font-family: Helvetica, Arial, sans-serif;
color: Black;
background: #39bcd4 none;
height: 100%;
width: 100%;
}
The width works but the height does not. How can I get the height to work the same way? If the height is off, then all my percentages are going to be off too (attempting to adjust for each mobile browser)
From Sitepoint's CSS Reference:
Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.
Setting your body to position:absolute; should work, if it doesn't try adding top:0; and bottom:0; along with your absolute positioning.
If you want the width and height of your site to be 100% of your WebView’s width and height then you need to set the viewport meta tag:
<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">
A great description of this, along with a number of other tips for hybrid apps, can be found on the Chrome developer site.
Do you mean that you want the content to space out to fill the height? Not sure if that can be done, but one design solution to all the whitespace might be to have a vertical gradient background that's darker on the bottom, to make the content look a little less lonely.
Use the viewport height unit in the css like this:
.element { max-height: 100vh; }
or
.element { min-height: 100vh; }
or even
.element { min-height: calc(100vh - 60px); }
if you need to adjust the height of a element, which is not full height.
Related
Using CSS to replace text with an image is a well known practice. CSS-Tricks has a museum of some techniques (http://css-tricks.com/examples/ImageReplacement/).
But none of these allows for replacement with a fluid image (for example, a logo that stretches across 100% of a fluid page layout). Is it possible to use CSS to do a fluid image replacement?
Almost all image replacement techniques use a background-image. And I know that you can set background-size: 100%. But it's not straightforward to get the height of the text element to scale with it's width because the browser doesn't consider the background image as part of the content.
I understand that any of the common image replacement techniques could be easily combined with media queries to incrementally change the size of the text element to specific height x width ratios that work. But that is incremental, not fluid.
I did find a blog post that discusses this (http://viljamis.com/blog/2011/fluid-image-replacement.php). But it turns out thay method actually requires putting an image in the html content. I'm looking for real text replacement.
Took some fiddling, but I figured out a way. The key is to use padding percentage to set the height, because padding-top and padding-bottom percentage is linked to container width (unlike height, which is linked to container height).
html
<h1 class="logo">The Logo</h1>
css
h1.logo {
background-image: url('logo.png');
background-size: 100%;
width: 100%;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
Where padding-top is calculated by dividing the image height by width.
Working example: http://jsfiddle.net/bXtRw/
I'll note that using overflow: hidden instead of text-indent: -9999px should also work. But I get unstable behavior in Firefox.
Also, using font-size: 0 instead of height: 0 produces unstable behavior in Firefox.
On the div that contains the background-image:
div {
max-width: 100%;
width: 100%;
min-height: 300px; //Adjust this number accordingly
height: auto;
}
I use a method identical to #Warren Whipple, but I usually use compass/sass. If you're not limited to using vanilla CSS, this method nicely abstracts a few pieces:
// Only works in Compass/Sass – not regular CSS!
h1.logo {
$header-logo-image: "logo.png";
background: image-url($header-logo-image) no-repeat;
background-size: 100%;
height: 0;
padding-top: percentage( image-height($header-logo-image) / image-width($header-logo-image) );
overflow: hidden;
width: 100%;
}
You should just have to replace the $header-logo-image variable with the name of your image.
In addition, I sometimes add: max-width: image-width($header-logo-image);, which will prevent the h1 from being sized any larger than its background image.
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.