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
Related
I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths. I can't correctly determine the phone's screen width, so the only way I can think of doing this is to add background images of a div and use #media to determine the screen width and display the correct image.
For example:
<span style="background-image:particular_ad.png; #media (max-width:300px){background-image:particular_ad_small.png;}"></span>
Is this possible, or does anyone have any other suggestions?
#media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:
The value of the style attribute must match the syntax of the contents of a CSS declaration block
The only way to apply styles to one specific element only in certain media is with a separate rule in your stylesheet (be it linked externally or internally in a <style> element), which means you'll need to come up with a selector for it. You can grab one using your browser's dev tools, or figure out a class and/or ID combination that isolates this element:
#myelement { background-image: url(particular_ad.png); }
#media (max-width: 300px) {
#myelement { background-image: url(particular_ad_small.png); }
}
If you're unable to find a selector that will reliably match this element alone due to the nature of your page, you can use a custom property, provided you don't need to worry about specificity or Internet Explorer:
:root { --particular-ad: url(particular_ad.png); }
#media (max-width: 300px) {
:root { --particular-ad: url(particular_ad_small.png); }
}
<span style="background-image: var(--particular-ad);"></span>
Problem
No, Media Queries cannot be used in this way
<span style="#media (...) { ... }"></span>
Solution
But if you want provided a specific behavior usable on the fly AND responsive, you can use the style markup and not the attribute.
e.i.
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
#media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
See the code working in live on CodePen
In my Blog for example, I inject a <style> markup in <head> just after <link> declaration for CSS and it's contain the content of a textarea provided beside of real content textarea for create extra-class on the fly when I wrote an artitle.
Note : the scoped attribute is a part of HTML5 specification. If you do not use it, the validator will blame you but browsers currently not support the real purpose : scoped the content of <style> only on immediatly parent element and that element's child elements. Scoped is not mandatory if the <style> element is in <head> markup.
UPDATE: I advice to always use rules in the mobile first way so previous code should be:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
#media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
Inline styles cannot currently contain anything other than declarations (property: value pairs).
You can use style elements with appropriate media attributes in head section of your document.
Yes, you can write media query in inline-css if you are using a picture tag. For different device sizes you can get different images.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
If you are using Bootstrap Responsive Utilities or similar alternative that allows to hide / show divs depending on the break points, it may be possible to use several elements and show the most appropriate. i.e.
<span class="hidden-xs" style="background: url(particular_ad.png)"></span>
<span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
Media Queries in style-Attributes are not possible right now.
But if you have to set this dynamically via Javascript.
You could insert that rule via JS aswell.
document.styleSheets[0].insertRule("#media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
This is as if the style was there in the stylesheet. So be aware of specificity.
Hey I just wrote it.
Now you can use <div style="color: red; #media (max-width: 200px) { color: green }"> or so.
Enjoy.
I tried to test this and it did not seem to work but I'm curious why Apple is using it. I was just on https://linkmaker.itunes.apple.com/us/ and noticed in the generated code it provides if you select the 'Large Button' radio button, they are using an inline media query.
<a href="#"
target="itunes_store"
style="
display:inline-block;
overflow:hidden;
background:url(#.png) no-repeat;
width:135px;
height:40px;
#media only screen{
background-image:url(#);
}
"></a>
note: added line-breaks for readability, original generated code is minified
yes,you can do with javascript by the window.matchMedia
desktop for red colour text
tablet for green colour text
mobile for blue colour text
//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width: 768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices
isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);
// Attach listener function on state changes
function isat_find_device_mobile(mob)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";
// isat mobile style here
}
function isat_find_device_desktops(des)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="red";
// isat mobile style here
}
function isat_find_device_tablets(tab)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";
// isat mobile style here
}
//isat_style_media_query_for_desktop_mobile_tablets
<div id="daynight">tricky style for mobile,desktop and tablet</div>
You can use image-set()
<div style="
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);">
Inline media queries are possible by using something like Breakpoint for Sass
This blog post does a good job explaining how inline media queries are more manageable than separate blocks: There Is No Breakpoint
Related to inline media queries is the idea of "element queries", a few interesting reads are:
Thoughts on Media Queries for Elements
Media Queries are a Hack
Media Queries Are Not The Answer: Element Query Polyfill
if else blocks
if you add the rule to the print.css file you don't have to use #media.
I uncluded it in the smarty foreach i use to give some elements a background color.
<script type='text/javascript'>
document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
It's crazy they didn't think of media queries at HTML level, as obviously style css gets loaded after html, it's a huge disadvantage to inlining style inside html.
Yes, this is quite possible but only as using javascript event attributes in HTML elements. Here you have to keep in mind that not every html tag element could fire every js event, which can listen for changes to the DOM, such as onresize or execute js code, when DOM is loaded, as onload event does. In the example above I use body and img tags as they are capable to fire img only onload event, body tag both onload and onresize. Depending on the event, you could choose the approach to resolve your issue, as using the code from the examples.
Using a body tag:
<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>
Using img tag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
width="100%" style="width: 100vw; height: 1px;"
alt="" height="1"
onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" />
You should also keep in mind that if you decide to use this way of embedding mediaquery css in an HTML letter, it may not pass through the blacklists of mail servers, which in most cases cut such javascript events. But for the purposes of some ajax or banner, some dynamic application, this approach should face no problem.
I want to make my site responsive with only css I'm new to designing please help me, how can I make it responsive with only CSS?.
I tried using media query but it didn't work for me or maybe I don't know how to use it.
I am copying this Site: https://www.portfoliobox.net/
I know above site is made using bootstrap but I am doing it with html and css only.
Check out mine it messes up when screen size is change.
https://portfolioboxcopy.000webhostapp.com/
And tell me if i'm doing any mistakes. Thanks!
A few tips on how you could improve your site, and make it responsive:
Avoid inline styles as they are hard to manage. Put your styles in a .css stylesheet and link to the stylesheet in a link tag somewhere before the closing </head> tag in your HTML document like so:
<link rel="stylesheet" href="styles.css" />
To make your site responsive you should use percentage widths as often as you can and media queries to adapt your design. Media queries should be added as separate style rules, e.g:
.bg1 {
margin: -10px -8px 0;
}
#media (max-width: 500px) {
.bg1 {
margin: 0;
}
}
Avoid spaces in filenames like with your image "bg (1).jpg" as spaces are not allowed in file url's. Try something like "bg_1.jpg" instead.
Consider moving your current "header" element into a new wrapper element. This will make it easier to create a header area with a set height that can be changed with media queries. I recommend removing your "bg1" element and using the image in background-image: url(); on the new wrapper element described above.
My website is www.dreamzabroad.in,
I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?
One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:
http://getbootstrap.com/getting-started/
You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.
You want to look into media queries, which will allow you to change your CSS based on certain conditions.
If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.
Use Bootstrap media query or simply use custom media CSS properties.
for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.
<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />
Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.
#media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
#media screen and (max-width: 711px) {
body {
background-color: Green;
color: Red;
}
}
References:
https://www.geeksforgeeks.org/bootstrap-media-queries/
hello i have to code responsive html email template what i want you to clear me will my template be responsive if i add media queires for different resolutions for example sometging like this
#media only screen and (max-width: 480px){
table[class=wrapper]
{
width:100% !important;
}
table[class=main_table]
{
width:320px !important;
width:100% !important;
}
(this is just piece of cod to clear my point ofcourse i have to add this for whole template )
so will template be responsive if i add these queries ?
Adding media queries will make your email 'responsive', providing it is set up correctly and functional of course. In your example you'd need to add those classes to the appropriate tables for them to take effect. So as a general rule, using media queries = responsive.
An excellent responsive template to start with is this one by Email on Adid.
I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths. I can't correctly determine the phone's screen width, so the only way I can think of doing this is to add background images of a div and use #media to determine the screen width and display the correct image.
For example:
<span style="background-image:particular_ad.png; #media (max-width:300px){background-image:particular_ad_small.png;}"></span>
Is this possible, or does anyone have any other suggestions?
#media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:
The value of the style attribute must match the syntax of the contents of a CSS declaration block
The only way to apply styles to one specific element only in certain media is with a separate rule in your stylesheet (be it linked externally or internally in a <style> element), which means you'll need to come up with a selector for it. You can grab one using your browser's dev tools, or figure out a class and/or ID combination that isolates this element:
#myelement { background-image: url(particular_ad.png); }
#media (max-width: 300px) {
#myelement { background-image: url(particular_ad_small.png); }
}
If you're unable to find a selector that will reliably match this element alone due to the nature of your page, you can use a custom property, provided you don't need to worry about specificity or Internet Explorer:
:root { --particular-ad: url(particular_ad.png); }
#media (max-width: 300px) {
:root { --particular-ad: url(particular_ad_small.png); }
}
<span style="background-image: var(--particular-ad);"></span>
Problem
No, Media Queries cannot be used in this way
<span style="#media (...) { ... }"></span>
Solution
But if you want provided a specific behavior usable on the fly AND responsive, you can use the style markup and not the attribute.
e.i.
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
#media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
See the code working in live on CodePen
In my Blog for example, I inject a <style> markup in <head> just after <link> declaration for CSS and it's contain the content of a textarea provided beside of real content textarea for create extra-class on the fly when I wrote an artitle.
Note : the scoped attribute is a part of HTML5 specification. If you do not use it, the validator will blame you but browsers currently not support the real purpose : scoped the content of <style> only on immediatly parent element and that element's child elements. Scoped is not mandatory if the <style> element is in <head> markup.
UPDATE: I advice to always use rules in the mobile first way so previous code should be:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
#media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
Inline styles cannot currently contain anything other than declarations (property: value pairs).
You can use style elements with appropriate media attributes in head section of your document.
Yes, you can write media query in inline-css if you are using a picture tag. For different device sizes you can get different images.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
If you are using Bootstrap Responsive Utilities or similar alternative that allows to hide / show divs depending on the break points, it may be possible to use several elements and show the most appropriate. i.e.
<span class="hidden-xs" style="background: url(particular_ad.png)"></span>
<span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
Media Queries in style-Attributes are not possible right now.
But if you have to set this dynamically via Javascript.
You could insert that rule via JS aswell.
document.styleSheets[0].insertRule("#media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
This is as if the style was there in the stylesheet. So be aware of specificity.
Hey I just wrote it.
Now you can use <div style="color: red; #media (max-width: 200px) { color: green }"> or so.
Enjoy.
I tried to test this and it did not seem to work but I'm curious why Apple is using it. I was just on https://linkmaker.itunes.apple.com/us/ and noticed in the generated code it provides if you select the 'Large Button' radio button, they are using an inline media query.
<a href="#"
target="itunes_store"
style="
display:inline-block;
overflow:hidden;
background:url(#.png) no-repeat;
width:135px;
height:40px;
#media only screen{
background-image:url(#);
}
"></a>
note: added line-breaks for readability, original generated code is minified
yes,you can do with javascript by the window.matchMedia
desktop for red colour text
tablet for green colour text
mobile for blue colour text
//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width: 768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices
isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);
// Attach listener function on state changes
function isat_find_device_mobile(mob)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";
// isat mobile style here
}
function isat_find_device_desktops(des)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="red";
// isat mobile style here
}
function isat_find_device_tablets(tab)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";
// isat mobile style here
}
//isat_style_media_query_for_desktop_mobile_tablets
<div id="daynight">tricky style for mobile,desktop and tablet</div>
You can use image-set()
<div style="
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);">
Inline media queries are possible by using something like Breakpoint for Sass
This blog post does a good job explaining how inline media queries are more manageable than separate blocks: There Is No Breakpoint
Related to inline media queries is the idea of "element queries", a few interesting reads are:
Thoughts on Media Queries for Elements
Media Queries are a Hack
Media Queries Are Not The Answer: Element Query Polyfill
if else blocks
if you add the rule to the print.css file you don't have to use #media.
I uncluded it in the smarty foreach i use to give some elements a background color.
<script type='text/javascript'>
document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
It's crazy they didn't think of media queries at HTML level, as obviously style css gets loaded after html, it's a huge disadvantage to inlining style inside html.
Yes, this is quite possible but only as using javascript event attributes in HTML elements. Here you have to keep in mind that not every html tag element could fire every js event, which can listen for changes to the DOM, such as onresize or execute js code, when DOM is loaded, as onload event does. In the example above I use body and img tags as they are capable to fire img only onload event, body tag both onload and onresize. Depending on the event, you could choose the approach to resolve your issue, as using the code from the examples.
Using a body tag:
<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>
Using img tag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
width="100%" style="width: 100vw; height: 1px;"
alt="" height="1"
onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" />
You should also keep in mind that if you decide to use this way of embedding mediaquery css in an HTML letter, it may not pass through the blacklists of mail servers, which in most cases cut such javascript events. But for the purposes of some ajax or banner, some dynamic application, this approach should face no problem.