i'm currently working to develop a WordPress theme, but when i put the first #media query in the style.css file, just the first one there is not working. All others #media from the second is work fine! the problem is with first one only.
Here i put my current work, there is a problem with coding web standards or something like that on my following code?
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
#media screen and (max-width: 991px) {
.hfeed{}
#content {
width: 100%;
overflow: auto;
}
.content-area {
padding: 8% 3%;
width: 63%
}
#header-sidebar p.site-description {
font-size: 120%;
}
}
this is just a little part of my work.
When i make a copy of it, it works perfectly, though is the same #media content:
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
Why?!
For anyone seeing this question, it has been answer in the comments:
"Most likely a syntax error before the code you posted."
Related
Second media querie works fine - (min-width: 601px) and (max-width: 992px) - but the first on just does not work - (max-width: 600px).
Am i missing something? Cause even if i add min-width to first one it still does not work.
.center {
font-size:70px;
color:white;
position: absolute;
height: 50px;
top: 40%;
left: 30%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
font-family: "Josefin Sans";
font-weight: bold;
}
#media only screen and (max-width: 600px){
body {
background-color: olive;
}
.center{
margin-left:-135px;
font-size:60px;
}
}
#media screen and (min-width: 601px) and (max-width: 992px){
body {
background-color: blue;
}
}
You have some dot in your code remove it (see image)
Here is working one:https://jsfiddle.net/tben7qz8/4/
You can try #media screen and (max-width: 600px) without only
There was a hidden symbol behind the brackets. Noticed that when i posted the code.
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
I added the following custom CSS to my wordpress theme to change the location of the menu on the mobile version of the site:
#media (max-width: 767px) {
.mob-nav {
top: 25% !important;
}
I then added this code to adjust the margins on the logo for the full desktop version of the website:
#media (min-width: 992px) {
.right-menu .logo img {
margin-top: -15px !important;
}
#media (min-width: 768px) {
.right-menu .logo img {
margin-bottom: -5px !important;
}
When I added the second bit of code it overwrites the CSS I added for the menu. I know they're conflicting somehow but I'm not sure how to fix it.
Thanks
Try this:
#media (max-width: 767px) .mob-nav { top: 50% !important; }
#media (min-width: 992px)
{
.right-menu .logo img
{
margin-top: -15px !important;
}
}
#media (min-width: 768px)
{ .right-menu .logo img
{
margin-top:0px !important;
margin-bottom: -5px !important;
}
}
I got it working, I change the top portion of your code to:
#media (max-width: 767px)
{
.mob-nav
{
top: 25% !important;
}
}
I guess it was missing a { before .mob-nav
Thanks for the help!
I've got the following two media queries:
#media (max-width: 800px) {
.login{
margin-top: 5%;
}
}
}
#media (max-width: 204px) {
.login{
text-align: center;
margin-right: 0%;
}
}
}
Desktop to mobile
When commenting out the top query the bottom one executes
When applying the bottom query styling in the developer tools it works
I've read this about queries: https://css-tricks.com/logic-in-media-queries/
I must not understand something right.
Looks like you've got one too many closing braces which might be messing things up.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
You have added a extra closing braces. Please remove it.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
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%;
}
}