I have a blog template which I'm making responsive, how can i change the background of the body at smaller resolutions, I'm trying the following but it doesn't work.
#media (max-width: 30em) {
.post-template {
background-color: #color_01;
}
}
my body has the class
<body class="post-template">
The MixIn which applies the body color styling is as follows
.BodyColor () {
background-color: #color_01;
background-image: url(../images/body.jpg);
color: #color_05;
overflow-x: hidden;
background-attachment: fixed;
&:after {
content: ' ';
width: 100%;
height: 50%;
background-color: darken(#color_01, 10%);
.transform(~"skew(-20deg) rotate(-20deg)");
left: 0;
top: 30%;
.opacity(0.5);
position: fixed;
}
}
I want to overwrite the .transform call, so there isn't a skew on smaller resolutions as it renders too slowly
however I've set some properties of the body:afterpseudo class which I want to overwrite at smaller resolutions.
#media screen and (min-width: 30em) {
.post-template {
background-color: #big_size_color;
}
.post-template:after {
yourcode...
}
}
#media screen and (max-width: 30em) {
.post-template {
background-color: #color_01;
}
}
This keeps the body:after code from being shown unless the page is bigger than 30em. This rule applies to anything you want to only work on higher resolutions and be "overridden" on smaller ones. Don't declare it by itself outside of the #media call.
Related
So im just testing some media queries for scss in my webpack project.
I've just got a simple div within the body, and want the background to change depending on the width of the screen.
My two smallest media queries, small & xsmall, just don't apply, and I can't figure out why.
No matter how narrow I make the screen, the background stays green below 900px
$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
.test-class {
width: 100%;
height: 100%;
#media (min-width: $xsmall) { <--- Doesn't Apply
background-color: purple;
}
#media (min-width: $small) { <--- Doesn't Apply
background-color: pink;
}
#media (min-width: $medium) {
background-color: green;
}
#media (min-width: $large) {
background-color: yellow;
}
#media (min-width: $xlarge) {
background-color: blue;
}
#media (min-width: $xxlarge) {
background-color: orange;
}
}
}
Sorted it.
Was using a generic HTML boilerplate and not the full one provided by VSCode.
Added:
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and that resolved it.
I am using SCSS trying to set up some media queries for max-width: 320px and max-width: 768px
I have a div with class item-content inside an Owl Carousel slide with width set to 600px but I want to reduce the width for smaller devices. I want to use 200px for resolution 320px wide and 300px for resolution that is anywhere between 320 and 768.
This is what I'm using in my _app-responsive.scss but as you can see, I have !important set to the width of item-content because otherwise it is getting overridden even though I am on resolution of the iPhone 5 which is 320px wide.
#media (max-width: 320px) {
.home {
section#top {
.owl-theme {
.owl-dots {
top: -10%;
}
.owl-stage-outer {
.owl-stage {
.owl-item {
.item {
.item-content {
width: 200px !important;
}
}
}
}
}
}
}
}
}
#media (max-width: 768px) {
.home {
section#top {
.owl-theme {
.owl-stage-outer {
.owl-stage {
.owl-item {
.item {
h2 {
font-size: 16px;
}
.item-content {
width: 300px;
}
}
}
}
}
}
}
}
}
This is my overall app.scss
I am importing the file with the media queries last, I tried importing it before the _app-custom.scss but that didn't change anything.
#import 'app-variables';
#import '../../vendor/bootstrap-sass/stylesheets/bootstrap';
#import '../../vendor/bootstrap-sass/stylesheets/bootstrap-compass';
#import '../../vendor/font-awesome/scss/font-awesome';
#import 'app-custom';
#import 'app-responsive';
The two media queries would make width: 200px when window is between 0px and 320px but also width: 300px when window is between 0px and 768px.
To solve this you can apply width: 200px without using a media query and only when windows size is greater than 320px use width: 300px:
.item-content {
width: 200px;
}
#media (min-width: 321px) {
...
.item-content {
width: 300px;
}
}
And:
#media (max-width: 320px) {
...
.item-content {
width: 200px;
}
}
#media (min-width: 321px) and (max-width: 768px) {
...
.item-content {
width: 300px;
}
}
Should also works because your issue is that the query with the max-width: 768px is always overwriting the media query with max-width: 320px
I've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}
So, for instance I have:
#headerMain {
position: fixed;
width: 100%;
background: rgba(255,255,255,.9);
z-index: 999999999;
overflow: hidden;
}
I just want to change the position property when going to a mobile:
#media only screen and (max-width: 480px) {
#headerMain {
position: absolute;
}
}
Or do I need to specify all properties?
#media only screen and (max-width: 480px) {
#headerMain {
position: absolute;
width: 100%;
background: rgba(255,255,255,.9);
z-index: 999999999;
overflow: hidden;
}
}
Thank you in advance!!!
Yes, you can simply overwrite a single declaration when using a media query. A simple example:
#headerMain {
background: blue;
color: white;
}
#media only screen and (max-width: 480px) {
#headerMain {
background: red;
}
}
When the viewport is larger than 480px, the text will be white and the background will be blue. When the viewport is smaller than 480px (you can make this happen by just changing the size of your browser window), the background will be red, but the text will remain white.
This is because of the cascading part of CSS. In a less-than-480px-wide viewport, the element inherits both #headerMain declarations, and the more specific media query (#media only screen and (max-width: 480px)) overrides the background-color to make it red.
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}