Is it possible to get the current screen mode without having to code a function which works with media queries?
e.g. I have a container-fluid div with class chartContainer.
.chartContainer {
padding-top: 20px;
padding-bottom: 50px;
padding-left: 120px;
padding-right: 120px;
}
But I only need the class chartContainer if the screen size is not xs or sm.
Are there bootstrap methods to find this out, without having to code own functions?
e.g. I would do something like this, which is quick and dirty but should work if the window size changes:
setInterval(function() {
if (BOOTSTRAP_CURRENT_SCREEN_MODE == 'xs' || BOOTSTRAP_CURRENT_SCREEN_MODE == 'sm') {
$(".container-fluid").removeClass("chartContainer");
} else {
$(".container-fluid").addClass("chartContainer");
}
},100);
Is there something like BOOTSTRAP_CURRENT_SCREEN_MODE?
How would I achieve my goal the best way?
Media queries are the easiest way to do this.
/* col-md-* and col-lg-* */
#media (min-width: 992px) {
.chartContainer {
padding-top: 20px;
padding-bottom: 50px;
padding-left: 120px;
padding-right: 120px;
}
}
/* col-xs-* and col-sm-* */
#media (max-width: 991px) {
.chartContainer {
/* some other measurements here */
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
}
<div class="chartContainer">...</div>
if you want to get bootstrap's breakpoints in JS , use this :
var lg = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-lg');
if (window.matchMedia("(min-width: "+lg+")").matches) {
/* do something */
}
repeat that for the other breakpoints and tweak it to your needs,
here's a list of the Availbale variables ( custom properties )
Media queries would be better , you can use it like :
#media (min-width: var(--breakpoint-lg) ) { ...
Related
The mobile nav icon disappears just fine to reveal the desktop nav when I expand the window, but the mobileNavSections div doesn't disappear when it's greater than the specfied screen width. The toggling function works as intended.
function displayMobileNav(){
var x = document.getElementById("mobileNavSections");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobileNav {
display: none;
}
#mobileNavSections {
display: none;
background-color: white;
position: fixed;
z-index: 1;
margin-top: 60px;
width:100%;
height: flex;
}
#mobileNavSections a {
display:block;
color: black;
margin: 5%;
text-decoration: none;
font-size: 17px;
opacity:0.5;
}
#mobileNavSections a:hover {
opacity: 1;
}
#media only screen
and (max-width: 768px){
.mobileNav{
display: block;
}
.mobileNav img {
height: 30px;
}
.mobileNav:hover {
cursor: grab;
}
}
<nav>
<div class="mobileNav" onclick="displayMobileNav()">
<img src="images/menuicon.svg">
</div>
</nav>
<div id="mobileNavSections">
About
Contact
中文
</div>
Adding this css media query should finish hiding the nav part that you are not covering with the JS
#media screen and (min-width: 769px){
#mobileNavSections{
display:none;
}
}
I would definitely recommend more of a mobile first when putting together the css. Media queries and overrides can quickly become a headache. Here are some tips and further reading:
Mobile first CSS is written like this:
Styles for mobile and styles that are common to all screen sizes
(no media query)
[icon name=icon-arrow-down]
Media query with a smallish min-width breakpoint
e.g. #media (min-width: 400px)
[icon name=icon-arrow-down]
Media query with a slightly larger min-width breakpoint
e.g. #media (min-width: 600px)
[icon name=icon-arrow-down]
Media query with a larger still min-width breakpoint
e.g. #media (min-width: 960px)
One way to think of it is that you start with a mobile base and build up (or out, if you think in terms of widths).
https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
I'm using Grunt to remove unused CSS on my page.
Everything works pretty good, but unfortunately sometimes a few
code snippets get removed, although being crucial for the website.
I would like Grunt to ignore all #media (min-width: ...) CSS Rules,
but I don't know how to phrase that in my Gruntfile.JS.
For Example:
styles.css
#media (min-width: 1025px) {
.col2-set {
width: 62.2% !important;
float: left;
margin-top: 45px;
padding: 0 90px 0 10px; }
#order_review {
width: 37.8%;
float: right;
margin-top: 45px; } }
It's probably pretty simple, but I still didn't find a solution yet.
Can anyone give me a hint?
Thanks a lot!
Gruntfile.js
uncss: {
dist: {
options: {
ignore : [
/expanded/,
/js/,
/wp-/,
/align/,
/admin-bar/,
/\w\.in/,
/.*footer.*/,
/.*footer*/,
"^meta\..*",
"^\.is-.*",
"/^#js/",
".fade",
".nav",
".collapse",
".collapsing"
],
Add the comment: /* uncss:ignore start */ to the line preceding your #media ... query in the styles.css file, and also add the closing comment /* uncss:ignore end */ to the next line following the end of the #media query.
Any rule(s) between those two comments will be ignored.
Example of styles.css:
/* uncss:ignore start */
#media (min-width: 1025px) {
.col2-set {
width: 62.2% !important;
float: left;
margin-top: 45px;
padding: 0 90px 0 10px;
}
#order_review {
width: 37.8%;
float: right;
margin-top: 45px;
}
}
/* uncss:ignore end */
I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid
I have created an sample code to see an image in different resolution such as tablet, mobile and desktop, the code is working but actually I want to see all these resolution within the desktop itself which is not working .
My code is as given below
Can anyone please tell me some solution for this.
JSFiddle
Css
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box1 {
width: 480px;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box2 {
width: 50%;
padding-bottom: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box3 {
width: 33.3%;
padding-bottom: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box4 {
width: 25%;
padding-bottom: 25%;
}
}
You should read up on Media Queries. Media Queries are used to "activate" or "deactivate" CSS Rules. You are trying to create different div sizes, but your CSS rules are not all "activating."
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
The CSS below should accomplish what you are trying to do.
CSS:
img {
max-width:100%;
}
.box1 {
width: 480px;
padding-bottom: 10%;
}
.box2 {
width: 650px;
padding-bottom: 10%;
}
.box3 {
width: 1050px;
padding-bottom: 10%;
}
.box4 {
width: 1290px;
padding-bottom: 10%;
}
DEMO: http://jsfiddle.net/p5nxox41/3/
Why to make 4 class of same sized image? You can do just with 1 class with max-width: 100% and will be responsive to any resolution,
If you want to vary the size of the conainer (desktop, tablet, smartphone) on desktop it's self, you can create classes with the specific sizes and to change them based on your requirements.
In the snnipet below I use classes from the #hopkins-matt answer.
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
// just to show image on different sizes
var $container = $("#container");
$(".view").click(function() {
changeClass("");
});
$(".view-s").click(function() {
changeClass("container-smartphone");
});
$(".view-t").click(function() {
changeClass("container-tablet");
});
$(".view-sd").click(function() {
changeClass("container-sm-desktop");
});
$(".view-md").click(function() {
changeClass("container-md-desktop");
});
function changeClass(className) {
$container.removeClass();
$container.addClass(className);
}
.box {
max-width: 100%;
padding-bottom: 100%;
}
/* Smartphone view: 1 tile */
.container-smartphone { width: 480px; }
/* Tablet view: 2 tiles */
.container-tablet { width: 650px; }
/* Small desktop / ipad view: 3 tiles */
.container-sm-desktop { width: 1050px; }
/* Medium desktop: 4 tiles */
.container-md-desktop { width: 1290px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" onchange="loadFile(event)">
<br/>
<br/>
<b>Choose Size:</b>
<a class="view" href="#">Normal</a> |
<a class="view-s" href="#">Smartphone</a> |
<a class="view-t" href="#">Tablet</a> |
<a class="view-sd" href="#">Small Desktop</a> |
<a class="view-md" href="#">Container Desktop</a>
<br/>
<div id="container">
<img id="output" class="box" />
</div>
This seems to work:
/* Smartphone view: 1 tile */
.box1 {
display: block;
width : 480px;
}
/* Tablet view: 2 tiles */
.box2 {
display: block;
width : 650px;
}
/* Small desktop / ipad view: 3 tiles */
.box3 {
display: block;
width : 1050px;
}
/* Medium desktop: 4 tiles */
.box4 {
display: block;
width: 1290px;
}
JSFIDDLE DEMO
I'm not sure if this is possible, but I'm just wondering if there's a more sophisticated way of achieving the following media queries: jsFiddle: http://jsfiddle.net/neal_fletcher/XMmyA/
CSS:
.block {
position: relative;
width: 1000px;
height: 100px;
background: red;
margin: 0 auto;
}
#media only screen and (max-width: 1000px) {
.block {
width: 750px;
}
}
#media only screen and (max-width: 750px) {
.block {
width: 500px;
}
}
#media only screen and (max-width: 500px) {
.block {
width: 250px;
}
}
Thus instead of declaring a different media query every 250px, is there a better way to achieve this with css or jquery? So every 250px, the .block width is reduced by 250px. Any suggestions would be greatly appreciated!
You can use the css preprocessor sass for this, along with a for loop.
#for $i in 1 through 3 {
#media only screen and (max-width: (5-$i) * 250px) {
.block {
width: (4-$i) * 250px;
}
}
}
If you want to skip using media queries, why not just set the width of your block using a percentage (demo):
.block {
width: 75%;
min-width: 250px;
height: 100px;
background: red;
margin: 0 auto;
}
<script>
$(function() {
var windowsize = parseInt($(window).width());
var block = parseInt($(".block").outerWidth(true));
if(windowsize <= block && windowsize%250==0) {
$(block).css('width',windowsize-250+"px");
}
});
</script>