I'm sure there is an easy answer to this one...
Using Twitter Bootstrap, I have this in my style.css.erb file:
.login_page body {height:100%;
max-width:inherit;
margin:0 20px;
background-image: url(<%= image_path 'oap_dotlogo.png' %>);
background-repeat: no-repeat;
background-position: 5%, 80%;
background-color: #E3F5FD;
}
That is great, except on a phone where the background logo is a pain in the ass. I'd like to drop that logo on a phone.
I see that bootstrap-responsive.css already defines the .hidden-phone:
#media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
So, how do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?
I've tried a few permutations of adding .hidden-phone in the style.css.erb but nothing seems to work - I must have the syntax wrong.
Thanks!
Dave
Sounds like you're confusing CSS and HTML here. When you say:
[H]ow do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?
... you can't add a class to a CSS declaration. You don't actually want to hide your element (the body in this case), rather at small screen sizes you want to modify the background property. So, within the media query that you already have, add this:
#media (max-width: 767px) {
.login_page body { background-image: none; }
...
all your other small-screen styles
}
Then, the default will be to show your background-image and you are removing it for small screens. If the image is large, you might consider a mobile-first approach. i.e. do the opposite, as #po228 mentioned - only add the background-image for larger viewport widths.
Looks like you were very close. To define styles that won't be displayed on a phone you need to use min-width, not max-width. Try the following:
#media only screen and (min-width: 768px) {
.login_page body {
background-image: url(<%= image_path 'oap_dotlogo.png' %>);
background-repeat: no-repeat;
background-position: 5%, 80%;
}
}
Related
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
I'm having trouble with the main menu in the header of my Wordpress site here: http://eptestdev.us/qa
The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.
My CSS looks like this, but it is not working:
#media screen and (max-width: 900px){#access {display:none;}}
Not sure how I can get it to collapse otherwise. Any help would be appreciated.
You just need to add the !important tag to your css, so that it overrides everything else. Like this:
display: none !important;
I tested this on your site and it worked.
In general it's good to avoid using !important - and instead use CSS's natural way of determining which rule is used.
Earlier rules (at the top of the stylesheet) are overruled by later ones:
.box { width: 200px; border: 1px solid black }
.box { width: 500px; }
The second rule will override the previous width declaration, giving you a 500px box with a black border.
In your case, the reason your media query rule isn't working is because it occurs before the 'normal' one. If you switch:
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
with
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
This rule will work without needing to use !important.
There are other ways to make rules keep: for instance, a more specific rule will be used before one that is more generic:
#menu .submenu-item { color: green; }
.submenu-item { color: red; }
As long as your .submenu-item divs are within a '#menu' div, they'll be green, because the subsequentcolor: red` declaration doesn't have the same level of specificity.
You can read more on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am currently working on a website using Joomla and I am using SP Page Builder extension to construct my content pages. I have a background image on one of these content pages and it just messes up the mobile display of the webpage so i want hide the background image on mobile devices. I have used this css code which has worked for me before (on pages without SP Page Builder) but it seems not to be working, here is the code:
#media all and (max-width: 768px) {
section.sppb-section.bg {
background-color: #ffffff;
background-image: none;
}
}
here is the auto generated HTML code of the element with a background image:
This is a screenshot of page the layout of a row with two columns, somehow this row and columns are constructed using <div></div> tags
Is there a solution to this or a work around. Thank You.
In your html you have inline style which force the background to be there so you will need to use !important to force background-image to be none
#media all and (max-width: 768px) {
section.sppb-section.bg {
background-color: #ffffff !important;
background-image: none !important;
}
}
Just have the background image display on screens > 768px, not the other way around.
.bg {
background:#fff;
}
#media screen and (min-width:768px){
.bg {
background-image:url(img.jpg);
}
}
Inline CSS is always take preference over external css that's why your css code is not working. Try to keep that inline css style code in external css file.
It looks like the bg image is being added in the style attribute which will override your css class. You'll need to decorate your css with important.
#media all and (max-width: 768px) {
section.bg {
background-color: #ffffff !important;
background-image: none !important;
}
}
I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.