Background image does not resize on different desktop screens with the following style. What's wrong here?
#media
only screen and (min-resolution: 2dppx) and (min-device-width: 539px) {
/* Large screen, retina */
.welcome {
background:#00ff00;
/* link to other image */
background-image: url('Desktop768px1024px.jpg');
background-size: 100% 100%;
/* hide src */
height:0;
width:0;
/* just show the background */
padding:768px 1024px;
}
}
Try use this rule:
#media only screen and (min-resolution: 72dpi) and (min-device-width: 539px) {}
Related
I am looking to find a way to create a sass function that alters the color of my font from white (on desktop) to black (on tablet and mobile). The reason being is that I am overlaying text on a video on desktop, but then on mobile the overlayed text switches to blocked text placed underneath the video, so the font color needs to change to black at that time.
I am relatively new to sass, but so far have tried this as a mixin (that did not work)
** I know this can be done with css but am looking to make this a bit more dynamic and reusable **
$color-media-sizes: (
"max1024": #000 or #fff,
null: #000 or #fff
);
with this function
#function color($mobile-color, $desktop-color){
#return ($mobile-color $desktop-color)
}
I don't think you really need to use SASS for this, CSS will do the trick.
Just put media queries and colors based on your device screen
(Source : https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488)
Read this doc, it'll help you to understand media queries : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
Mixin in SASS is like to create a "template" of a component. E.g. : A button
#mixin button($text, $background) {
background: $background;
border-radius: 10px;
color: $text;
padding: 0 15px;
text-decoration: none;
text-transform: uppercase;
}
// Then you can call it this way :
.success-button {
#include button("#FFF", "#0F0");
}
.error-button {
#include button("#FFF", "#F00");
}
Hope I could help
Maybe you can do that using just css media queries :
#media screen and (min-width: 980px) {
body {
color: red;
}
}
#media screen and (max-width: 979px) {
body {
color: blue;
}
}
#media screen and (max-width: 500px) {
body {
color: green;
}
}
Having a difficult time getting the CSS to work on different devices. I have a desktop, an iPad 4 and a Sony S8. With the following CSS media queries:
#media screen and (min-width: 1200px){
body{
background: red;
}
}
#media screen and (min-width: 768px) and (max-width: 979px){
body{
background: green;
}
}
#media screen and (max-width: 767px){
body{
background: purple;
}
}
#media screen and (max-width: 480px){
body{
background: tomato;
}
}
I have honestly tested MANY variations if this from examples from many different internet sources and articles and still cannot get it to work properly. With the configuration above, my desktop has a red browser background - the Sony and the iPad both have white. Can someone please provide me with some direction? Thank you.
UPDATE:
Changed my CSS to look like this:
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
#media screen and (min-width:320px) {
body{
background: tomato;
}
}
/* smartphones, Android phones, landscape iPhone */
#media screen and (min-width:480px) {
body{
background: red;
}
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
#media screen and (min-width:600px) {
body{
background: blue;
}
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
#media screen and (min-width:801px) {
body{
background: yellow;
}
}
/* big landscape tablets, laptops, and desktops */
#media screen and (min-width:1025px) {
body{
background: green;
}
}
/* hi-res laptops and desktops */
#media screen and (min-width:1281px) {
body{
background: purple;
}
}
Desktop is now purple, iPad is now yellow and the S8 is YELLOW??
This code works for me. You must have something overriding it.
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
#media screen and (min-width:320px) {
body{
background: tomato;
}
}
/* smartphones, Android phones, landscape iPhone */
#media screen and (min-width:480px) {
body{
background: red;
}
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
#media screen and (min-width:600px) {
body{
background: blue;
}
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
#media screen and (min-width:801px) {
body{
background: yellow;
}
}
/* big landscape tablets, laptops, and desktops */
#media screen and (min-width:1025px) {
body{
background: green;
}
}
/* hi-res laptops and desktops */
#media screen and (min-width:1281px) {
body{
background: purple;
}
}
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
I have a problem with relative positioning, in the following my html code:
<ion-view class="menu-content" view-title="Postkarte">
<ion-content>
<div class="postcard">
</div>
</ion-content>
</ion-view>
And my current CSS:
.postcard {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/postcard_00.png");
background-size: contain;
background-repeat: no-repeat;
width: 354px;
height: 250px;
}
As you can see i defined width and height absolute (354 and 250px). I tried to set the width to 90% but that made the div too small. I guess just 5 x 5 px. I want it to be at 90% of the width of my device. Since im developing an app for mobile devices i also need to check in css if the orientation is landscape or protrait because if it is portrait i need the width to be 90% of the devices screen width and if it is landscape i need the height to be 90% of the devices height.
How can i do that?
You can use media queries.
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 767px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.postcard { height:90%; }
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 767px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.postcard { width:90%; }
}
Here's the style.css where I've implement media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px)
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px)
body {
background: #b5ebf9 !important;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px)
body {
background: #b5ebf9 !important;
}
/* Landscape phones and down */
#media (max-width: 480px)
body {
background: #b5ebf9 !important;
}
And I've added this in the HTML, for it to detect (I think this is right):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And obviously, linked to the above CSS file in the header.
But for some reason, the background image ALWAYS displays, instead of the colour #b5ebf9.
What am I doing wrong?! I've spent 1-2 days on and off trying to fix this! I tried...
Making separate CSS sheets for each device , linking to those style sheets with the media tag included (no reaction whatsoever)
Also tried removing the first body query from the above CSS - which just keeps the backgrounds in that color, across all devices, no background image at all! (I want the background image to show up on desktop screens.)
Please help!
You need those {} to regroup media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px){
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
body {
background: #b5ebf9 !important;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px){
body {
background: #b5ebf9 !important;
}
}
/* Landscape phones and down */
#media (max-width: 480px){
body {
background: #b5ebf9 !important;
}
}
Can you try this:
#media only screen and (max-width: 979px) and (min-width:768px) {}
#media only screen and (max-width: 767px) and (min-width:481px) {}
instead of just #meadia