Alright, so, I'm hoping this is an easy question, but I can't for the life of me get it working.
The situation:
I've made some changes in the Additional CSS portion of the customize feature on my Wordpress theme.
I've taught myself a few things, and I was able to edit the margins and whatnot of the footer widgets.
They look great on desktop, not so much on mobile.
From research, I've found that you can call out #media criteria, theoretically making two sets of margin settings: one for a max screen size you set for mobile, and one for desktop.
Here's what I've been able to come up with:
#text-5 .widget-title{
margin:0px 0px 10px 0px}
#text-6 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .widget-title{
margin:0px 0px 10px 0px}
#custom_html-2 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .footer-row-2-widget.widget.widget_text{
width: 100px;}
#text-7 {
width: 200px;
margin:-10px 0px 5px -10px}
#text-5 {
width: 200px;
margin:-10px 0px 5px 0px}
#text-6 {
width: 300px;
margin:-10px 0px 5px -50px}
#custom_html-2 {
width: 350px;
margin:-10px 0px 5px -50px}
This seems to be working so far. (I know negative pixels is not ideal, but I can't figure out how to otherwise move the columns to where I want them.)
So, how do I call out #media in the Additional CSS? Nothing I'm finding is helping to show what needs to be done for the Additional CSS box itself, but rather for the editor files, which I don't want to touch (aka break).
Thank you!
The site in question: http://q6q.118.myftpupload.com/
You need to add the media queries to you css file. Basically they are organized for breakpoints in pixels depending of the screen size, which will apply the rules it has inside.
Here are some of the most common breakpoints (you can make your own to support as many options as your want). I hope that helps.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Related
Consider the following HTML:
<div id="x">A</div>
And say I want to apply the following styling rules to it:
If the screen width is 600px or more, I want to apply a box shadow.
If the screen width is any less than 600px, I want to apply a solid border.
My intuition was to write queries like so:
#media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
#media not (min-width: 600px)
{
#x { border: solid 1px #666; }
}
<div id="x">A</div>
This works perfectly in Firefox, but in Chrome and Safari, the not query is never applied.
I can think of three other options:
#media (max-width: 599px)
This has a chance of applying neither style if the browser zoom level isn't 100%, see this GitHub issue.
#media (max-width: 600px)
This is guaranteed to apply both queries when the window width is exactly 600px.
Dumping one of the styles in the default ruleset and "undoing" everything it does manually with <attribute>: default everywhere.
This is simply not practical.
Is there any way I can accomplish the above without missing edge cases?
I feel like this would have been asked before, but you can't Google for not queries because all you'll find is "not working".
According to the MDN docs:
Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Chrome/Safari seem to like it better if you add an "all" media type after the "not"
#media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
#media not all and (min-width: 600px)
{
#x { border: solid 1px #666; }
}
<div id="x">A</div>
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
For an application I want to show custom scrollbars for desktop browsers only.
Normally one would use media queries to target small devices and adapt the layout to the available width of the screen. But this time I just don't want scrollbars for mobile and tablet devices. I don't know how I could solve this, because small desktops (1024 x 768) use the same resolution as some tablets do.
Is there a hack or something, so I could do something like:
#media (target-real-desktops-only) {
::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar-thumb {
background-color: #959595;
border-radius: 40px;
border: 5px solid transparent;
background-clip: padding-box;
}
}
There is no way to tell for sure with a media query. In my opinion the best way is to differentiate by detecting if the device is a touch device or not. You can use Modernizr for that. Modernizr will automatically add a .touch or a .no-touch class to the html. You can then add styling accordingly.
Another option is doing this manually. Like so:
document.querySelector('html').className +=
("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch ? ' touch' : ' no-touch';
And then add your styles via the same manner
.no-touch ::-webkit-scrollbar {
width: 17px;
}
.no-touch ::-webkit-scrollbar-thumb {
background-color: #959595;
border-radius: 40px;
border: 5px solid transparent;
background-clip: padding-box;
}
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Media Queries: How to target desktop, tablet and mobile?
I want to shift a jquery banner with margin-top: 81px, only for small screens , the medium and extra small screens are looking great.
My media query is:
#media screen and (min-width:780px and max-width:980px) {
.abr {
margin: 81px 0px 10px -16px;
}
}
but is not working for me please help me out of this...
min-width and max-width are seperate queries, so they need to be made seperate with parenthesis:
#media screen and (min-width:780px) and (max-width:980px) { .. }
I'm designing a responsive website and after change my cellphone orientation from portrait to landscape and then to portrait the CSS stop working.
Initially the css that I apply to the the 320-480 resolution loads very well in my portrait screen and also in the landscape but when I change it back to portrait the css stop working, is like is not loading the css.
What's the problem????
When using css media queries it is unnecessary to assign a min width, you can use simply max width and have multiple queries if you want the layout to change at a different point. I can't explain why your css works initially but then changes when you turn the screen a couple times but here is some good css media query practice and syntax that could solve your problem:
#media only screen and (max-width: 320px){
/*Some css styling for widths below 320 pixels*/
}
#media only screen and (max-width: 480px){
/*Some css styling for widths below 480 pixels.
Keep in mind that this css will only be applied for viewports between 320
pixels and 480 pixels*/
}
It is not necessary to use device-width when you can simply use width. Also the 'only screen and()' is good practice for detecting mobile viewport widths in css. I hope that this helps and your problem is solved.
The css
#media all and (min-device-width: 320px) and (max-device-width: 480px){
#reviews{
display: none !important;
}
.footer {
border: 1px solid #CCCCCC !important;
}
ul,ol{
margin-left: 0px!important;
}
.bottom-menu ul{
margin-left: 25px !important;
}
#side-quote{
display: none;
}
#export-dption{
float: bottom;
}
#export-request{
float: top;
}
.panoramic-pic{
padding: 0px !important;
}
#googleMap{
display: none;
}
.quote-index{
width: 100% !important;
background: red !important;
}
}
and the cellphone is a LG Optimus F3 and the browser is chrome.
as you can see in the selector .quote-index is set the background to red, initially it loads in red when the phone is in portrait mode but when i change it to landscape an then back to portrait is like that selector doens't exits.