I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can't differentiate between the two as the breakpoint for printing is the same as the breakpoint for mobile (xs)
For example: In the below test html my printed page (or print preview) shows the xs6 columns side by side but the sm6 columns stacked. There isn't a breakpoint between xs and sm.
Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?
Am I doing something wrong or is this the way it is? Is there a defined viewport width for printing?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
xs6
</div>
<div class="col-xs-6">
xs6
</div>
</div>
<div class="row">
<div class="col-sm-6">
sm6
</div>
<div class="col-sm-6">
sm6
</div>
</div>
</div>
</body>
</html>
What I did was to manually recreate those columns classes in my print css.
.col-print-1 {width:8%; float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}
Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.
It still needs some work, but that quick patch helped me a lot.
If you want the Bootstrap's grid do not print with col-xs (mobile settings) , and want to use col-sm-?? instead , Based on Fredy31 answer and you don't even need to define col-print-??. simply rewrite all col-md-?? css class definitions inside a: #media print { /* copy and paste from bootstrap.css*/ } like this:
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
}
The Sass version of Fredy31 solution:
#for $i from 1 through 12 {
.col-print-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
For Bootstrap 4 (using SASS)
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
#for $i from 1 through $grid-columns {
#media print {
.col-print#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
will create
#media print {
.col-print-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; } }
#media print {
.col-print-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; } }
#media print {
.col-print-3 {
flex: 0 0 25%;
max-width: 25%; } }
#media print {
.col-print-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; } }
#media print {
.col-print-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; } }
#media print {
.col-print-6 {
flex: 0 0 50%;
max-width: 50%; } }
#media print {
.col-print-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; } }
#media print {
.col-print-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; } }
#media print {
.col-print-9 {
flex: 0 0 75%;
max-width: 75%; } }
#media print {
.col-print-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; } }
#media print {
.col-print-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; } }
#media print {
.col-print-12 {
flex: 0 0 100%;
max-width: 100%; } }
Your switch styles like this
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
See
#grid-example-mixed or #grid-example-mixed-complete
and may you need to clearfix
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
#grid-responsive-resets
Edit: 04/2019
Since Bootstrap 4.x there are new classes that can be used to set the display behavior when printing. SEE 4.3 Docs
I had a similar problem, for me the easiest solution was to manually modify the width for elements I wanted to appear differently when printed (and I added a specific class -in my case: title-container, details-container for those, along the col-xs-6 etc.).
For example:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
Some stuff
</div>
<div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
Some more stuff
</div>
</div>
</div>
</div>
#media print {
.title-container {
width: 360px;
float: left;
}
.details-container {
width: 300px;
float: right;
}
}
In my case I needed a column to be floated on the right, one to the left, thus the floats...
You could set in your custom css the width also for .col-xs-6 etc. just a quick and dirty solution, but did the job for a page where I needed this...
Instead of recreating with new column names like .col-print-1 , .col-print-2 , write a media query which will be enable while printing the document.
#media print {
.col-md-1,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,
.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
float: left;
}
.col-md-1 {
width: 8%;
}
.col-md-2 {
width: 16%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 42%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58%;
}
.col-md-8 {
width: 66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83%;
}
.col-md-11 {
width: 92%;
}
.col-md-12 {
width: 100%;
}
}
So by this way we can be able to apply print css styles directly without changing the column names.
The following works great to create grid elements specific for print media. Using Bootstrap 3.
#media print {
.make-grid(print);
}
Then you can use all the grid col elements with the print keyword. Ex: col-print-6 col-print-offset-2, etc.
Maybe you could use Bootstrap 2. If you are familiar with Bootstrap 2, then you can use it as an alternative, as this offers non responsive CSS. Bootstrap 2 was not mobile first, you had to add an extra style sheet to make your web pages responsive.
Or you can add clearfixes for the mobile part. See http://getbootstrap.com/css/#grid-responsive-resets
And the SASS version of Ehsan Abidi's answer using MiCc83's answer:
#for $i from 1 through 12 {
.col-sm-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
I prefer this because I always spec the "sm" size and that most closely approximates a print page in my applications. Then I only need to add something specifically for print when I've got an outlier condition.
If you only have 2 columns, you can try it. I fixed it with the code below.
<div class="row">
<div class="w-50 p-3 float-left">
</div>
<div class="w-50 p-3 float-right">
</div>
</div>
If it's just one line of text in two columns you can use the accepted answer here.
For Bootstrap 4 sass here are some snippets that I applied across several projects. These are making adjustments on:
Grid (follows the LG breakpoint)
Spacers (rewrite all below LG margins/paddings)
Buttons (since background-colors does not work in print preview, switch filled buttons to outline)
Display (rewrite all below LG displays)
Text alignments (rewrite all below LG breakpoint)
#media print {
$grid-breakpoints-print: (lg: 992px); // keep breakpoint that you would like to apply for print
/* Rewrite margins, padding, display & alignment to keep the LG and not the mobile ones */
#each $breakpoint in map-keys($grid-breakpoints-print) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints-print);
// rewrite all displays for your print breakpoint
#each $value in $displays {
.d#{$infix}-#{$value} {
display: $value !important;
#each $v in $displays {
&.d-#{$v} {
display: $value !important;
&.d-print-none,
&.table__sort {
display: none !important;
}
}
}
&.d-print-none {
display: none !important;
}
}
}
// rewrite all spacings for your print breakpoint
#each $prop, $abbrev in (margin: m, padding: p) {
#each $size, $length in $spacers {
.#{$abbrev}#{$infix}-#{$size} {
#{$prop}: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}-#{$s},
&.#{$abbrev}-auto {
#{$prop}: $length !important;
}
}
}
.#{$abbrev}t#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-top: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}t-#{$s},
&.#{$abbrev}y-#{$s},
&.#{$abbrev}t-auto,
&.#{$abbrev}y-auto {
#{$prop}-top: $length !important;
}
}
}
.#{$abbrev}r#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-right: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}r-#{$s},
&.#{$abbrev}x-#{$s},
&.#{$abbrev}r-auto,
&.#{$abbrev}x-auto {
#{$prop}-right: $length !important;
}
}
}
.#{$abbrev}b#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-bottom: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}b-#{$s},
&.#{$abbrev}y-#{$s},
&.#{$abbrev}b-auto,
&.#{$abbrev}y-auto {
#{$prop}-bottom: $length !important;
}
}
}
.#{$abbrev}l#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-left: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}l-#{$s},
&.#{$abbrev}x-#{$s},
&.#{$abbrev}l-auto,
&.#{$abbrev}x-auto {
#{$prop}-left: $length !important;
}
}
}
}
}
// rewrite all text alignments for your print breakpoint
.text#{$infix}-left {
text-align: left !important;
&.text-left,
&.text-right,
&.text-center {
text-align: left !important;
}
}
.text#{$infix}-right {
text-align: right !important;
&.text-left,
&.text-right,
&.text-center {
text-align: right !important;
}
}
.text#{$infix}-center {
text-align: center !important;
&.text-left,
&.text-right,
&.text-center {
text-align: center !important;
}
}
}
/* Rewrite grid to keep the LG and discard the mobile */
#for $i from 1 through 12 {
.col-lg-#{$i} {
flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
max-width: #{percentage(round($i*8.33)/100)} !important;
#for $k from 1 through 12 {
&.col-xs-#{$k},
&.col-sm-#{$k},
&.col-md-#{$k},
&.col-#{$k} {
flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
max-width: #{percentage(round($i*8.33)/100)} !important;
}
}
}
}
/* Since the print will not fill background-colors you need to transform filled buttons into outline */
#each $color, $value in $theme-colors {
.btn-#{$color} {
color: $value !important;
background-color: $white !important;
}
}
}
Here is a working Fiddle. Keep in mind that only #media print { ... } matters in the fiddle example. Variables from the beginning where copied to have a working fiddle.
Based on Fredy31's answer using Bootstrap's exact widths and removing repetition of float left.
[class^="col-print"] {float:left;}
.col-print-1 {width:8.33333333%;}
.col-print-2 {width:16.66666667%;}
.col-print-3 {width:25%;}
.col-print-4 {width:33.33333333%;}
.col-print-5 {width:41.66666667%;}
.col-print-6 {width:50%;}
.col-print-7 {width:58.33333333%;}
.col-print-8 {width:66.66666667%;}
.col-print-9 {width:75%;}
.col-print-10{width:83.33333333%;}
.col-print-11{width:91.66666667;}
.col-print-12{width:100%;}
Related
Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, creating a stacking effect. What is happening, though, is the text is overlapping.
The html mark up is like so:
<div class="container__row">
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<h1>Another section</h1>
</div>
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Design
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
GIS
</div>
</div>
</div>
<div class="container__row">
This is the Sass .scss code that makes up the css styling:
//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query for each breakpoint
#mixin create-mq($breakpoint) {
#if($breakpoint == 0) {
#content;
} #else {
#media screen and (min-width: $breakpoint *1px) {
#content;
}
}
}
#mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
#include create-mq($breakpoint) {
//class to set up columns for all screen sizes - mobile first
#for $i from 1 through $grid__cols {
&__col#{$modifier}-#{$i} {
flex-basis: (100 / ($grid__cols / $i)) * 1%;
}
}
}
}
.container {
max-width: $grid__bp-md * 1px;
margin: 0 auto;
//attribute to override max width
&--fluid {
margin: 0;
max-width: 100%;
}
//attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
&__row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
#each $modifier, $breakpoint in $map-grid-props {
#include create-col-classes($modifier, $grid__cols, $breakpoint);
}
}
p {
font-size: .85em;
color: #aaa;
}
}
.skills-bar {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
There is this strange overlap that happens. Can anyone suggest why the vertical text won't make rows?
If you look in the inspector, you can see that the original height of the container isn't being effected by the transform and that's why this is happening. I can't think of a way around it without measuring the new height after the transform with js.
I'm not sure what browsers you need to support, but text-orientation / writing-mode will do, mostly, what you need without js.
.skills-bar {
writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support
text-orientation: upright;
float: left;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
In order to measure the divs after the css transform, I used getBoundingClientRect().
With a few lines of jquery, I got what I needed:
$(document).ready(function(){
var skills = $(".skills-bar")
$.each(skills, function(i, div) {
console.log(div);
var dimensions = div.getBoundingClientRect();
console.log(dimensions);
$(this).css("width", dimensions.width).css("height", dimensions.height);
});
});
can anyone help me? It seems that the specific font size for small devices (max 320px) is not working. Can anybody help? I also included the HTML & CSS.
My code:
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
<div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
Random Text
</div>
</div>
This is because the font size defined inline on the HTML will take precedence over the one defined in the stylesheet. Please move all your styles to the stylesheet.
You should move your inline styles out of the HTML and into the CSS.
#titleHome {
font-size: 1.8vw;
float: left;
margin-left: 4.5%;
color: #000;
}
#titleHome2 {
font-size: 1.1vw;
float: left;
margin-top: 4.8%;
color: #000
}
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome">Random text<br/> & random text</div>
<div id="titleHome2">
Random Text
</div>
</div>
Try to add !important to the end of the font size
#media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}
<div class="home-caption">
<div id = "titleHome" class="titleHome">Random text<br/> & random text</div>
<div id = "titleHome2" class="titleHome2">Random Text</div>
</div>
Css
.titleHome {
font-size:1.8vw;
margin-left:4.5%;
}
.titleHome2 {
font-size:1.1vw;
margin-top: 4.8%;
}
.titleHome, .titleHome2 {
color:#FFFFFF"
float:left;
#media all and (max-width: 320px){
font-size: 4vw;
}
}
Hope this helps
I am trying to print the HTML page which contains a div with lots of content inside it. The HTML of the page is as follows:
<div class="outer">
<div class="inner">
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
...............
...............
</div>
</div>
The print media css is as follows:
#media print{
.outer{
display:inline;
overflow:visible;
}
}
But when I open the print preview of this page, the div content is missing. Print preview displays some content from start of div, then blank (about two pages) and some end content of div.
It should be work if you go with following way:
<!DOCTYPE html>
<html>
<head>
<style>
#media screen {
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}
#media print {
.inner {
font-family: georgia, serif;
font-size: 20px;
color: red;
}
}
</style>
</head>
<body>
<h2>The #media Rule</h2>
<div class="inner"><b>Test it!</b> Print this page (or open Print Preview), and you will see that the text will be displayed in blue, and in another smaller font.</div>
</body>
</html>
I take w3school.com #media-print example and change according to your requirement it showing font changes and apply css while try to print.
Thanks.
This is my code, it works fine to me.
I want to print with css #media the "Invoice" class.
"No-print" class will be disabled.
HTML
<div class="pad margin no-print" style="overflow:hidden;margin-top:20px">
<div id="divControl" class="col-lg-6 col-md-6" style="margin-top:10px"></div>
</div>
<div class="content invoice">
<div class="col-sm-4 invoice-col">
<address>Dirección:</address>
</div>
<div>
CSS
AT THE TOP OF CSS:
/* Don't display when printing */
#media print {
.no-print {
display: none;
}
.left-side,
.header,
.content-header {
display: none;
}
.right-side {
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#page { /* with this margin, no extra blank page to me */
margin: 0mm auto; /* this affects the margin in the printer settings */
}
}
AT THE BOTTOM OF CSS:
/* Enhancement for printing */
#media print {
.invoice {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
.invoice-col {
float: left;
width: 33.3333333%;
}
.table-responsive {
overflow: auto;
}
.table-responsive > .table tr th,
.table-responsive > .table tr td {
white-space: normal!important;
}
}
I'm trying to define a section of HTML that will not be displayed if the
media type is "print" instead of "screen".
I've tried:
{code}
<html>
<head>
<style type="text/css">
#media print
{ .not_print: { hidden: true; }
}
#media screen
{ .not_print: { hidden: false; }
}
</style>
</head>
<body>
<span class="not_print">
<p>This should not be displayed if printed / print previewed.</p>
</span>
</body>
</html>
but the section is not hidden if the page is printed / print-previewed by Firefox (36.0,Linux x86_64).
Any ideas ? Anyone managed to define HTML sections that won't be printed?
Thanks in advance for any replies.
I think you are searching for something like the following:
Only shown when printed:
#media print {
div {
display: block;
}
}
#media screen {
div {
display: none;
}
}
Or only shown on a screen:
#media print {
div {
display: none;
}
}
#media screen {
div {
display: block;
}
}
I should mention I was trying to define a CLASS of section that would not be printed, not ALL "div" elements, so I ended up using:
I should mention I was trying to define a CLASS of section that would not be printed, not ALL "div" elements, so I ended up using:
#media print
{ .no_print { display: none; }
}
#media screen
{ .no_print { display: block; }
}
...
<div class="no_print">
this section will not be printed ...
</div>
I'm trying to display responsive Google Ads on my website. The box that includes Google Ads' code is responsive as well and it transforms itself to different sizes based on Google's Ad unit sizes.
So for different screen sizes, I show fitting ad sizes from that page, like so (Complete LESS for the ad space):
.ads {
width: 733px;
height: 116px;
margin: 70px 0 0 30px;
border: 2px solid #dry-red;
background-color: white;
padding: 0;
border-radius: 4px;
margin-right: 15px;
float: right;
.headline {
background-color: #dry-red;
width: 100%;
font-size: .8em;
padding: 2.5px 0 2.5px 4px;
color: white;
margin: 0;
border-bottom: 1px solid #dry-red-xl;
}
#media (max-width: 1200px){
width: 468px;
height: 86px;
}
#media (max-width: 992px){
width: 323px;
height: 126px;
}
#media (max-width: 768px){
width: 468px;
height: 61px;
margin: 50px 20px;
float: none;
}
#media (max-width: 766px){
margin: 5px auto 5px auto;
}
#media (max-width: 470px){
/* display: none; */
width: 323px;
height: 126px;
}
}
So far so good. The box transforms when it reaches its peak. Note that the original ad sizes from Google were increased for about 26px+ in order to fit along with .headline.
So now, I've placed Google Ads unit's code in the HTML like this:
<section class="ads col-lg-8 col-md-7 col-sm-7">
<div class="headline">Advertisement</div>
<!-- IMGzer_Header -->
<style type="text/css">
.adslot_1 { width: 728px; height: 90px; }
#media (max-width:470px) { .adslot_1 { width: 320px; height: 100px; } }
#media (max-width:768px) { .adslot_1 { width: 468px; height: 60px; } }
#media (max-width:992px) { .adslot_1 { width: 320px; height: 100px; } }
#media (max-width:1200px) { .adslot_1 { width: 468px; height: 60px; } }
</style>
<ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="SOME_NUMBER" data-ad-slot="SOME_NUMBER"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
As you might notice, I've tried using two variants:
Using CSS3 media queries (which are commented)
And using the data-ad-format="horizontal" data attribute.
I've read about these two in this Google Ads article.
None of these actually worked and my ad size remained 728x90px. My ads from Google simply wont resize to their respective size when the browser screen is smaller.
Ideas and help would be appreciated.
My actual website having this problem
Update
So I've played around and still achieved nothing. I tried to get closer to Google's examples and use min-width in the media queries instead of max-width. No results. I'm still getting the 728x90 sizes even though it's not included anywhere else except the min-width: 1200px media query and it still refuses to resize. This is really irritating.
<section class="ads col-lg-8 col-md-7 col-sm-7">
<div class="headline">Advertisement</div>
<style>
.adslot_1 { width: 320px; height: 100px; }
#media (min-width: 768px) { .adslot_1 { width: 468px; height: 60px; } }
#media (min-width: 992px) { .adslot_1 { width: 320px; height: 100px; } }
#media (min-width: 1200px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- IMGzer_Header -->
<ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="ca-pub-1234" data-ad-slot="XXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
<div class="clearfix"></div>
The CSS/LESS for .ads is still the same as above. The thing that I've noticed is that when I check my code via Firebug, I see this line:
<ins data-ad-slot="XXXXX" data-ad-client="ca-pub-1234" style="display: inline-block; width: 728px; height: 90px;" class="adsbygoogle adslot_1" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent" id="aswift_0_anchor"><iframe width="728" scrolling="no" height="90" frameborder="0" style="left:0;position:absolute;top:0;" name="aswift_0" id="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe></ins></ins></ins>
Where did this code get the width and height? The width is 728 and the height is 90. It's like they're fixed there somehow and they are ignoring my media queries totally. I'm absolutely certain that I choose Responsive unit in the AdSense settings.
What is it that I'm not seeing?
the class (.) is less than the ID(#) (terms of styles).
google ads have their own styles written in JS.
<div class="least" id="medium"></div>
<style type="text/css">
.least{
width:100px;
height:100px;
background-color:red;
}
#medium{
width:200px;
height:200px;
background-color:green;
}
</style>
the best way to handle styles google ads
<div id="google-ads-1"></div>
//Calculate the width of available ad space:
<script type="text/javascript">
ad = document.getElementById('google-ads-1');
if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width; // for modern browsers
} else {
adWidth = ad.offsetWidth; // for old IE
}
/* Replace ca-pub-XXX with your AdSense Publisher ID */
google_ad_client = "ca-pub-XXX";
/* Replace 1234567890 with the AdSense Ad Slot ID */
google_ad_slot = "1234567890";
/* Do not change anything after this line */
if ( adWidth >= 728 )
google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
else if ( adWidth >= 468 )
google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
else if ( adWidth >= 336 )
google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
else if ( adWidth >= 300 )
google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
else if ( adWidth >= 250 )
google_ad_size = ["250", "250"]; /* Square (250 x 250) */
else if ( adWidth >= 200 )
google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
else if ( adWidth >= 180 )
google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
else
google_ad_size = ["125", "125"]; /* Button (125 x 125) */
document.write (
'<ins class="adsbygoogle" style="display:inline-block;width:'
+ google_ad_size[0] + 'px;height:'
+ google_ad_size[1] + 'px" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ google_ad_slot + '"></ins>'
);
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
see documentation easy.