This is probably something simple, but the Skills section on a site I'm working on for a friend (BrianCipoletta.com) isn't displaying on print preview.
The Skills section shows up fine there, but when you click Print up top or print preview, you can just barely make out (and select the top row), but nothing else shows. I've went into the print.css and I'm still at a loss.
If anyone has a minute to take a look it would be greatly appreciated, thank you! The css files are...
http://www.briancipoletta.com/css/style.css
http://www.briancipoletta.com/css/print.css
In your main document, give your .container element for the Skills section a unique id:
<div id="skillsContainer" class="container">
Then in your print CSS, add the following rule:
#skillsContainer {
height: 200px;
}
The reason Skills wasn't showing up was because in the print view, all its children were absolutely positioned, so its height defaulted to zero.
You may also want to tweak the CSS for your column-left, column-right, and column-center classes as well, as in the print view they are a bit taller (at 500px) than they need to be.
Related
Hi everyone
Im a noob and struggle to make the webpage responsive.
Problem:
Im using a grid-area style. I want the columns to stack responsivly over each other as soon the window getting smaller.
In my case less than 975px width.
My code is a mess rn because Im trying different approches atm. So I hope its readable enough.
Screenshots:
Desktop -> works fine
SmallerScreen -> dosen't stack on each other
Here is the github page:
I don't include the code into here, so you can check it in context.
My approach: YOU CAN FIND IT # LINE 70!
from here...
body{
grid-template-areas: "head head"
"main new"
"foot foot"
"attri attri";
}
to here...
#media screen and ( max-width: 975px ) {
body{
grid-template-areas: "head"
"main"
"new"
"foot"
"attri";
}}
Thank you very much for your time and help.
Nima
I finally found out yesterday what my error was.
I did place the #media tag before the class definition.
Always place the media query at really last lines of code so you avoid errors.
I hope this will help future me's who got stuck in the same path.
If your #media query dosen't apply the characteristics of the device ( such as its screen size, resolution, and pixel density etc. ), place it to the bottom of your code.
hf gl
I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
I have a little experience with dabbling in css but I cannot figure this out. I bet there is only one number somewhere thats wrong but I cant find it.
I was wondering if someone could please help
Website: www.maxanthonyphotography.com/portfolio
P.s The website isn't finished yet anyway but my ocd is driving me mad
thank you in advance
Looking at the style.css file you have around line 2120
div {
height: 650px;
(etc)
}
This will mean that all div tags on the page will have a height of 650px (unless you override it with a class or something).
for now try changing that line to height: 100%;
for future reference (depending on the browser) right click on the page and go to inspect element, this will show you what is going on with different elements on the page.
When I use the page break attribute and then look at my page from i.e7 and click print preview, it generates 3 blank pages between the first and second page.
I have copied some sample code here: http://jsfiddle.net/vW54X/embedded/result/
You can't really replicate the error though because its embedded as an iframe
IE7 does funny things with page-break-after:always.
Instead of applying it to your div#cl, create a new, empty p or div and apply it to that. Place that after the #cl, so
<div id-"cl">
//all your content
</div>
<div class="pageBreak"> </div>
Style it with page-break-after: always but hide it until print.
The solution is giving your body a height: auto;
When I had a similar problem, I resolved it by setting the maximum height of each of my <div>s to a very small amount and gradually increasing it until the problem appeared again.
Basically, just this:
.your-container-div {
max-height: 27.4cm;
}