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;
}
}
Related
I want to change the font size of a table header.
It should be large when the application is view at the desktop and become smaller when shown on a mobile phone.
th {
#media screen and (max-width: 699px) {
font-size: xx-large;
}
#media screen and (max-width: 700px) {
font-size: small;
}
}
I am not quite sure if this is the right way.
you have to write the TH style inside the media syntax
For more details
#media only screen and (max-width : 700px) {
th
{ font-size: small;
}
}
You have to write this way
th {
font-size: xx-large;
}
#media screen and (max-width: 699px) {
// write any CSS code here.
th {
font-size: xx-large;
}
}
The way to do this is to style the th element as you would have it on the large screen and then set the media query to apply a different style for smaller screens.
th{
font-size: large-font-size;
}
Then now write the different styles to be applied on smaller screens.
#media screen and (max-width: 700px) {
font-size: smaller-font-size;
}
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) {
I'm trying to move from Bootstrap to Foundation, but I'm having an issue in trying to identify how to exactly change the breakpoint for the topbar in Foundation. I'm using a a CDN version of the minified CSS for Foundation, so I do NOT have access to the settings SASS file to modify this. Is there a quick CSS override workaround? So far my searches on here, and Google, haven't turned up a working solution.
Import another CSS file below the minified Foundation CSS that will target the topbar
<link rel="stylesheet" href="foundation-min.css">
<link rel="stylesheet" href="override.css">
So, for example, if .topbar has margin: 1px; override it on override.css by setting another margin: 2px; attribute there.
This post will help
https://stackoverflow.com/a/31511646/6294600
Have you checked this one https://zurb.com/university/lessons/change-foundation-s-default-breakpoints
EDIT: a hint here...
look for the .show-for-medium class... I hope you know what to do after that... Don't give up...
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
#media screen and (min-width: 40em) {
.hide-for-medium {
display: none !important; } }
#media screen and (max-width: 39.9375em) {
.show-for-medium {
display: none !important; } }
#media screen and (min-width: 40em) and (max-width: 63.9375em) {
.hide-for-medium-only {
display: none !important; } }
#media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
.show-for-medium-only {
display: none !important; } }
#media screen and (min-width: 64em) {
.hide-for-large {
display: none !important; } }
#media screen and (max-width: 63.9375em) {
.show-for-large {
display: none !important; } }
#media screen and (min-width: 64em) and (max-width: 74.9375em) {
.hide-for-large-only {
display: none !important; } }
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
.show-for-large-only {
display: none !important; } }
These parts can be found in
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css
Change the values, I hope this answers the question. Happy Coding...
LAST BIT OF INFO:
change the min-width size
#media screen and (min-width: 64em) {
.top-bar{
display:none;
}
}
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 set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.