I have a page which displays fine on the screen.
I have a css which then formats the screen for print and re-sizes the sections.
My problem is that the print layout has a margin of approximately an inch from the left of the page which makes 2 elements print off the page on the right hand side.
I could probably compress the contents from the right but I want to know if I can reduce the margin on the left (and basically center the contents)
I have set the body tag on print to margin:0; padding: 0; but this has no effect?
Is there another setting that controls print margins?
You can set the print margin (and landscape orientation) with CSS like:
#media print {
#page {
size: letter landscape;
margin: 4.0cm;
}
}
And the good news is, it works! (On Chrome. Not supported on other browsers though I did not test IE9.)
The margin must be in a unit that makes sense in print -- pixels are not allowed.
Chrome will not shrink the margin below a fixed minimum, which may be determined by the printer driver.
You could also try to set
margin:0; and padding:0;
to the html, main content div and p tags
and see if that helps.
Otherwise, your best bet is to set a specific width on your elements.
Related
I am not a front end dev but I have inherited a web page that uses media queries and aspect ratio so the content of the page grows proportionally to the size of the viewport, in this case a browser window. The problem is there is a paragraph on the page that is justified (flush to the left and right), so at certain sizes, the spacing between words is not aesthetically pleasing to my client. My question is what is standard practice for this sort of thing? Could one display the content at fixed sizes depending on the size of the browser window using media queries and min-width/max-width min-height/max-height settings, like so:
if the viewport size is < x, render content at fixed size a
else if viewport size is < y, render content at fixed size b
else if viewport size is < z, render content at fixed size c
else render content at fixed size d
?
Or?
The standard practice is to not use justified content which suites well to paper but most times not for screen.
What can you do, now you are here:
.content{
width:80%; /* dynamic value */
max-width:500px; /* fixed maximum */
/* center */
margin-left:auto;
margin-right:auto;
}
You need to edit the CSS selector to yours
Now you are mobile ready and with a maximum width you can have the "best" looking for your justified text (how often does it change?). You need to play around with the values to get an appropriate result.
You also can change the Values on larger viewport sizes:
#media screen and ( min-width:1024px ) {
.content{
width:70%; /* dynamic value */
max-width:1440px; /* fixed maximum */
}
}
Of course you also can leave out the dynamic values and use only fixed values.
thank you all for your responses. i just, at least for now and after many hours of reading and trying various things, solved the problem by simply changing one of the font-size settings just slightly. from 2vw to 1.98vw. although end user is happy, i want / need to understand what i've done. looks like it's time to learn front end work.
#media all and (max-aspect-ratio: 100/68){
...
table#main td#mainLeft table#logoMoto{
width: 30vw;
height: 66vw;
font-family: Arial, Helvetica, sans-serif;
--> font-size: 1.98vw; // was font-size: 2vw;
vertical-align: top;
}
...
}
After migrating a website to responsive html5 using media queries, I find that I still can't get the mobile iOS 7 safari browser to display the footer/main/header sections at the same width, despite their css being set to display:block and width:100%.
Examples:
http://i.imgur.com/QUxffNT.jpg
http://dev.shermanbrothers.com (username: devreview password: De3e3vfr4 ) [html5 update to site]
And a similar problem occurs even on an older version of the site:
http://i.imgur.com/1sS4WRZ.jpg
http://shermanbrothers.com [OLD version of the site with table-based layout, still has similar issues]
Now, I have some guesses as to -why- this is happening on mobile and not on the narrow windows of a desktop browser:
Some block level elements like the main/between-header-and-footer one have too much content to even shrink down to that 100%
Or perhaps using display:table on the middle section is allowing it to blow up larger than the other block & 100% width elements.
But I don't know what techniques to use to combat the problem.
- I can't even inspect the code via mobile to determine the reasons for the differences.
- setting a css max-width to images (eg max-width:100% ) within their container is not better.
So how can mobile-specific bugs, and mobile width/layout issues especially, be debugged & dealt with?
The tables are a huge headache for diagnosing this problem since there is so much markup to look through. However, the tables are not the reason why your layout is breaking (at least not with the markup I saw when I came across this question). Your problem is that you have so many fixed widths on images, text and table columns.
To fix this, you will have to set-up breakpoints in your media queries. Something like this for the images:
#media (min-width: Whatever is the smallest screen size the image will not break your layout) and (max-width: 1 pixel below the previous size where the image was so wide it broke your layout) {
.header-image {
width: whatever is the widest width that keeps it from breaking your layout; // This will change with smaller queries
height: auto;
}
}
And something like this for your fonts:
#media (min-width: Whatever is the smallest size the font will not break your layout) and (max-width: 1 pixel below the previous size where the font was so wide it broke your layout) {
.navbar-font {
font-size: whatever is the biggest font size that keeps the font from breaking your layout;
}
}
Alternatively for your fonts, you could tell them to wrap as the screen gets smaller, but then you would have to factor in their height as they wrapped:
.navbar-font {
white-space: pre-wrap;
}
Do something similar with the above to allow the width of your table columns to resize properly as well.
Also, follow #TylerEich 's suggestion and configure your viewports.
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://developer.android.com/guide/webapps/best-practices.html
Finally, check out BrowserStack for mobile browser testing.
This may not fix all of your layout issues, but it fixed the biggest ones I found. Table-based layouts are a pain to work with. Good luck :)
font-size
the top element of the footer columns (footer-flex) has a font-size: 10px. And the child element (.footer-block) has a font-size: 2em. This means the .footer-block elements have font-size: 20px. (10px(top element font-size) * 2em) = 20px. This causes big texts in your footer.
display
You're using float to align elements side by side which is a very bad practice. If you'd like to align elements properly you should select display: table-cell or display: inline-block. The difference is table-cell is just like <td> tag. Which means all the consecutive elements has the same height.
Because table-cell acts just like td tag the table-cell cannot have margins. If you'd like to have margins for your table-cell you need to provide a top element which is display: table with a style border-spacing. An example which is very proper for your case: http://jsfiddle.net/R3zDu/
As you can see there is no clear: both or float: blah definitions and clear css definition.
This doesn't mean "don't use float anymore". float's main purpose is to align the images in the texts/paragraphs.
clear all the float and clear: both styles.
apply table-cell method.
testing
I don't think there is a software that renders the page just like a mobile phone. On the other hand, if you have problems in iOS you can take a look at Safari browser in your PC or Mac which acts like iOS Safari in most cases (at least in your case).
Sounds like you need a mobile-friendly <meta> tag. Example:
<meta name="viewport" content="width=device-width, user-scalable=no">
Quote from the Mozilla Developer Network:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, user-scalable=no">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
There is a lot of code that needs to be redone.
Instead of being this painful, I highly recommend you to look into a framework like bootstrap or foundation. They both provide good template example to help you get started. Their media queries also work like a charm and they will help you cut lots of development time and some headache.
#head{
float:left;
width:100%;
}
#content_head{
display:table;
margin:0 auto;
}
#body{
float:left;
width:100%;
}
#content_body{
display:table;
margin:0 auto;
}
#footer{
float:left;
width:100%;
}
#content_footer{
display:table;
margin:0 auto;
}
If I was you, and don't want to do a complete overhaul, I would suggest you set:
<meta name="viewport" content="width=500px" />
And try fixing the things that float out of your 500px width (like the navigation).
This way, you don't have to do much work. The site is more or less a bit normal visible on a mobile. I studied your code a little, but it's a lot of working if you want to do it proper.
500px is somewhat ok for a mobile device, but you can tweak it to what you like, it isn't as nice as device-width but gives you a fair compromis between your pile of work to do and the general user experience. As long as you allow zooming (user scaling).
One other trick I suggest is to make the font a tiny bit bigger on mobile on some parts, like your brand nav. And form elements always minimal 16px so you don't get zooming on an iPhone when you focus a field.
#media all and (max-width: 767px) {
.brand-name-td{
font-size:1em;
}
input[type="text"],select,textarea{
font-size:16px;
}
}
Further, what's handy and improves the UX, there are some parts you just want to hide on a phone, use this:
#media all and (max-width: 767px) {
.hide-mobile{
display:none;
}
}
And just when you have some element you want to hide, add the class (divide by a space if you have more classes)
<td class="right-side-nav-container hide-mobile">...</td>
Regards
use diplay block and width to 100%, remove also float and max-width, min-width property.
Also you can simulate a mobile just by using a browser since you already have the viewport metadata. Just resize the width of the browser.
I picked up this handy little fix while browsing some random sites in firebug, it looks like what you're describing, why not give it a go and see if it works :P
$(function(){
// IPad/IPhone
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent,
gestureStart = function () {
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
},
scaleFix = function () {
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", gestureStart, false);
}
};
scaleFix();
});
I've been developing print styles for my employer's site. In Chrome, everything looks correct print preview. In Firefox and Internet Explorer, however, the user is given a zoom option. If the user zooms to "Shrink to Fit," the print preview right. But at 100% zoom, everything scales bigger than the stylesheet dictates, and clips off the page.
body {
font-size:100%;
}
#media print {
body {
font-size:12pt;
}
}
How do IE and FF determine how to size elements at 100%? Is there anything I can do about it? At the least, can I prevent clipping at most reasonable zoom levels?
Example:
Shrink to fit, looks correct:
100%, things clip:
I had missed some widths set in px on the containing elements. Setting all containing elements widths in percentage widths within the print sheet achieved the intended result.
i have an dynamic image gallery to display, using PHP...
My PROB
the style & positioning should be that if there is not enough space for a whole div, like in the image above, then the DIVs in the row should position them like the following
centered and equi distant...
here is JS-Fiddle basic template set, if somebody wants to try something on jsFiddle
If you wanted to achieve this with just CSS, the code would be as so:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
As far as I remember, that's it..
Good luck!
Never "clear" the float (at least until the end of the grid).
Enclose each img in its own DIV with the float:left style,
Important: Give each of those DIVs the same HEIGHT (slightly larger than the largest photo), otherwise if the images are different heights you will get some weird floating.
Optional: If your images are different widths, and you want a nice 'grid pattern', then you can give all the DIVs a width property.
Beware of the effects of margins on overall height/width.
Also note that if you use the standard meta viewport tag on your pages to format them for narrow mobile screens, this will shove all your images into columns to fit that screen without shrinking them unbearably (provided something else doesn't make the page wide).
#div {
width: 220px;
height: 215px;
float: left;
}
you can achieve all of that simply with css width property for div
#div {
width:500px;
}
We implemented almost the same here
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
here also , you can switch between grid view and normal view , all we are playing around is with divs width
http://www.allposters.com/-st/Animal-Posters_c622_.htm
Google had the same problem with their image search... they had to overcome it with fancy scripting. Looking at the source, each row of images is a <ul> inside a <span>, and each image is in an <li>. Then when you resize the window, the images get moved from one <ul> to another. That's the best method they could come up with, apparently.
So, using jQuery:
blocksPerRow = Math.floor($('#container').width() / blockWidth);
$('.row ul').each(function () {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
I think that should do it. Add that to $(window).resize() as well as the document ready event.
I am trying to figure out what margins are best for readability and i figure it is best to use standard paper size and margins. I looked it up and its seems like 8.5 is standard. I looked up how to do basic CSS and hit a problem
margin-left: 1.5in;
margin-right: 8.0in;
I was excepting the left will start from 1.5 of the left side as well as right being 8in from the left side. It turns out right is 8in from the right ruining my page. How do i set it so the width of the text is 7inches no matter what resolution the user browser is on?
You could set the width of the body to 7 inches. But the browser will automatically lay out the text for you to fit the paper. So I would have set both the left and the right margins to 1.5 inches. You may use a separate CSS file for printing.
Take a look at the CSS Box Model and Media Type rules. The #page rule (for paged media) may also be of interest.
As has already been said, you should use the width property to define the width of the block-level element. You can then use padding and margin to pad the text and put a margin around its container.
Something like this will let you specify the document style for print:
#media print {
p {
font-family: times,serif;
font-size: 12px
margin: 1cm 2cm;
page-break-inside: avoid;
widows: 2;
orphans: 2;
}
}
I would recommend letting the printer software automatically determine the dimensions of the text based on the margins you specify and the page used to print. That way the user can more easily print on whatever dimension paper they want. Here are some print-specific CSS properties you may want to use to format the printed document.
And I believe serif fonts are easier to read on print (or so people say), so that might also be worth considering.
You're looking at it backwards: margin-right is the width in from the right-hand side of the viewport (or the piece of paper). So for a 8.5" piece of paper with 1" margins on all sides, you'd want:
body{
margin-left: 1in;
margin-right: 1in;
width: 6.5in;
}