This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
I am using the official Sass port of Twitter Bootstrap 3.3.3.
What I am trying to do is shrink the height of the navbar when the window is resized. Below is my media queries, however they don't work as I expect them to.
$navbar-height: 60px !default;
body {
padding-top: 70px !important;
}
#media(min-width: 768px) {
$navbar-height: 70px;
body {
padding-top: 80px !important;
}
}
#media(min-width: 992px) {
$navbar-height: 80px;
body {
padding-top: 90px !important;
}
}
#media(min-width: 1200px) {
$navbar-height: 90px;
body {
padding-top: 100px !important;
}
}
To make it work modify the element inside the #media query not the variable. So for example...
$navbar-height: 60px !default;
body {
padding-top: 70px !important;
}
#media(min-width: 768px) {
.nav-bar: $navbar-height + 10px;
body {
padding-top: 80px !important;
}
}
#media(min-width: 992px) {
.nav-bar: $navbar-height + 20px;
body {
padding-top: 90px !important;
}
}
#media(min-width: 1200px) {
.nav-bar: $navbar-height + 30px;
body {
padding-top: 100px !important;
}
}
Related
I have same font-size variables in my site.
I want to change value of this variables when I use media queries in scss... How can i do it...
Below way doesn't exist...
#media screen and (min-width:1000px){
$font-sm: 13px;
$font-default: 15px;
$font-md: 18px;
}
#media screen and (max-width:999px){
$font-sm: 10px;
$font-default: 12px;
$font-md: 14px;
}
Use custom properties instead.
#media screen and (min-width: 400px) {
:root {
--font-sm: 13px;
--font-default: 15px;
--font-md: 18px;
}
}
#media screen and (max-width: 800px) {
:root {
--font-sm: 10px;
--font-default: 12px;
--font-md: 14px;
}
}
body {
font-size: var(--font-default);
}
I want to show some global message on my Docusaurus site. Something like:
https://codesandbox.io/s/duudl
https://next.ant.design/components/alert/
Is this possible?
You will have to inject the DOM via scripts. An example is React Native website where they injected feedback banners at the bottom of the page - https://facebook.github.io/react-native/docs/getting-started
Look at their repo and the script they used.
Update: you can now add it to the docusaurus.config.js file:
themeConfig:
/** #type {import('#docusaurus/preset-classic').ThemeConfig} */
({
announcementBar: {
id: 'support_ukraine',
content:
'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
backgroundColor: '#20232a',
textColor: '#fff',
isCloseable: false,
},
...
You can style it with these CSS selectors in src/css/customTheme.scss:
/* Announcement banner */
:root {
--docusaurus-announcement-bar-height: auto !important;
}
div[class^="announcementBar"][role="banner"] {
border-bottom-color: var(--deepdark);
button.close {
svg {
fill: white;
}
}
}
div[class^="announcementBarContent"] {
line-height: 40px;
font-size: 20px;
font-weight: bold;
padding: 8px 30px;
a {
text-decoration: underline;
display: inline-block;
color: var(--brand) !important;
&:hover {
color: var(--ifm-color-primary) !important;
}
}
}
#media only screen and (max-width: 768px) {
.announcement {
font-size: 18px;
}
}
#media only screen and (max-width: 500px) {
.announcement {
font-size: 15px;
line-height: 22px;
padding: 6px 30px;
}
}
I am unable to change padding for one element on mobile devices. The queries are working for several properties, but padding will not work (neither will line height if I try to use that). Basic styling in custom css is:
#topright {
font-size: 20px;
letter-spacing: 4px;
color: rgba(255,255,255,1.0);
padding-top: 8px !important;
padding-bottom: 8px !important;
font-weight: 200;
}
Media query for phone is
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.header-2 .logo {
width: 250px;
}
.footer-widget ul li {
width: 100%;
}
.footer-widget ul {
padding-left: 0;
padding-right: 0;
}
div.vc_column-inner vc_custom_1476556729591 {
padding-left: 0;
padding-right: 0;
}
.footer-widget .textwidget p {
text-align: center;
}
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
The smaller padding number will not be applied. If I remove !important from main css, then the phone query gets applied to all devices. It's weird because all the other properties for the phone query are working fine.
From this helpful page on media queries, min-width: 320px means:
"If [device width] is greater than or equal to 320px, then do {...}"
In other words, the media query you think you created to target only iPhone will actually be firing for all devices which have a width of 320px or greater. Instead, I think you intended to use max-width
So use this CSS:
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
.header-2 .logo {
width: 250px;
}
...
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
And you should also remove the !important directives from your main.css file.
Building a site using Bootstrap. Having an issue with the van. I want it to collapse at 991px. Searched online and found this code, however it has changed the function of the nav as the nav wont stay open. Any ideas? The code used to override default is in my custom.css
http://nurdit.com/styleengineered/
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Try changing the CSS above to:
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-collapse.collapse.in { /* NEW */
display: block!important;
}
}
As far as I can tell, this does the trick on your site. Credit for this suggestion goes to Dave Forber , see Bootstrap 3 Navbar Collapse
In Sass is there a way to split up a list of variables / classes with hyphens?
It's a fuzzy question title so it's probably best I show what I'm trying to achieve.
In the below example I'm trying to create some utility classes that I can apply to HTML elements to help with vertical rhythm.
For example I may want to give an element a small margin that is consistent with my vertical rhythm strategy and so I'll add the class .m-t-s (which stands for margin-top-small).
I then want to output versions of those utility classes against for each media query I have for fine grain control e.g. I may want a class .m-t-s-768 which will add a small top margin when there is a minimum viewport width of 768px.
I have achieved this below, but it is a very long-winded and repetitive way of doing it. Can anyone suggest a more concise way?
Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;
$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;
Creating the classes
–––––––––––––––––––––
.m-t-s {
margin-top: $s;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-s-#{$mediaQuery} {
margin-top: $s;
}
}
}
.m-t-m {
margin-top: $m;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-m-#{$mediaQuery} {
margin-top: $m;
}
}
}
This repeats for .m-t-l too (margin top large), and then it continues for padding classes (e.g. .p-t-s and so on), so it gets to be a pretty long list of utility classes.
To programatically generate that output, you need another list and an inner loop:
$mediaQueries-px:
640,
768,
1024
;
$s: 20px;
$m: 50px;
$l: 60px;
$sizes: s $s, m $m, l $l;
#each $size in $sizes {
.m-t-#{nth($size, 1)} {
margin-top: nth($size, 2);
}
}
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
#each $size in $sizes {
.m-t-#{nth($size, 1)}-#{$mediaQuery} {
margin-top: nth($size, 2);
}
}
}
}
Output:
.m-t-s {
margin-top: 20px;
}
.m-t-m {
margin-top: 50px;
}
.m-t-l {
margin-top: 60px;
}
#media screen and (min-width: 40em) {
.m-t-s-640 {
margin-top: 20px;
}
.m-t-m-640 {
margin-top: 50px;
}
.m-t-l-640 {
margin-top: 60px;
}
}
#media screen and (min-width: 48em) {
.m-t-s-768 {
margin-top: 20px;
}
.m-t-m-768 {
margin-top: 50px;
}
.m-t-l-768 {
margin-top: 60px;
}
}
#media screen and (min-width: 64em) {
.m-t-s-1024 {
margin-top: 20px;
}
.m-t-m-1024 {
margin-top: 50px;
}
.m-t-l-1024 {
margin-top: 60px;
}
}