This site uses the style sheet http://staging.taxrusaccounting.com.au/wp-content/themes/bones-new/library/css/style.css which contains the media query:
#media only screen and (min-width: 768px) {
.nav li {
float: left;
position: relative;
}
}
However, the .nav li rule is not present in Chrome Inspector when the viewport is wider than 768px.
Help appreciated.
Found a typo
#media screen and (max-width: 600px} {
should be:
#media screen and (max-width: 600px) {
Related
I stuck to hide div between two screen size. like I want to hide div between screen sizes 550px - 910px with the following media query.
#media only screen and (min-width: 550px) - (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
use the following syntax to do it:
#media (min-width: 550px) and (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
I need to to have the mobile menu appear at a 750px width in Twenty Seventeen.
Just apply css media query to your style. just like this.
Reference link: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
#media screen and (max-width: 1024px) and (min-width: 751px) {
.menu { display: none; }
}
#media screen and (max-width: 750px) {
.menu { display: block; }
}
I'm attempting to write media queries for a site built using HubSpot CRM and my queries are not doing anything. I've added the <meta name="viewport" content="width=device-width" /> in my head and the following css:
#media all and (min-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
this is supposed to change the font-size of the navigation links so they don't break to a new line - http://www.steelbridgeins.com/
please help! -_-
You can remove all for the device attribute as it is the default and I think you mean to use max-width instead if you are trying to target all screen-widths below 1045px.
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
I believe this problem is occurring due to the nesting of media queries. Currently, in style.min.css, you are using:
#media (min-width: 481px) and (max-width: 767px) {
/* some stylings */
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
}
If you move the media query you desire outside of the other media query, as shown below, this should resolve your issue.
#media (min-width: 481px) and (max-width: 767px) {
/* some stylings */
}
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I have a problem when I use media query in css3: without screen, meida query doesn't work.
Here is code:
.side-menu {
position: fixed;
...
display: none;
margin-right: 0;
#media screen and (min-width: #screen-xs) {
display: block;
}
#media and (min-width: #screen-md) {
right: 8.1%;
}
}
Problem: the first media query works and the seconds doesn't. If I remove the screen and the first doesn't work either.
SO, could anyone help me?
You should remove the and in this line:
#media and (min-width: #screen-md)
To become:
#media (min-width: #screen-md)