I've been trying to have different images show up on my main page based on screen size. None of the solutions I've seen online are helping. Instead, both images are showing on all screens. Here is one of the methods I've tried. First, in my stylesheet, I put:
.screen-only {
display: block;
}
.mobile-only {
display: none;
}
#media screen and (max-width: 480px) {
.screen-only {
display: none;
}
.mobile-only {
display: block;
}
}
Then, in my main page, I have:
<div id="titleBar" class="screen-only">
<img src="assets/images/screenpic.png" class="screen-only" />
</div>
<div id="titleBar" class="mobile-only">
<img src="assets/images/mobilepic.png" class="screen-only" />
</div>
I'm confused if I should be putting the class in the div or in the image section, but either way I put it, or if I put it twice like I did in the example here, both images show up on all sizes.
you code seems correct except that your second "div" does not have the same class in the "div" and "img" tags. Your "img" tag should have a class of "mobile-only" not "screen-only"
One possible source of error and confusion is you are using screen-only and mobile-only as a class names. Maybe it is allowed but it is confusing and not hard to avoid.
Another possible error is that you have marked both images with the class screen-only.
The following is I think a bit clearer and should actually work:
in css
div.responsive {
background-image: url("assets/images/screenpic.png");
}
#media only screen and (max-width: 480px) {
div.responsive {
background-image: url("assets/images/mobilepic.png");
}
}
in html
<div id="title-bar" class="responsive"> </div>
here is a complete html file with inline styles that show what you are after. I have used images from SO just to show that it works, you should replaace the img tags with your images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.responsive {
background-color: lightgreen;
}
#mobile-title {
display: none;
}
#desktop-title {
display: block;
}
#media only screen and (max-width: 480px) {
div.responsive {
background-color: lightblue;
}
#mobile-title {
display: block;
}
#desktop-title {
display: none;
}
}
</style>
</head>
<body>
<div id="mobile-title" class="responsive">
<img src="https://i.stack.imgur.com/9LROA.png?s=32&g=1" width="32" height="32">
</div>
<div id="desktop-title" class="responsive">
<img src="https://www.gravatar.com/avatar/598b1b70f462d6708ff9a459a102d500?s=32&d=identicon&r=PG&f=1" alt="" width="32" height="32">
</div>
</body>
</html>
Related
So I'm not that great at programming sorry, but I use stack overflow and other sources to add site functionality and learn a little more each time. I'm using a Flexible Grid System to display my main content, specifically to re-arrange navigational buttons on the page.
This works great for me, but I've been using an ancient onMouseOver effect to display text when the user moves over an image button link and I'm not happy with the way it looks, and using flex creates issues with text legibility when the sizing gets small.
Ideally, I'd like to use a css overlay on my buttons so I can replace the image with text and format it to my liking. I've tried MANY different overlay solutions, but they all seem to use grid layouts and I can't get them to work with my flex layout for some reason.
Either the images get cropped, or the text can't completely cover the image due to layering issues, or (If I use the grid layout) I lose the flexible resizing capabilities that I really like on the site.
I'm hoping that this is a really simple fix. I'm assuming I need to add a container to my flex layout to place the content over the top of the image, but a hint to where to start would be really appreciated.
Here's a link to the buttons in the flex layout with no overlay:
https://megaauctions.net/megaflextest.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEGA Main Flex Buttons</title>
<link rel="stylesheet" href="css/test-code-buttons-no-action-compact.css" type="text/css"/>
</head>
<body>
<div class="buttoncontainer">
<buttonhomea class="buttonhomea column grad-yellow">
<a href=#><img src="http://www.megaauctions.net/images/btn-auctions.gif" /></a>
</buttonhomea>
<buttonhomeb class="buttonhomeb column grad-babyblue">
<img src="http://www.megaauctions.net/images/btn-buying.gif" />
</buttonhomeb>
<buttonhomec class="buttonhomec column grad-salmon">
<img src="http://www.megaauctions.net/images/btn-selling.gif" />
</buttonhomec>
</div>
</body>
</html>
and the CSS...
.buttoncontainer {
margin: 0 auto;
top: 0px;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
background: url('http://www.megaauctions.net/images/bkg-subs-deep.gif');
}
.column {
--columns: 12; /* number of columns in the grid system */
--width: var(--width-mobile, 0); /* width of the element */
padding: 0px;
margin: 9px 1px 2px 1px;
flex-basis: calc(var(--width) / var(--columns) * 94%);
}
/****** VIEWPORTS START ******/
#media (min-width: 350px) {
.column {
--width-mobile: var(--width-mobile);
--width: var(--width-mobile);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 512px) {
.column {
--width-tabletp: var(--width-tablet);
--width: var(--width-tabletp);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 650px) {
.column {
--width-tablet: var(--width-mobile);
--width: var(--width-tablet);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:300px;
}
}
#media (min-width: 900px) {
.column {
--width-desktop: var(--width-tablet);
--width: var(--width-desktop);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:315px;
}
}
/****** VIEWPORTS END ******/
.buttonhomea, .buttonhomeb, .buttonhomec {
--width-mobile: 12;
--width-tabletp: 4;
--width-tablet: 4;
--width-desktop: 4;
height: 100%;
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/gfb7k43h/
...and an overlay example of what I'm trying to achieve:
https://megaauctions.net/megaflextestbuttonaction.htm
<html>
<head>
<title>CSS Grid Cards</title>
<link rel="stylesheet" href="css/test-code-buttons-working-grid-compact.css" type="text/css"/>
</head>
<body>
<div class="container">
<section class="cards">
<a href="#" class="card grad-yellow">
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-auctions.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-babyblue">
<div class="card__overlay grad-babyblue">
<div class="card__title">Buying</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-buying.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-salmon">
<div class="card__overlay grad-salmon">
<div class="card__title">Selling</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-selling.gif')"></div>
<div class="card__content">
</div>
</a>
</section>
</div>
</body>
</html>
and the CSS...
.container{
background-image:url(http://www.megaauctions.net/images/bkg-subs-deep.gif)
}
.cards{
display:grid;
gap:1rem;
margin:0 auto;
padding:1rem;
}
#media (min-width:59em){
.cards{
grid-template-columns:repeat(2,1fr)
}
}
.card{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:300px 1fr auto;
color:#fff;
}
#media (min-width:31.25em){
.card{
grid-template-columns:160px (2,1fr);
grid-template-rows:1fr auto
}
}
#media (min-width:50em){
.card{
grid-template-columns:300px (2,1fr)
}
}
#media (min-width:59em){
.card{
grid-template-columns:160px(2,1fr)
}
}
.card__overlay{
min-height:300px;
display:none
}
#media (min-width:59em){
.card__overlay{
position:relative;
opacity:0;
display:grid;
justify-items:center;
align-items:center;
grid-column:1/4;
grid-row:1/3;
transition:opacity .3s ease-in-out}
}
.card:hover .card__overlay{
min-height:300px;
opacity:1
}
.card__content span{
display:inline-block;
border:2px solid #fff;
padding:1rem 3rem;
color:#fff;
}
.card__image{
grid-column:1/3;
grid-row:1/2;
min-height:157px;
background:no-repeat
}
#media (min-width:31.25em){
.card__image{
grid-column:1/4;
grid-row:1/3
}
}
.card__content{
grid-column:1/3;
grid-row:2/3;
padding:1.5rem}
#media (min-width:31.25em){
.card__content{
grid-column:2/4;
grid-row:1/2}
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/2eLzkwts/
Thanks!
Hope this answers your query
JSFIDDLE
what i have done is giving relative style to the parent buttonhomea .
then on hover showing the hidden div.
.card__overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
opactity:0;
z-index:-1;
}
.buttonhomea{
position:relative;
}
.buttonhomea:hover .card__overlay{
opacity:1;
z-index:1;
}
and added html
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
under each buttonhomea class
In my html, there are header, sidebar, footer, and <main>. They are convenient when reading on browser, but when reader print the page, I want them to print only the <main> part because sidebar... etc are not necessary when printed on papers.
Can i select the visible parts when printed?
Here is what I have used to print only the desired content.
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Side Bar Content
</div>
<div id="printable">
Main Content
</div>
</body>
sure, you use a media query.
using a media query in your css
#media print {
… css goes here
}
You could also use a seperate print.css file
here is an article that goes into greater details
Try window.print for printing:
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
Then use css to style the items for printing:
#media print
{
header{
display: none;
}
}
#media all and (min-width: 641px) {
.small-screen {
display: none;
}
}
<div class="small-screen">
<h1 id="club-offcial-name-small">Hercules Club</h1>
<h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
</div>
.small-screen is still there when going above 640px.
Guys, total noob here, stuck badly here :/
I think it's just a browser support problem. In Chrome (codepen) it works perfect for me. Which browser are you using? Here is a table of the media query support: http://caniuse.com/#search=%40media
Codepen: http://codepen.io/anon/pen/ZWYLBJ
Ok I think I know your problem. You need to put a style-tag around the css code in the like this:
<!DOCTYPE html>
<html>
<head>
<style>
#media all and (min-width: 641px) {
.small-screen {
display: none;
}
}
</style>
</head>
<body>
<div class="small-screen">
<h1 id="club-offcial-name-small">Hercules Club</h1>
<h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
</div>
</body>
</html>
Try this
#media only screen and (min-width: 641px) {
.small-screen {
display: none!important;
}
}
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
So, I've boiled this down to just the bare minimum. As nearly as I can tell, some bootstrap mixins are just not working. Specifically .make-md-column() and .make-sm-column() flat don't seem to do anything.
At first, I thought it was WebEssentials not compiling the .less file correctly, so I kicked over to just using less.js and compiling on the client-side. Still no love
So in the page below, the labels Span1 and Span2 appear in 2 columns at medium size and in 1 column on smaller views.
Based on my .less, I think taht spans 3 and 4 should be exactly the same (except green -- I added that just to be sure that something was coming through) Spans 3 and 4 never go 2-column. What am I doing wrong here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap/bootstrap.less" rel="stylesheet/less" type="text/css"/>
<link href="Content/testless.less" rel="stylesheet/less" type="text/css" />
<script src="Scripts/less-1.5.1.min.js"></script>
</head>
<body>
<div class="container">
<!-- this row uses no LESS-->
<div class="row">
<div class="col-sm-12 col-md-6">
<span>Span1</span>
</div>
<div class="col-sm-12 col-md-6">
<span>Span2</span>
</div>
</div>
<div class="row">
<div class="div-container">
<span>Span3</span>
</div>
<div class="div-container">
<span>Span4</span>
</div>
</div>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
and here's the less
#import (reference) 'bootstrap/bootstrap.less';
//#import 'bootstrap/bootstrap.less';
.div-container {
color: green;
.make-md-column(6);
.make-sm-column(12);
}
Smallest to Largest
The order of your make-xx-column(X) calls is important. Your code:
.div-container {
color: green;
.make-md-column(6);
.make-sm-column(12);
}
Generates this CSS for the media queries:
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
In this order, the cascade of the CSS selectors is working against you, because the 768px minimum is after the 992px, so when you are at say 1000px, both media query blocks apply since both are under that number, but the css cascade chooses the last one defined, which will always be 768px (single column). SEE EXAMPLE FIDDLE WITH THIS ORDER. So you need this:
.div-container {
color: green;
.make-sm-column(12); /* reversed order */
.make-md-column(6);
}
Generates this CSS for the media queries:
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
Now, at 1000px the 992px applies, but if it drops below 992px, then the min-width condition prevents that one from applying, and the 768px takes over. SEE EXAMPLE FIDDLE WITH THIS ORDER.
So the order of your make-xx-column(X) calls must be from smallest to largest.
I used a css sprite to display backgrounds on a fixed width design. Im changing to fluid layout, but because of the background positions the background image goes wonky when the browser resizes.
Is it possible to use a css sprite with a fluid grid background, where it resizes eith the layout?
I need layout compatible with ie 7 and 8 with other latest browsers
Adding to what #brianMaltzan wrote about #media you can use different resolution groups to have a different stylesheet
<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />
or block of css code for the style of your page:
#media (max-width: 860px) {
body {
width: 600px;
}
}
#media (min-width: 861px) and (max-width: 1024px) {
body {
width: 800px;
}
}
#media (min-width: 1025px) {
body {
width: 1000px;
}
}
I would suggest to use a few fixed sizes which will alter with each stylesheet, rather than percentages (if you are using them). Can you show us an live example of the sprite in place with your fluid layout so that we can see the issue?
I have not tried this, but there are people doing this with CSS Clip.
http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html
http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/
#media may work for you. Not sure about ie7&8 though.
No, that's not possible. The recommended solution is to use the sprite map in an inline image and have that element's height and width set in your CSS. Here's a link explaining how to do this. This allows your images to resize with the layout.
If you'r ok to use some JS, it's possible, like this snippet.
I use jquery but you can convert it easly in pure js.
I scale the sprit with a ratio calculate between the sprit width and its parent width. I set some negative margin on it, because scale a div with css transform property change the aspect but not the calculate size.
var $sprits = $('.sprit');
$sprits.each(function() {
$(this).data('originalWidth', $(this).width());
$(this).data('originalHeight', $(this).height());
$(this).data('originalParentHeight', $(this).parent().height());
})
function setSpritsScale() {
$sprits.each(function() {
ratio = $(this).parent().width() / $(this).data('originalWidth');
marginWidth = $(this).data('originalWidth') - $(this).parent().width();
marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
$(this).css({
'transform': 'scale(' + ratio + ')',
'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
});
})
}
$(window).resize(setSpritsScale);
setSpritsScale();
.columns {
float: left;
width: 20%;
}
.sprit {
display: inline-block;
background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
background-repeat: no-repeat;
min-width: 75px;
min-height: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>