I want to use two different background-image:url() values based on screen size. This is fairly simple to do if the urls are known ahead of time:
#media (max-width: 400px) {
.element {
background-image:url("/Images/1.png");
}
}
#media (min-width: 401px) {
.element {
background-image:url("/Images/2.png");
}
}
However, I do not know my image urls ahead of time - they are based on information from the user. I can set a single background-image:url() dynamically in the code behind like so:
string backgroundStyle = "background-image: url(\""+loginImagePath+"\"); ";
sBodyWrapper.Attributes.Add("style", backgroundStyle);
But I'm not sure how I might go about setting two different background images which alternatively show based on screen width. I could set the two background images on different elements and hide one of those elements, but I really would like this background image to be on a single body wrapping element.
Is there any way to set values inside of media queries? Can conditional css be applied on the element's style attribute?
You could add the conditional CSS via a style tag appended to the document:
var rules = '<style>
#media(max-width: 400px){
background-image:url("Images/1.png");
}
#media(min-width: 401px){
background-image:url("Images/2.png");
}
</style>';
Related
I am creating a chart that shows keyboard commands overlaid on top of an image of a keyboard. I would like the text to shrink to the size of the container if it is too long to fit inside a key, but remain the default size otherwise. How would I accomplish this in HTML? The solutions I've seen seem to always alter the text size, versus only when the container is too small. Thanks.
Here's an example of what the result might look like:
You can use something like word-wrap or overflow-wrap or adding a variable with css(i.e: a font-size that fits your needs) and only change it when a media queries (that you established) returns true;
Media Queries explanation:
Let's say I established this variable
:root {
--font-size: 16px;
/* this is your regular font size that you will use in your entire document */
}
So in a given screen size like so:
#media screen and (device-width: 320px) and (orientation: portrait) {
:root {
--font-size: 12px;
}
}
You just change the value of the variable and it will change where ever you used that specific variable
If you don't know how this works you can use this css variables like this
.someClass {
font-size: var(--font-size); */ and that's it :) */
/* You can also make calculations like this */
font-size: calc(var(--font-size) - 40%);
}
Reference:
overflow-wrap: https://css-tricks.com/almanac/properties/o/overflow-wrap/
word-wrap: https://css-tricks.com/almanac/properties/w/word-break/
css variables: https://www.madebymike.com.au/writing/using-css-variables/
media queries: https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/
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.
Title says it all, but here are more details. I have a table with 8 columns. 2 of these columns contain information that I wouldn't mind truncating if the table is resized, but the other columns contain information that should be shown in full. So I when the table is resized and made narrower, I would like all the narrowing to occur only in those two columns, not in the others.
Give the cells that you don't want to wrap a class (.nowrap), Then add the following CSS:
td.nowrap {
white-space: nowrap;
}
WORKING DEMO
I would use a media query to achieve this. Once the table element gets to a certain width, hide or shrink the columns. Something like this, you will have to tweak it and possibly add more. Also check out Twitter Bootstrap. You can easily achieve this using their framework.
#media (min-width: 1200px) {
#tableColumn {
display:block;
}
}
#media (min-width: 700px) {
#tableColumn {
display:none;
}
}
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!
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