I have never run into this issue before, but for some reason, I cannot modify the width in my media query. In the developer tools, the width shows as being crossed out like I toggled it to not show, but that is not the case, it does it by default.
I am simple trying to change this:
div.wrapper{
display:block;
width:100%;
}
into this:
.wrapper {
width: 95%;
margin: 0 2.5%;
}
I have even tried changing my media query wrapper class to div.wrapper...but it did not help,
What would be causing this?
I think you should read this article:
CSS: Understanding the selector's priority / specificity
There's priority when you use CSS rules.
For example, .column .sponsors will have priority on just .sponsors
In css if we call an element like attribute.classname(div.wrapper) it will have more priority than calling .classname(.wrapper).
now you have two ways to solve this.
Change the calling method (use same way of calling in main-css and media-query).
Else give an adiitional property '!important' after width in .wrapper .
.wrapper {
width: 95% !important;
margin: 0 2.5%;
}
In your media query, use the same definition than previously:
div.wrapper {
width: 95%;
}
With regards to your .column .sponsors problem, you should do the same:
#media screen and (max-width: 640px)
{
.column .sponsors {
width: 90%;
}
}
This will not modify the .column declaration.
Related
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I'm trying to override a css class to improve the site when looking in a small screen. Here is the e.g.
My file:
#media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}
Core file:
.fp-roksprocket-showcase.rt-block {
margin: 0;
padding: 100px 0 80px 0;
}
This way, the DIV that I wanna override, is getting the padding of the Core file...
To be the way that I want, I couldn't put the padding style on my file. I need to "remove" this style!
How can I make this?
If you want to remove the padding put:
padding: 0
You are looking for the initial keyword. Please check MDN documentation.
The initial keyword resets the inherited style to the default style according to CSS specifications. However, this is supported since CSS3 only and it looks like you need to add workarounds for Internet Explorer.
The similar unset keyword is even worse in terms of browser compatibility but maybe better suited to what you want.
You may also want to check this question for related information.
Note: Most of the answers here think the asker wants to remove the padding. What the asker wants to do is remove the parent style (restoring the padding to what the browser would have put if the style wasn't mentioned in the first place).
How css styling occurs is all the parent styling is automatically inherited by all the children elements and if you want to override any of the parent style you then have to specify it in the child element css style.
Suppose we have
.parent{color:red;}
then all the child elements will have the css style color: red . If you want to override it in child elements then
you have to specify in child element css style color:black
Now in your case, your parent styling have padding: 100px 0 80px 0; if you do not want it in child then just do padding: 0px;
So it should look like this
#media only screen and (max-width: 480px){
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;padding :0;
}
}
Change:
#media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}
to this:
#media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
padding: 0;
}
}
You forgot to close your selector properly too.
It appears you are missing the curly brackets from your media query.
You have:
#media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}
what you should have is:
#media only screen and (max-width: 480px){
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
padding: 0;
}
}
I hope that helps.
Original CSS
.form-head {margin: 0 auto; max-width: 66.5em; padding-bottom: 5.2em; }
.footleft{ max-width: 47.0%;float:left; margin-left: 2.8em; }
.footright{max-width: 46.9%; float:right; padding-bottom: 2%;}
Media query
#media screen and(max-width: 768px) {
.form-head { margin: 0 auto !important; max-width: 56.5em !important ; }
.gradiant{min-width: 50% !important;}
.post-contents { max-width: 64.4%; }
.footleft{float:none; max-width:79%; margin:0 auto;}
.footright{float:none; max-width:83%; margin:0 auto;}
.footercontainer {margin: 0 auto; width:94%;}
}
The media query styles does not override the original css . When I add !important it's working, but I want to get the media query style, not include !important.
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.
So Remove !important
from .form-header and .gradiant in the media query code.
EDIT : replace
#media screen and(max-width: 768px)
with
#media(max-width: 768px)
I got the output by not including !important, I just place my native CSS before media query, early mention by #Big Chris..
So I'm currently working on a responsive site and i'm trying to set the styles in the media query. However, the styling in the parent css is conflicting.
The parent style sheet holds this:
.sec1 p {
text-align: left;
width: 55%;
margin-left: 8%;
float:left;
margin-top: 100px;
}
And the code for the 768 width:
.sec1 p {
letter-spacing:normal;
word-spacing:normal;
font-size: 1.1em;
width:none!important;
margin-left:none!important;
margin-top:none!important;
text-align:inherit!important;
}
As you can see, i tried to set a width:none; margin-left: none;
But I don't even know if that's proper or effective,
In short, as you can see by my blaring code what I don't want, how do I do this?
Hopefully I am being clear, thanks!!
Width none is not valid.
Set width: auto to revert the item to the default behavior
or width:0 to set it to 0-width.
Also, for !important you need a space between the end of the property value and important, like this:
margin-left: 0 !important;
I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.
the print media css that is not working is this:
#gc {
width: 100%;
}
#asideTrack {
/* width: 100%;*/
display: none;
}
.asideTrack {
/* width: 100%;*/
display: none;
}
.slideAside {
/* width: 100%;*/
display: none;
}
#slideAside {
display:none
}
Any suggestions?
In CSS lower rule overwrites the top if they have the same priority (depending on selector)
You write your common css not in #media block, and it is lower then your #media print block, so it overwrites your #media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of #media print block where you say it is 100%).
I hope it is helpful.
Solutions
In your css file you may place media print block to the end of file.
Add !important directives to some rules in media print block. ie:
p {
color: red !important;
}
Place your special css for screen in media screen block.