I'm trying to understand screen vs. print behavior. What's the reason the APSW docs look different in print vs. screen? (In print, the table of contents column vanishes, and the main column takes up the whole print width)
(I'm trying to debug my sphinx document which doesn't have this behavior, but I figure if I can understand one that works properly, I can figure out why mine doesn't.)
Just something to note, after looking closely at the #media print section in basic.css cited by those of you who answered — there was one line different between my basic.css and the one in APSW:
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
The !important modifier was missing from my basic.css and that was causing the margin: 0 to get overridden.
This is done using media types. With them, you can limit style rules to a certain output device like screen, printer, or handheld.
See here: http://apsw.googlecode.com/svn/publish/_static/basic.css
This is linked to the media type.
You can either link it to a group of properties:
#media screen {
body { font-size: 13px }
}
or to an entire stylesheet
<link href="blah.css" media="all" rel="stylesheet" type="text/css" />
In your case:
#media print {
div.document,
div.documentwrapper,
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
div.sphinxsidebar,
div.related,
div.footer,
#top-link {
display: none;
}
}
They have #media rules.
Take a look at:
http://apsw.googlecode.com/svn/publish/_static/basic.css
They include another css-file in their stylesheet via
#import url("basic.css");
Related
I am new to web development and I am facing a hard time dealing with media queries.
I am creating a dance website but my following media queries in "media-query.css" are not getting fired.
#media screen and (max-width:1800px) and (min-width: 399x) {
.our-services ul li {
font-size: 2rem;
padding: 2rem;
}
}
#media screen and (max-width: 400px) {
.our-services ul li{
font-size: 2rem;
padding-left: 0rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
Project link: https://github.com/abhinav700/DanceMasti.com
Too lazy to go through all of those files so I'll list some common errors out here in case someone else finds this question and has a different cause:
Maybe you haven't linked the file. Add <link src="your-directory/media-query.css"></link> to your html file.
Your queries are being overridden by a file with a higher priority. Test this
by leaving !important after your lines, i.e width: 50px !important;. Note that
using important is considered bad code by some(I have no opinion on this,and
have no idea if it's true).
As posted by another user, your media query is a bit off, so you could be toeing
the line and using exactly 400px. I doubt it though. The lower query should be
taking precedence, so it still should look like a mobile view.
Check to make sure that you are using the selectors correctly. Your selectors
currently are looking for a <li> inside a <ul> inside any element with a
class of our-services(someone correct me if I'm wrong). The way I like to
check this is just to set a clause:
li{
position: none;
}
and see if this element disappears. If it does and nothing else pops up... I got nothing.
If this answer helped, please mark it as answer.
It says 399x instead of 401px. So it could be both a syntax issue and a overlap issue.
Say I wanted to show a print preview, would it be possible to have an iframe or a div element use print media query instead of screen? something akin to this:
<iframe media='print'></iframe>
I already have a CSS file with print media, the issue is just triggering that selector outside of using print preview.
I'm not sure but you can modify your print page css as below
first you need to create a file as name is yourcssfile.css then add it in your html file like this,
<link href="yourcssfile.css" rel="stylesheet" >
inside
#media only screen and (max-width : 640px) {
/* All your print styles go here */
#header, #footer, #nav { display: none !important; }
}
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
maybe this question is too weird or even is off-topic, sorry for that but I have this doubt:
Exists a way to show a HTML page in the same size for all screens when the user types control + p (print page)?
For example my laptop have this screen resolution: 1600x900 and when I type control + p the HTML page look perfect (all in 1 page)!
Problem appears when I use a bigger(page appear in 2 or more pages) or smaller screen(page appear in 1 page but with a lot of blank spaces).
At the moment I tried with #page margins but not work at all, just in some cases, however here is the code:
<style>
#page :left {
}
#page :right {
margin-top: 0.2cm;
margin-bottom: 0.2cm;
}
body {
font-size: 9.5px;
}
</style>
PD. I'm using JavaScript, jQuery, HTML5, CSS3, Bootstrap.
Control + P means print, right?
Then yes, you should use the media query
#media print{
}
This a good explanation: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
I am trying to display a list of data in table on the desktop version of the website using tables. I want to condense the same for the mobile web. Should I use a separate block of html or can I convert the present tables for the mobile view.
http://play.mink7.com/h/startupsradar/pending.html
I like the following list view on mobile
Update
I modified the code according to the answers. Any idea how i can make the whole list as a whole as click-able as one block ?
You can turn an HTML table to different rendering, e.g. setting
table { display: block; }
tr { display: table; }
th, td { display: table-row; }
This would cause a completely vertical presentation.
The details of course depend on the markup and on the desired rendering.
You can convert the same block using handheld specific stylesheet attribute media="screen and (max-device-width: /* whatever */)" like this :
<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">
Or you can use #media inside your stylesheet
#media only screen and (max-device-width: /* whatever */) {
/* Styles goes here */
}
Media Info
P.S I just saw the source of nike.com, they are using the
stylesheet attribute for ipad.css stylesheet, have a look.
If CSS3 is acceptible, you can use media queries to create different styles for different dimensions and devices. You can create incredibly dynamic sites in this way.
In general, table data can stretch tables rows to an undesired length, going out of bounds of the table row. When dealing with mobile devices you will have limited px. You could either create a copy of your existing CSS Stylesheet and edit it slightly setting a min/max width for the table for when your site switched to mobile.
max-width: __px;
min-width: __px;
etc.
Or you could call a JS function on the event of the switch to mobile site appending the CSS
$('#tableName').css('max-width', '150px');
$('#tableName').append(div).css('max-width', '150px');
The JS version can be a little tricky to get going, I think that you should go with setting limits on the CSS.
Media queries i can suggest is the best solution for responsive design.
Let me give you a simple code for responsivenes based on page width.
Here in the code i have using the media queries for changing the para color based on the browser width. You can instead hide using style=display:none or change the size of the contents based on the browser width.
<html>
<head>
<style>
#media (max-width: 600px) {
#p1{
color:red;
}
}
#media (max-width: 400px) {
#p1{
color:blue;
}
}
</style>
</head>
<body>
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p>
</body>
</html>
you can find more tutorial simply here