bootstrap align photos when printing
Hi, I just put up a new responsive site, www.magickitchen.com.
The boss wants to be able to print the catalog category pages, such as(this is on the development site):http://dev.magickitchen.com/menu/specials.html to access, please use: userid: pepe pass: BobTheBuilder45!!
I used <link rel="stylesheet" type="text/css" media="print" href="bootstrap.min.css"> and class hidden-print to get it close.
Everything superfluous is off the page when printing, and the MainContent Area is at 100%.
But the boss still wants the images to align left of the description on printing. Is anyone aware of code that will do that?
I also need help hiding the top description. I have:
<h1 class="hidden-print" style="text-align:center;m
<MIM>CAT_desc3</MIM>
CAT_Name_label is Special Deals Page. CAT_desc3 is the paragraph or two below that.
Thanks.
The boss wants to be able to print the catalog category pages, such as(this is on the development site):http://dev.magickitchen.com/menu/specials.html to access, please use: userid: pepe pass: BobTheBuilder45!!
I used <link rel="stylesheet" type="text/css" media="print" href="bootstrap.min.css"> and class hidden-print to get it close.
Everything superfluous is off the page when printing, and the MainContent Area is at 100%.
But the boss still wants the images to align left of the description on printing. Is anyone aware of code that will do that?
I also need help hiding the top description. I have:
<h1 class="hidden-print" style="text-align:center;m
<MIM>CAT_desc3</MIM>
CAT_Name_label is Special Deals Page. CAT_desc3 is the paragraph or two below that.
Thanks.
ASKER
I'm sorry, I'll get the developer to make those live again.
Hi,
Bootstrap have a print.css that you may want to check.
for example there is a class that may cause issue with some alignment.
What I usually do is to create a custom_print.css to make adjustment.
It may is required a lot of time to get the result you want, because not all browser render the print the same way...
I do often have problem with break-page too...
Don't forget to use @media print
Another way is to print the page content using another template I'm doing this with PHP, but I prefer to use CSS only.
Bootstrap have a print.css that you may want to check.
for example there is a class that may cause issue with some alignment.
body * { float: none !important; } What I usually do is to create a custom_print.css to make adjustment.
It may is required a lot of time to get the result you want, because not all browser render the print the same way...
I do often have problem with break-page too...
Don't forget to use @media print
Another way is to print the page content using another template I'm doing this with PHP, but I prefer to use CSS only.
ASKER
Thanks, I'll look at that. Still trying to get you a user Id.
ASKER
I did wonder about somehow pulling the information into a pdf, with proper alignment. Interesting... Thanks!
ASKER
Hi, you should be able to view the page using those credentials now. I haven't had a chance to work on it, and now I am leaving for two days, so if you don't heat from me, please be patient. Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks very much! I'll do as you suggest. Didn't realize I was calling it twice.
ASKER
Hi, I have this now: http://dev.magickitchen.com/menu/specials.html
And I have the left images set to: <div class="coursesImage print-left">
My inline style reads:
<style>
@media print {
.mainContentArea{
width:100% !important;
}
}
/* Images align left*/
.print-left { float:left; }
</style>
But the images aren't floating in print. I did a search and could not find body * { float: none !important; } in my pages anywhere.
Can you help? :) Thanks.
And I have the left images set to: <div class="coursesImage print-left">
My inline style reads:
<style>
@media print {
.mainContentArea{
width:100% !important;
}
}
/* Images align left*/
.print-left { float:left; }
</style>
But the images aren't floating in print. I did a search and could not find body * { float: none !important; } in my pages anywhere.
Can you help? :) Thanks.
ASKER
Still working on this, but this is a good start. Thanks.
I can not access the link with the credentials that you provide!
~JC