when I visit this page on Chrome:
https://www.rubyrange.com/shop/adventure-tours/adventure-van-tours/from-the-rockies-to-alaska-go-wild-calgary-whitehorse/
I can print 6 pages. When I visit this page on Firefox I can print 3 pages and it seems that pages 3,4,5 are missing.
Anybody has an idea what is wrong in the print css here?
/* Print Style Sheet */
#media print {
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
#page {
/*size: auto;
margin: 0;*/
}
body {
/*margin: 10mm;*/
}
.site-inner {
position: relative;
top: 0;
}
.header-image .wrap > a {
top: 0;
}
.related.products,
.top-bar,
.header-bar-wrapper,
.nav-primary,
.ruby-booking-wrapper,
.envira-gallery-position-overlay,
.tours-legend,
.tours-media-headline--gallery,
.envira-gallery-wrap {
display: none;
}
a[href]:after {
display: none;
visibility: hidden;
}
.product .entry-summary {
display:flex;
flex-direction: column-reverse;
font-size: 1.3rem;
}
.tours-summary-wrapper {
width: 100%;
float: none;
}
.tours-teaser-wrapper {
width: 100%;
float: none;
padding-left: 0;
}
.tours-media-wrapper {
display: none;
}
.woocommerce-Tabs-panel {
display: block !important;
}
.tours-available-dates {
width: 100%;
}
.single-product .ruby-print-box {
display: none;
}
}
Related
I'm not sure why the follow CSS code isn't doing anything, it was working I did some changes it was a good bit I don't really call all what I changed, but then now its just staying on what's supposed to be the mobile version. I also tried adding "screen" and "all", nothing.
Running it in updated Google Chrome and also tried Edge.
/*
MEDIA QUERIES
*/
#media (min-width: 615px) {
header h1 {
transform: scale(1,1);
text-align: left;
padding-left: 5%;
}
.main-container img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.mobileRef {
display:none;
}
nav a {
font-size: 18px;
}
nav li {
padding: 0 1.5%;
}
nav {
text-align: right;
}
header p {
display: inline-block;
float: right;
font-size: 1.3vw;
margin: 12px 5% 0 0;
}
.break {
display: none;
}
)
Change your end bracket on your query. Should be }, not )
#media (min-width: 615px) {
.class
{
.myclass:value;
}
}
I have this file with my styles for print a pdf:
#media print {
::-webkit-scrollbar {
display: none;
}
body {
background-color: white !important;
overflow-y: hidden !important;
}
.main.container {
background-color: #ffffff !important;
> .menu {
display: none;
}
> .container {
overflow-y: visible !important;
}
> .content {
overflow: visible !important;
}
}
}
.unbreakable {
display:inline;
width: 100%;
background-color: lightgreen;
}
.unbreakable:after {
content: '';
display:block;
height:0;
visibility: hidden;
}
.board-print {
background-color: #FFFFFF !important;
padding: 15px;
overflow: visible !important;
font-family: #font-family;
.board-header {
font-weight: normal;
}
.board-body {
height: auto !important;
background-color: #FFFFFF;
width: 100%;
.table-wrapper {
background-color: lightcyan;
width: 100%;
}
.widget-print {
height: auto !important;
margin-bottom: 30px !important;
}
.widget-header {
font-family: #font-family;
margin-bottom: 5px;
font-weight: 300;
font-size: 1.28rem;
color: #4D4D4D;
}
.reactive-table {
page-break-after: auto !important;
overflow: visible !important;
height: auto !important;
table {
th, td{
font-weight: normal;
font-family: #font-family;
}
.table-up-icon, .table-down-icon, .filter.padded.icon {
display: none;
}
}
}
.note-widget .mce-container{
border: none !important;
}
.ruler {
display: none;
}
.chart {
width: 95%;
height: 450px;
}
}
}
the .unbreakable I use it for print only charts and works fine but when I added .table-wrapper for print tables all is broken.
this is my jade:
template(name="widgetsShowPrint")
.widget-print
+if isConfigured
+if isChart
.unbreakable
h3.widget-header #{title}
+UI.dynamic template=type data=widgetData
+else
table.table-wrapper
tbody
tr
td
h3.widget-header #{title}
+UI.dynamic template=type data=widgetData
there I have a conditional for uses .unbreakable or the table wrapper.
I tried to print a PDF the size of the page is A4 but it doesn't work. Someone could help me, I am not expert in CSS.
I attached a image with the result.
This should work :
#media print {
.unbreakable {
page-break-inside: avoid;
}
}
Check the browser compatibility
the solution was:
template(name="widgetsShowPrint")
.widget-print
+if isConfigured
table.table-wrapper
tbody: tr: td(class="{{type}}-container")
h3.widget-header #{title}
+UI.dynamic template=type data=widgetData
I added a type td(class="{{type}}-container")
and in less file I added the size for any td:
.board-body {
height: auto !important;
background-color: #FFFFFF;
width: 100%;
.table-wrapper {
width: 100%;
td.chart-container {
height: #mid-page-size;
}
}
and I solve my problem.
Fiddle.
This is literally the 'Off Canvas Reveal' demo from Jasny located here. All I did was extend the page content so that it needed a scrollbar.
After clicking the hamburger menu, the page contents become frozen/unscrollable. How do I fix this behavior? I want to be able to continue scrolling the page while the menu is out.
CSS:
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
#media (min-width: 0) {
.navbar-toggle {
display: block; /* force showing the toggle */
}
}
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
You just need to add
html,
body{
overflow-y:scroll!important;
}
By default jasney adds overflow:hidden; to the body
Jsfiddle http://jsfiddle.net/z3wfct19/1/
I have a simple website that I am making for my music over at (secure tunnel) http://79a6b00f.ngrok.io using media queries and everything, with the meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">)in the header on index.html.
I have had someone test it on their phone, and the website zooms out, instead of maintaining scale and showing a hamburger menu. Here's my query code:
#media all and (max-width: 2600px) {
.w-ctrl {
width: 950px;
margin: auto;
}
}
#media all and (max-width: 966px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.sub-header {
width: 100%;
background: #37474F;
height: 500px
}
.lnd-con .pic {
height: 500px;
background-attachment: scroll;
}
.lnd-con .label-con {
top: -350px;
text-align: center;
}
.label-con .title {
font-size: 25px;
}
.label-con .subtitle {
font-size: 25px;
}
}
#media all and (max-width: 636px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.nav-con-big {
display: none;
}
.nav-con-small {
display: block;
}
.lnd-con .pic {
height: 300px;
}
.title-con {
display: none;
}
.lnd-con {
margin-top: 0px;
}
.lnd-con .label-con {
position: static;
text-align: left;
background: transparent;
padding-top: 5px;
padding-bottom: 8px;
letter-spacing: 0px;
}
.label-con .title {
font-size: 20px;
}
.label-con .subtitle {
font-size: 18px;
}
.sub-header {
width: 100%;
height: 400px
}
}
I could not fit my website into a js-fiddle, so I created a tunnel instead. I hope it's okay, as far as I am aware I'm not breaking any rules.
I see this declaration at the top of your global.css:
#viewport {
zoom: 1.0;
width: extend-to-zoom;
}
take it out or set width: device-width;:
#viewport {
width: device-width;
}
also, support for css device adaptation is pretty poor (http://caniuse.com/#search=%40viewport), possibly it is somehow conflicting with the meta tag implementation
You have to show us what meta viewport tag your using for #1. There are many.
But also; if you'd like to see the changes within your browser you can always write the media queries as between 2 widths as below:
/* SAMPLE No greater than 900px, no less than 400px */
#media (max-width:900px) and (min-width:400px) {
.CurrentlyOnVacation {
display:none;
}
}
My website uses a Foundation Front-end framework for my website, so it's a responsive design for mobile devices.
I have an issue, with how the data is displayed on my website when used on a mobile.
I would like the sidebar widget contents on my website to display above the items (health clubs) on the mobile version of the website. See my sidebar widget has a filter section, So I really need that displayed before the (health clubs).
Question: What do I need to change to display the sidebar widget on top? Apologises I'm ok at CSS but this is pretty advanced for my skill level.
Here is the website: (PC version)
http://s10.postimg.org/cl1n43w95/website.png
Here is how the website is displayed on the mobile. Note How my items are all above the sidebar. I'd like the sidebar widget above the items:
http://s27.postimg.org/8adw402gz/screenshot2_sidebarunder_items.png
Here is the foundation code I believe I need to change:
/* #Foundation Style
================================================== */
.row .column, .row .columns{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container{ margin: 0px auto; max-width: 960px; padding: 0px 20px; }
.container.wrapper{ margin: 0px auto; max-width: 1000px; padding: 0px; }
.row { width: 1140px; max-width: 100%; min-width: 727px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }
.column, .columns { float: left; min-height: 1px; padding: 0 10px; position: relative; margin-bottom: -12px; }
.row .one { width: 8.333%; }
.row .two { width: 16.667%; }
.row .three { width: 25%; }
.row .four { width: 33.333%; }
.row .five { width: 41.667%; }
.row .six { width: 50%; }
.row .seven { width: 58.333%; }
.row .eight { width: 66.667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.333%; }
.row .eleven { width: 91.667%; }
.row .twelve { width: 100%; }
.row .one-fifth{ width: 20%; }
.row .one-sixth{ width: 16.667; }
img{ max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
object, embed { max-width: 100%; }
/* #Foundation Mobile Size
================================================== */
#media only screen and (max-width: 767px) {
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;
width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.container{ margin: 0px auto; max-width: 420px; }
.container.wrapper{ margin: 0px auto; max-width: 460px; padding: 0px; }
.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.row .column, .row .columns { width: 100%; float: none; }
.column:last-child, .columns:last-child { float: none; }
[class*="column"] + [class*="column"]:last-child { float: none; }
.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
.column:after, .columns:after { clear: both; }
}
/* #Custom Style
================================================== */
/*--- header area ---*/
.header-wrapper .responsive-menu-wrapper{ display: none; }
/* #Custom Mobile size
================================================== */
#media only screen and (max-width: 767px) {
/*--- header area ---*/
.header-wrapper .logo-wrapper{ float: none; }
.header-wrapper .navigation-wrapper{ display: none; }
.header-wrapper .responsive-menu-wrapper{ display: block; }
.header-wrapper .top-search-form{ display: none; }
div.logo-right-text{ float: none !important; text-align: center !important;
padding-top: 0px !important; padding-bottom: 20px; }
div.feedback-wrapper{ display: none; }
div.top-navigation-left, div.top-navigation-right{ text-align: center; float: none; }
div.social-wrapper { float: none; display: inline-block; margin-top: 5px; }
/*--- single page ---*/
div.single-portfolio .port-media-wrapper { max-width: 100%; width: 100%; float: none; margin-bottom: 20px; }
div.single-portfolio .port-content-wrapper { overflow: visible; }
div.single-portfolio .port-nav .port-prev-nav, div.single-portfolio .port-nav .port-next- nav { margin-bottom: 15px; }
/*--- page item ---*/
div.gdl-blog-medium .blog-media-wrapper { margin-right: 0px; width: 100%; }
div.gdl-blog-medium .blog-context-wrapper { overflow: visible; }
div.price-item{ margin-bottom: 20px; }
div.column-service-row{ border-left-width: 0px; }
/*--- shortcode ---*/
.shortcode1-4, .shortcode1-4.last,
.shortcode1-3, .shortcode1-3.last,
.shortcode1-2, .shortcode1-2.last,
.shortcode2-3, .shortcode2-3.last,
.shortcode3-4, .shortcode3-4.last,
.shortcode1-5, .shortcode1-5.last,
.shortcode2-5, .shortcode2-5.last,
.shortcode3-5, .shortcode3-5.last,
.shortcode4-5, .shortcode4-5.last{ width: 100%; }
/*--- slider ---*/
.flex-caption{ display: none !important; }
.nivo-caption{ display: none !important; }
.anythingSlider{ display: none !important; }
/*--- footer ---*/
div.copyright-left, div.copyright-right{ float: none; text-align: center; }
}
Thanks Guys, Sorry if i'm not very clear.
With the foundation grid you can change the order of columns, which is probably what you are looking for.
http://foundation.zurb.com/docs/components/grid.html
Look for "Source Ordering"
That should guide you on the right path. Otherwise it would be helpful if you post the relevant markup.
second attempt
If you look at the source of your second page http://goo.gl/ijZ1JF you find three elements:
<div class="row single page"> ...
<div class="eight column columnopaddingright"> ...
<div class="four column columnopaddingleft"> ...
Do you get the desired result if you modify them for testing purpose like this?
<div class="row single page" style="display: table;">
<div class="eight column columnopaddingright" style="display: table-footer-group;">
<div class="four column columnopaddingleft" style="display: table-header-group;">