On my page http://www.somersetsights.co.za/en/index.html I have 4 div's (div.service) width text in it. The first three div's have a width of 256px. Div number 4 has width of 900px (inline style width:auto).
When I display my page on my iMac and my iPad all 4 div's have the same text size and text style. On my iPhone the text of div number 4 has a different text size and style as the first three div's.
When I define the width of div number 4 also with 256px the text size and style is the same as in the other three div's. As soon as the width is back to 900px text size and style is changing. As I said this happens only on my iPhone. Not on my iPad and my iMac.
What do I have to do to avoid text size and style change when I increase div width?
I can't simulate the situation with Chrome Dev Tools, but when I try to access your website from the iPhone Simulator I can actually see the problem.
But I guess that's because of CSS; in style.css, at row 18, you declare font-size: 100%;, and this declaration is propagated to the text in your div.service.
Probably when you override the width of the div, the size of the font is computed accordingly to it. The difference in behavior could be due to a bug in Safari or simply because of the different properties of iOS screen (scale factor, orientation, virtual size of desktop, ...).
Try replacing font-size: 100%; with another size, for example 12px or in em maybe. Then the font size shouldn't be influenced by div's width anymore.
Related
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I want to create a page using only "em" for font size.
The page is going to have a grid (tiles) with each cell having one image with some text above and below the image. The images are all in 200px X 200px in size. The Grid Cell would be somewhat larger than the image to accommodate the text areas.
How should I go about setting the height and width of the Div and Img tag, given that I want to rely only on "em" and not "px" for font size.
em is a relative unit of measurement that inherits its value from the font size of the parent element, so to apply consistent widths to your img elements using em you'll need to define a font size somewhere in your document structure using a measurement in px and inherit from that.
For reference's sake, where 1em equals 16px, an image with a width of 200px would be 12.5em wide- 200 / 16.
You'll want to specify your own measurement in px at least once in any case to ensure cross-browser compatibility. Not every browser uses the same default font size and it's possible that users have manually changed the default font size of their browser. If you rely on defaults, you very likely won't get consistent results, and it will be detrimental to your grid design.
I'm building a phonegap app for IOS, and I have one <p> tag who's contents must be exactly one line across.
These elements have the full width of the device minus a little outer padding. What I want is for the text to scale to as large a font-size as possible without wrapping to next line, without being cutoff by ellipsis or being clipped, or overflowing.
So far I can accomplish this by precisely setting the font-size (which can be done - there are only about 10 devices to think about), but I'd rather have IOS UIWeview display figure it out for me.
Is it possible to achieve this with CSS?
With CSS only, you can achieve this using Viewport Units by setting the font-size to fill up the space, but now with the text size responsive based on the viewport's width.
p {
font-size: 7vw; //set to the preferred size based on length of text
}
Here is a simple demo using vw units: https://jsfiddle.net/gmattucc/mh3rsr0o/
You would have to check if vw, vh units are supported in the device you are targeting: http://caniuse.com/#feat=viewport-units
You might also want to check out this article to learn more: https://css-tricks.com/viewport-sized-typography/
I have a draggable / resizable canvas element contained within a div.
When the div is expanded, the canvas element is too.
The canvas element has some text -> context.font("100% Impact");.
Every browser renders it fine, but Safari seems to display same sized text no matter what percentage value I put in.
50% renders the same 100% renders the same as 1000%...
Does anybody know how to fix this?
Thanks!
EDIT:
I tried defining initial font size on the html and body =>
html, body { font-size: 16px; }
but no luck...
One reason might be because your font size is smaller than the minimum acceptable by 'user'
On: Safari-Preferences-Advanced tab
it's an option Universal access - never use font sizes smaller than....
So no matter what font-size you set it will never be smaller than that limit
I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.
However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)
UPDATE:
To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.
I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.
For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.
Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.
So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:
<img src="photo.jpg" style="width:300px; height:200px" />
Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.
Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.
For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.
Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).
Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.
see the solution of this page
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
It's not really possible to make a page resolution-independent when it comes to images.
You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.
You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.
This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.
For retina devices you can also have a second image twice the size and add #2x to the file name...
so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it image#2x.jpg and retina devices will display that instead.