I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
Related
I want to use Adsense on my website for the first time, I encountered some problems in the start stages. I want to use the advertisement with the size manually written in the size space ( width:height ).
Display ads - image
Here I chose manual size for advertising link
width : 300px; | height : 250px;
Google Adsense says that fixed advertising cannot be responsive: Note that fixed-sized display ad units don’t dynamically change their size or respond to changes in screen orientation.
Finally my question, it is possible to create more ads from large to small from the beginning but with the change of the device to hide the advertising that is not adaptive
example > computer > html : <div class="div1"> </div> <div class="div2"> </div>
example > computer > css : .div1{display: block; width: 300px; height: 250px;} .div2{display:none}
And if device = tablet
CSS
#media only screen and (max-width: 425px) {
.div1 {
display: none;
}
div2 {
display: block;
width: 250px;
height: 250px;
}
}
The meaning of the post is if I can hide an ad from google adsesn on different devices.
!!!standard ad will be 300px X 250px if the device is less than 425px for the standard ad to write display none but for another ad that was hidden for the computer to write display block
Google adsense display fixed
Although there isn't a "proper" solution to this, i.e. not one that is using AdSense units the way they were intended to be used by Google, there is a practical workaround that I have been using for years on one of my sites, and that to my knowledge is in line with their policies (they have never complained to me about it.)
The workaround is to use Google's responsive ads, placing them inside divs with fixed widths but variable (unspecified) heights, and using CSS to hide the div's containing the ads if the browser width is outside a certain range. To make this work:
Make sure exactly one div displays for a particular screen width.
(Optional but recommended) set margin: auto; on each div so that it centers itself horizontally in the layout.
Set each div with a fixed width, but do not specify its height. This is because Google's responsive ads may serve ads of different heights so you must leave it flexible.
Make sure the div disappears if the screen width gets sufficiently narrow, because you don't want Google serving a fixed-width ad that is truncated because of your layout, that could violate policies.
You can then have up to three "sets" of such divs, and as long as only one div from each set is visible at a time, you will be in line with Google's 3 ad units per page limit. If a window is resized and it reaches a breakpoint in the CSS and triggers a display of a different div size, the ad will simply disappear until the page is reloaded.
How to code the media queries? I recommend only the max-width constraint...it's the property you need, you don't need to look at screen or anything else. E.g. here is some of my code:
div.container_320
{
margin: auto;
width: 320px;
display: none;
}
#media (max-width: 650px) { div.container_320 { display: block; } }
#media (max-width: 354px) { div.container_320 { display: none; } }
Then you can have:
<div class="container_320">
<! –– put adsense code here ––>
</div>
And this will achieve one of your divs. The div will appear only in a fixed range of widths; otherwise it will be hidden.
Then you need to make the others for whatever sets of different widths you want for the different max-widths of the user's browser. Put all div's of a set right after each other in the HTML. You can have as many such divs as you want, but I have found that usually having 3 is sufficient to optimize revenue while keeping the layout looking nice. Use Google Analytics or other data you have to look at the screen widths of people actually viewing your site.
You will need to adjust the dimensions and break points to fit your desired dimensions and layouts. Also, keep in mind the standard ad widths, and optimize that for your revenue. If you set the width to a non-standard size, you will find Google often serves very small ads with a lot of empty padding around them, and this is going to both look poor and forgo revenue because you're displaying in a small fraction of your available space.
I am working on a CSS tumblr theme header found here grandneue.tumblr.com.
(1) Stretch: I want it to be able to stretch but only up to a maximum size as the header gets too pixelated otherwise), probably around 800px.
(2) Shrink: The second issue I have is, while the header does shrink down to a certain size (it does when I change the desktop browser window and to a certain extent on the iphone5), it doesn't shrink down fully so it fits 100% on a vertical iphone5 browser display.
Can anyone please help me solve these two queries? The content is totally fine so I don't understand why the header won't follow suit!
Looks like the problem is with the image, there's a lot of white space around the logo. Edit the header image to be 800px width and make sure the logo fits right to the edges. Then set the background properties on .header-image.cover to;
.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}
Then finally make the container div .header-image-wrapper ;
.header-image-wrapper{
max-width: 800px;
}
If on mobile the image is right to the edges, just add padding to the container with a media query :)
Hope this helps!
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!