The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
Related
I am making some changes to a CSS template which was written by other developers. There is a place where a certain block gets duplicated. The first version is hidden for the wide-screen display and vice-versa.
I am not sure why it was not possible to utilize just one to do both, but apparently it is somewhat of a common practice. Perhaps it is because this hidden section is displayed as a narrow wide column (using Bootstrap 4) on the right-hand side of the screen, whereas in the mobile version it is displayed above the content in the wide column. But I digress ... Perhaps someone could comment on this bit.
The actual question is as follows.
Suppose we have a class
#media (min-width: 768px)
.d-md-none {
display: none!important;
}
What I would like to do is to display it for the print because it is easier to style it rather than the instance of the same block that is meant for the wide screen. So, in the print media styles, I attempt to do something like this
.d-md-none {
display: block important!;
}
However, I do not see it displayed. What is a prudent course of action here?
Add your print styles at the end of your existing CSS within a rule like so:
#media print {
...
}
Also as mentioned by other commenters, you have a typo in your !important declaration (the exclamation goes before the word important).
I am designing welcome page for a local non-profit. I am trying my first responsive site, so its kind of a hodge-podge of code. Here's a link to the tutorial I was following to make this happen. I have a hunch that the problem is solely within the CSS. The tutorial has me include a reset.css file to reset all HTML styles.
The problem I'm having is that 1) images and text won't scale using #media and images seem to duplicate in various sizes when viewing on ios. 2) The #font-face and text elements don't work when I combine all CSS into one external style sheet. 3) The h1 text is cut off when viewed in Chrome. 4) The Submit button defaults to the browser default on smaller sizes.
Here is the site: http://www.dubuquedreamcenter.com/
Thank you very much. I appreciate any help I can get to learn this better.
1) images and text won't scale with #media queries
To scale images, put them in container <div>'s with a percentage width. Then set max-width: 100% on the images.
Unfortunately it's not possible to scale text with media queries. You have to manually adjust the font-size at each breakpoint.
...images seem to duplicate in various sizes when viewing on ios
You're loading your logo in the HTML but then also as a background image at smaller viewports. Hide the HTML version in the media queries:
#media (max-width: 783px) {
#logo img {
display: none;
}
}
2) The #font-face and text elements don't work when I combine all CSS
into one external style sheet
Seems to work fine for me when I add the #font-face rules to the top of your main stylesheet.
3) The h1 text is cut off when viewed in Chrome
The <h1> text appears fine to me in Chrome 29.
4) The Submit button defaults to the browser default on smaller sizes.
I'm not seeing that either, but most likely you don't have the custom button styles set in all of your media queries.
In addition to the suggestions from cantera25, in the head of your page your have:
...
<title>Dubuque Dream Center</title>
<link rel="stylesheet" type="text/css" href="scripts/ddc_styles2.css">
<link rel="stylesheet" type="text/css" href="scripts/reset.css">
....
Start by reversing this order, you always call the reset.css script first.
Once you do that there's no reason why you couldn't put the css styles you have in the head of the page into ddc_styles2.css
I am currently working on a highly design orientated site based on wordpress CMS.
Currently I have a responsive main stylesheet linked externally for the core css. As the site relies heavily on spacing and alignments of both text and images it has become necessary to add inline css using style= HTML to sometimes override the external CSS.
The problem I have is that in most cases certain elements such as margins need to be a different percentage in the mobile view than the desktop view to balance the visual composition. Is there any way to add responsiveness to the inline CSS based on screen width as can be done in an external style sheet?
So far the only way I can think of achieving this is through jQuery amending the external CSS based on the users screen width however this would mean setting up strict rules in the JS eg: for desktop view having margins set at 70% and for mobile setting them to 90%.
If it could be possible to do this inline using html style then this would give my client stricter control and more flexibility. Luckily my client is well versed in CSS.
You could always add a block of css inline with a style element:
<style type="text/css">
#media screen and (min-width:800px) {
.inlineOverride {
/* add more styles here */
}
}
</style>
<div class="inlineOverride">
</div>
It's worth mentioning that HTML5 has introduced a scoped attribute that you can set on the style element to limit the specified style information to the style element's parent element, and that element's descendants.
It isn't widely supported yet, so shouldn't be relied on, but it could be useful in the long term to help prevent inline styles like this from "leaking" into other parts of the document.
This question/answer might be helpful for you(read it thoroughly)
use #media for adjusting your properties of css according to device width-height.
What does #media screen and (max-width: 1024px) mean in CSS?
In modern Browsers you can (kind of) archive this by using custom css properties (css variables):
#media (max-width: 1100px) {
* {
color: var(--color-sm)
}
}
<a style="--color-sm: #11f">Text</a>
(Expand Snippet or open in full page to get the other behavior)
(Color is used for simplicity of presentation, just use margin or any other css property according to your use case.)
I am wondering if CSS can be 'heavy', e.g. use a lot of parsing time from a browser.
For example I use a CSS sheet with a lot of specific selectors, like
:last-child,
:nth-child(n)
table.sortable thead tr th:not(.table-th-nosort):hover
etc. Can that noticably influence performance?
Same for using media-queries. I want to make a site accessible for mobile devices using CSS3 media queries:
#media screen and (max-width: 600px) {
#sidebar {
display: none;
// etc
}
}
For now I have about 600 lines of CSS (not minified) in my main file, and for some specific pages include extra CSS files (between 10-300 lines).
Using media queries would add substantially to that I expect. Will that have an effect on performance?
The easiest way to check is to grab a webkit nightly, or Chrome Canary, then check out the new audit for CSS performance. It lets you see how long each selector takes to run, as well as the % of overall time taken. The new builds of Opera also have a similar tool.
Here's a small screenshot of what it looks like:
I'm trying to figure out how to use the lessframework for building a 2 - 3 column grid, but how to get started?
In the CSS code it says:
13-column layout
60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)
On http://lessframework.com/ it says 8 cols for older browsers and 13 for desktops... so do I add the column grid inside the #media only screen and (min-width: 1212px) media query (or add it to a different css file).
I've tried to find some examples but haven't found anything valuable yet.
UPDATE:
After having read the answer from David Oliver I will try to answer question:
320: 1 col
480: 1 col
768: 2 col
1280: 3 col
I hope this answers the question.
From my look at the framework, I believe the idea would be to insert your own column CSS based on the numbers provided in the CSS comments into the relevant media queried sections of the CSS file. Unlike some other CSS column frameworks, you don't apply predefined class names to divs, but, rather, insert your own selectors into the starting CSS file as necessary.
However, as mentioned, this approach doesn't work for mobile devices that aren't capable of dealing with media queries as the default assumes a viewport width of 768px or greater. I believe this approach is better: Rethinking the Mobile Web. Also see Notes on designing for mobile phones (even if they’re not made by Apple)
So you could do something like:
// Stylesheet to set base styles for all browsers - mobile-friendly:
<link rel="stylesheet" type="text/css" href="css/base.css" />
// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" />
// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" />
In base.css you wouldn't define columns and leave everything to flow naturally.
In desktop.css, for the three areas of content you could have something like:
div#wrapper { width: 94%; margin: 0 auto; }
div#nav { width: 30%; float: left; }
div#content { width: 70%; float: left; }
div#extra { clear: both; }
In desktop-wide.css, you could have something like:
div#nav { width: 20%; }
div#content { width: 60%; }
div#extra { width: 20%; clear: none; float: left; }
These percentages aren't necessarily realistic as you'd have padding or margins, but hopefully they show the idea.
I plan to write up a comprehensive method at my wiki sometime soon, in case you wish to check back later.
When you say "a 2-3 column grid", for which kind of devices do you mean? I recommend you first get clear in mind which size of devices should have columns and how many of them. Maybe the CSS will make more sense to you then?
Additionally, I recommend taking a different approach to the one that framework uses:
First, set up a single-column, basic stylesheet that doesn't rely on minimum width media queries. This is to give mobile users (including those whose devices don't do media queries) a mobile-friendly experience without cumbersome horizontal scrolling. This is the advantage of this approach over the one you've referenced.
Then, add a stylesheet with a media query specifying a minimum viewport width of something like 500px. This is to add in column layout and other styling (such as background images) which is suitable only for desktop browsers.
This is a very brief overview and other things such as getting Internet Explorer to use the media queries (Javascript required?) and making sure those devices which don't support media queries do not load background images from the minimum viewport width stylesheet will need additional refinement. I'm in the process of writing up my preferred method and can post more info when it's done, or maybe when I can get back to my desktop machine.