Develop Reference

Prevent to print white empty sheets while printing pdf of a webpage

I used #media query to override css properties of my webpage and create a good-for-me print layout.
But I have a problem: even if what I want to print "stays" entirely inside a single A4 sheet, if I click "print" (no matter if print pdf or normal paper print) it's printed also a white and empty additional sheet.
How to prevent this?
My code:
#media print {
.noPrint{
display: none;
}
section{
display:block;
background-color: white;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin:0;
padding: 1em;
/*settings */
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
a{
display:none;
}
button{
display:none;
}
h1{
font-size: 3vw;
}
}

You could use :
page-break-after: auto;
or :
#media print {
html, body {
height: 99%;
}
}
as mentioned in how to avoid extra blank page at end while printing?
But since I haven't worked with print all that much I can't help anymore than this.

Can't click on browser vertical scrollbar because of a fullscreen fixed bootstrap modal

I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you

In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal

Bootstrap - Get current screen mode

Is it possible to get the current screen mode without having to code a function which works with media queries?
e.g. I have a container-fluid div with class chartContainer.
.chartContainer {
padding-top: 20px;
padding-bottom: 50px;
padding-left: 120px;
padding-right: 120px;
}
But I only need the class chartContainer if the screen size is not xs or sm.
Are there bootstrap methods to find this out, without having to code own functions?
e.g. I would do something like this, which is quick and dirty but should work if the window size changes:
setInterval(function() {
if (BOOTSTRAP_CURRENT_SCREEN_MODE == 'xs' || BOOTSTRAP_CURRENT_SCREEN_MODE == 'sm') {
$(".container-fluid").removeClass("chartContainer");
} else {
$(".container-fluid").addClass("chartContainer");
}
},100);
Is there something like BOOTSTRAP_CURRENT_SCREEN_MODE?
How would I achieve my goal the best way?

Media queries are the easiest way to do this.
/* col-md-* and col-lg-* */
#media (min-width: 992px) {
.chartContainer {
padding-top: 20px;
padding-bottom: 50px;
padding-left: 120px;
padding-right: 120px;
}
}
/* col-xs-* and col-sm-* */
#media (max-width: 991px) {
.chartContainer {
/* some other measurements here */
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
}
<div class="chartContainer">...</div>

if you want to get bootstrap's breakpoints in JS , use this :
var lg = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-lg');
if (window.matchMedia("(min-width: "+lg+")").matches) {
/* do something */
}
repeat that for the other breakpoints and tweak it to your needs,
here's a list of the Availbale variables ( custom properties )
Media queries would be better , you can use it like :
#media (min-width: var(--breakpoint-lg) ) { ...

Responsive Website not working on Tablet version

I have a resposive site which works fine on desktop and mobile version but on Tablet version, text and images are not in appropriate places and move towards right side making it non-responsive.
You can check the link here for screenshot:
https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
This is my website: http://www.sociolife.co.in/
PS: When site is opened at full browser width in desktop, this problem wont occur but when you try to decrease the browser width search bar and subscription box is moving towards right.
Please can you tell me if there is any CSS problem or is there any javascript problem and how can I fix it?

Your meta viewport is wrong. You should use something like this :
<meta name="viewport" content="width=device-width, initial-scale=1">
You can check out this : https://css-tricks.com/snippets/html/responsive-meta-tag/
Edit : I thought you meant your website wouldn't work in tablet / mobile view. Looking at the code, the width for #main-nav and probably the other few elements are still fixed at 1000px in the 'tablet view'. I think there's something wrong in your media queries.
Edit 2 : Based on your CSS, here's some relevant code (I'm taking #main-nav as example, you can check for other affected elements) :
#media only screen and (max-width: 1028px){
#main-nav{
width:1000px;
}
}
#media only screen and (max-width: 725px){
#main-nav{
width:430px;
}
}
Do you see the problem now? You're making the navigation 1000px wide for screen sizes between 726px and 1028px. You should have used width:100% or width:725px for your #main-nav's 'tablet version'. Now you just need to apply the same principle and check for other areas of your website which have the same problem.

Change in your html file:
At line 1195 of your source code change wiz.
#main-nav {
width: 1000px;
}
change it to:
#main-nav {
width: 103%;
}
At line 1201:
.column-right-outer{
width:320px;
float:left;
}
to the below code:
.column-right-outer{
display: none;
}
At line 1204 change this:
.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}
to this:
.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}
edit- 27/04/15
delete the following lines at line 1208:
#menu-main {
display: none;
}
Add the below lines of code in a separate <style></style> tag in your HTML file.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}
Now your site will look much better. :)

This works well.
#media only screen and (min-width: 730px) and (max-width: 1028px){
#menu-main {
margin-top: -10px;
}
#main-nav ul li {
z-index: 20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size: 12px;
position: relative;
display: inline-block;
float: left;
border: 1px solid;
border-width: 0 0 0 1px;
height: 50px;
}
}

Layout with tiles of 2 types

Is there a way to make this kind of layout with pure CSS or CSS + little JS? (click my avatar to enlarge reference image =)
My attempts to use floats and display options haven't succeed. See
http://jsfiddle.net/vdk2wns1/1/
Tiles will be used for images and iframes.
p.s. using external code (like Masonry or Isotope) is not appropriate here.

One approach would be:
#container {
max-width: 860px;
margin: 0 auto;
height: 100%;
height: 100%;
}
.block {
width: 23%;
height: 200px;
background: #ccc;
margin: 10px 1%;
float: left;
outline: 1px solid red;
}
.block:nth-of-type(3) {
clear: left;
}
.block:nth-of-type(5) {
float: right;
width: 48%;
height: 420px;
margin-top: -210px;
}
#media screen and (max-width: 640px) {
.block:nth-of-type(3) {
clear: none;
}
.block:nth-of-type(5) {
float: left;
width: 23%;
height: 200px;
margin-top: 10px;
}
}
Since it appears you wanted to adapt to different screen sizes, I changed the widths to percentages to make it responsive. This Fiddle shows the result.
If you didn't want to float Block 5 right, you could position it absolutely.
I expect that you can adapt the basic ideas to your needs.

Here is how I solve my problem after #bobdye shared his idea.
The final code (jsfiddle) is: Here
The solution appeared in 4 steps:(1). style large block with float: right;(2). clear float of the second small block;(3). set up negative margins for large block while in 3-cloumn layout;(4). make some adjusments to #media queries.
Hope this will help someone else =)