I'm trying to display a 100% width iframe on my WordPress site with an existing media query and I'm trying to figure out if I can target the iframe id to be unaffected by the original media query or combine it with a unique media query to get the full frame effect with the iframe only.
This is the original code
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 85%;
max-width: 85%;
}
}
and this is how I need it to function, but only with id tag #frame
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
}
I feel like this is a few seconds from complete, but I'm not sure how to finish it.
Your questions is not very clear. Then if your unique iframe ID is #frame, you can target it:
#media only screen and (max-width: 767px) {
/* your iframe */
.responsive #frame {
width: 100%!important;
max-width: 100%!important;
}
}
You can add more rules and you can target other selectors inside this media query too…
You missed a } at the end, as well as you can tag multiple elements onto CSS declarations, so you could do this if you wanted the #frame element to have the same properties, so your current code looks like this:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
Then you could tag on another element with a , like so:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container, #iframe { // <-- see the , and the element?
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
I know this is long winded, but I tried to go in depth rather than just giving you the example so you fully understood, hope I helped :)
Related
When i make the responsive of my web-site,
some media query works but the last ones don't.
/* work */
#media screen and (max-width: 1030px){
.section2 .content-card .title-card img {
max-width: 200px;
}
.section1 {
height: 1000px;
}
}
/* doesn't work */
#media screen and (max-width: 1030px){
.section2 {
padding-top: 15vh;
}
}
#media screen and (max-width: 260px){
.section2 {
padding-top: 6vh;
}
.section1 {
padding-top: 3vh;
}
}
In my code there are many more media queries but I had to remove them because of the code limits on the question.
Is there a limit to the number of media queries per file?
See attached picture. This shows that it is working.
In fact to do the responsive, I use the responsive mode with the devtools
is that why its not workingscreen shoot
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I am using a WordPress theme called Spacious. I have set a site logo but I can't seem to make the logo responsive. The logo only responds to certain media queries, but none for mobile screen sizes.
I changed the site logo's location from the center below the header to over the header to the left. I think that this may be the issue but I'm not sure. Am I doing something wrong? How can I go about making my logo responsive? The link to my site is: davenport.ryannemurphy.com. The CSS code I am using for the logo is below:
#media only screen and (max-width: 600px) {
.custom-logo {margin-top: 25px;
position: absolute;}
#media only screen and (max-width: 768px) {.header-image {height: 100px;}
.custom-logo {width: 50%;
margin-top: -20px;
}
}
#media only screen and (max-width: 900px) {
.custom-logo {width: 50%;
position: relative;}
}
#media only screen and (max-width: 1100px){
.custom-logo {width: 50%;
margin-top: -20px;
position: relative;
}
}
#media only screen and (max-width: 1500px){.custom-logo{margin-left: 100px;}}
#media only screen and (max-width: 1650px){.custom-logo {margin: 30px; }}
#media only screen (min-width: 1651px) and (max-width: 1850px){.custom-logo {width: 90%;}}
#media only screen and (max-width: 1950px){
.custom-logo {margin-left: -100px;
margin-top: -98px;
position: absolute;}
}
I believe you're missing a closing bracket ("}") in line 3 in the CSS you attached.
Use an online CSS formatter (for example, https://www.cleancss.com/css-beautify/) to format your CSS code and you'll see that most of your media queries are actually below the first one in hierarchy because of that missing curly bracket.
Not sure this is causing the issue, but it's definitely something that can confuse the browsers and cause bugs.
I was having the same problem in Sinatra theme.
I ended up using just width and height but I had to put !important after each.
Here is the css I used:
#media screen and (max-width: 960px) {
img[itemprop="logo"] {
width: 281px !important;
height: 145px !important;
}
}
You have an < img width="450" height="92" .../> hardcoded into your html. I think you need to remove the height and width attributes on the img tag.
I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}