I am trying to use media query in component's styles, but when I resize the window, nothing is happens
#media query screen and (max-width: 768px) {
/* Here are some changes*/
}
It doesn't work at all, do I need to load some modules or how to fix it. Any help appreciate.
Use following syntax. This is the correct syntax for media query.
Hope this helps!!
#media only screen and (max-width: 768px) {
/* Here are some changes*/
}
You might want to write different media queries for each breakpoint. Also, the syntax is like below
/* Tablet*/
#media screen and (max-width: 768px) {
/* Here are some changes*/
}
/* Mobile */
#media screen and (max-width: 320px) {
/* Here are some changes*/
}
remove query
#media screen and (max-width: 768px)
{
/* Here are some changes*/
}
A bit simpler way,
#media (max-width: 768px) {
/* Here are some changes*/
}
Related
I tried searching on the internet for an answer and I couldn't find one that worked. I want to make my site responsive to mobile where the li elements become smaller on the screen when vertical. This is my code, I did put in a link to the style sheet where it is and did put the meta viewport part in the heading section.
#media only screen and (max-width: 400px) {
.list {
width: 30px; height: 20px;
}
}
Here are some common standard points:
#media (min-width: 320px) { /* for iPhones and smartphones */ }
#media (min-width: 481px) { /* for larger phones and small tablets */ }
#media (min-width: 600px) { /* for tablets */ }
To be honest, it would be really helpful if there was such thing as #media (min-size: iPhone) or #media (min-size: windows_tablet); it would make it a whole lot easier.
I want to hide the facebook like box with CSS.
I used this:
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
but this works but only for big displays and it's still showing on mobile.
When I resize the webpage on desktop and make it smaller in width, there is a tipping point where the responsive changes and the fb-like-iframe is displayed.
I tried using this to hide it on mobile as well but no success do far:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
Instead of min-device-width and max-device-width you can use min-width and max-width.
Or better result you can use only max-width..
/* Smartphones (portrait and landscape) ----------- */
#media only screen (max-width : 480px) {
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
}
currently you are using this:
#media screen and (min-width: 768px)
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
just change (min-width: 768px) to (max-width: 768px)
let me know if this is what you need
There was conflict of style.css with a minified version that was causing it not to work only on mobile.
.fb-like-iframe.fb_iframe_widget {
display: none !important;
}
I've fixed it and now the original code (above) works on both desktop and mobile. Thanks
So my question is when I'm writing CSS you can use #media and then enter a max and min width like so:
#media (min-width: 0px) and (max-width: 767px) {
#social-icons {
padding-left: 125px;
}
}
But I was wondering if you can do the same but instead of using pixels use bootstraps column method, so it would be like (min-width: col-md-3) or something like this, is that possible?
Yeah you can! So according to the bootstrap website you can use media queries with the grid system!
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
This is all code from the CSS page of bootstraps website, here.
I am creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...
For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.
Have I missed anything?
#media only screen and (min-width: 1024px) {
/*styling here*/
}
#media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}
#media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}
Check Out this,
and let me know whether it is working or not
You need to specify device width.
I think you may need to specify it as 'min-device-width'.
#media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
/*Mobile styling here*/
}