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>
Related
I can find multiple half solutions, but I am looking for a complete solution to my issue. I have a div that I would like to be centered in the screen with a fixed aspect ratio, that div should in essence always be completely visible, so that div is always the largest it can be whilst keeping the aspect ratio. regardless of resizing the window vertically and horizontally.
There is a codepen here: https://codepen.io/william-bang/pen/ZjyWRd
That I created, this only solves the issue horizontally but not vertically. I have managed to get it working with and but sizing behaves differently for that. I am looking for a CSS solution, although I am open to a JS solution, if anyone is absolutely sure that no solution exists.
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 40%;
height: 100%;
margin: auto
}
.img {
padding-top: 50%;
width: 100%;
background: #ccc;
text-align: center;
}
<div class="wrapper">
<div class="img">
**IMG HERE**
</div>
</div>
I would be grateful for any suggestions, this has had me stumped for many hours. thanks in advance :)
Update, the div needs to maintain its aspect ratio on a varying page and at all times be its own maximum size.
#Grenther Thanks for your response, I tried modifying the answer you gave to do it purely in CSS and not having to use a CSS preprocessor. That went really well, until I realized that CSS media queries does not support standard CSS variables, otherwise the method you proposed would have been possible without SCSS but perhaps you already knew that.
:root {
--ogW: 1600;
--ogH: 900;
--ratio: calc( var(--ogW) / var(--ogH));
}
body {
width: 100%;
height: 100%;
}
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
#media screen and (max-width: 177vh) {
width: 90vw;
height: calc( 90vw / var(--ratio));
}
#media screen and (min-width: 177vh) {
width: calc( 90vh * var(--ratio));
height: 90vh;
}
}
.div {
width: 100%;
height: 100%;
background: red;
text-align: center;
}
<div class="ratio">
<div class="div">
Hello!
</div>
</div>
Final Update:
It turned into a SCSS question, with any input for variable width or height it can be done like this:
http://jsfiddle.net/832v5f0L/41
$div-width : 1600;
$div-height : 900;
$ratio: $div-width / $div-height;
#media screen and (max-width: (100 * $ratio) + vh) {
width: 100vw; // always 100vw to fill
height: (100 / $ratio) + vw; // 100 / ratio
}
#media screen and (min-width: (100 * $ratio) + vh) {
width: (100 * $ratio) + vh; //100 * ratio
height: 100vh; // always 100vh to fill
}
Updated answer:
Media query portrait automatically activates when width is smaller than height. Which makes sure we can use the vh and vw to obtain the maximum possible size without reaching an overflow.
The ratio between the width and height will make sure you can get a fixed aspect ratio.
body {
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
100vh * (100 / height)
with hright 50:
100vh * 100 / 50 = 200vh
*/
#media screen and (max-width: 200vh) {
.wrapper {
width: 100vw;
height: 50vw;
}
}
#media screen and (min-width: 200vh) {
.wrapper {
width: 200vh;
height: 100vh;
}
}
.img {
/* padding-top: 50%; */
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
background-img: url()
}
<div class="wrapper">
<div class="img">
**IMG HERE**
</div>
</div>
Update:
min - max width queries
See the below code snippet. As you adjust the wrapper width, the img will scale to fit while maintaining it's aspect ratio
The img will also be vertically centered and horizontally within the .wrapper element
* {
box-sizing:border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 50%;
height: 100%;
margin: auto;
position: relative;
}
.img {
max-width: 100%;
max-height: 100%;
padding:20px 40px;
background:grey;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: fit-content;
width: fit-content;
margin: auto;
transform: translateY(-50%);
}
.img img {
max-width: 100%;
height: auto;
max-height: 100%;
}
<div class="wrapper">
<div class="img">
<img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/search-engine-76519_960_720.png">
</div>
</div>
This is a great question, I've been trying for ages to solve but getting it to resize on a vertical height with out using flex was proving a hard task.
But #Grenther answer seems to actually work without using an image. His 1x2 ratio div stays true when adjusting the window width and height.
I then modified his code so that there is a max-height and max-width on the div. I could only get this to work with his 200px x 400px ratio.
It would be awesome if #Grenther could update my jsfiddle code so what ever div size/ratio variable is set, his clever vh method sizes would adjust using sass math so that any set div size would work. Even I'm struggling to see how his version works. But if the math is in the sass code for each vh dimension, we might be able to understand his wizardry.
#Grenther version here: https://jsfiddle.net/joshmoto/jndmoz6v/
/* div size vars and div ratio3 */
$div-width : 400;
$div-height : 200;
body {
width: 100%;
height: 100%;
}
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* set your div max-size here */
max-width: $div-width + px;
max-height: $div-height + px;
#media screen and (max-width: 200vh) {
width: 100vw;
height: 50vw;
}
#media screen and (min-width: 200vh) {
width: 200vh;
height: 100vh;
}
}
.div {
width: 100%;
height: 100%;
background: red;
text-align: center;
}
I know this is not sass question, but i'm just using this so we can see #Grenther's answer logic.
I tried the math myself but when I change the div sizes/ratio it does not work like his version.
See my fail: https://jsfiddle.net/joshmoto/Lkebpyws/
$div-width : 400;
$div-height : 200;
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* set your div max-size here */
max-width: $div-width + px;
max-height: $div-height + px;
#media screen and (max-width: $div-height + 'vh') {
width: ($div-width / 4) + vw;
height: ($div-height / 4) + vw;
}
#media screen and (min-width: $div-height + 'vh') {
width: ($div-width / 2) + vh;
height: ($div-height / 2) + vh;
}
}
...
I am using this slider but its not responsive.
can anyone tell me how can i make this slider responsive.
i made width:100%; but contents are not responsive any help or slimier slider suggestion would be appreciated
https://codepen.io/ivanrafael/pen/xGNOrP
.anim-slider {
background: #225A86;
list-style-type: none;
position: relative;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 550px;
padding:0;
margin:0;
}
Here is the sass mixin I am currently using (the dimensions are probably a bit outdaded nowadays) :
#mixin breakpoint($class) {
#if $class == xs {
#media (max-width: 767px) { #content; }
}
#else if $class == sm {
#media (min-width: 768px) { #content; }
}
#else if $class == md {
#media (min-width: 992px) { #content; }
}
#else if $class == lg {
#media (min-width: 1200px) { #content; }
}
#else if $class == xlg {
#media (min-width: 1367px) { #content; }
}
#else {
#warn "Breakpoint mixin supports: xs, sm, md, lg";
}
}
it is just a shortcut for media queries.
I then use
#include breakpoint(xs) {
... properties targeting mobile only go here ...
}
it then depends how you want your slider to appear in the different breakpoints.
By instance :
.anim-slide img#css3 {
left: 35%;
top: 4%;
}
don't seem to work really well on mobile view.
for that specific case, you may prefer :
.anim-slide img#css3 {
left: 35%;
#include breakpoint(xs) {
left: 25%;
}
top: 4%;
}
which is the same as :
.anim-slide img#css3 {
left: 25%;
#include breakpoint(sm) {
left: 35%;
}
top: 4%;
}
which is the same as (no sass) :
.anim-slide img#css3 {
left: 35%;
#media (max-width: 767px) {
left: 25%;
}
top: 4%;
}
It was only one example, you may have to do this on several classes and using several different breakpoints to have your slider perfectly responsive.
I have implemented "Toast" from materializecss. And I want to give some fix position to "Toast" message.
For workaround, I have added class and updated position, but with different screen resolution, it's appearing different location.
Materialize.toast('Success Message', 6000, 'success');
Any one have tried to change position of "Toast" message.
Is there any other way to make it consistence in every screen resolution.
Override default toast css with what you need:
#toast-container {
display: block;
position: fixed;
z-index: 10000
}
#media only screen and (max-width: 600px) {
#toast-container {
min-width: 100%;
bottom: 0%
}
}
#media only screen and (min-width: 601px) and (max-width: 992px) {
#toast-container {
left: 5%;
bottom: 7%;
max-width: 90%
}
}
#media only screen and (min-width: 993px) {
#toast-container {
top: 10%;
right: 7%;
max-width: 86%
}
}
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 have a div that is 700px high, under that div is a 200px picture. I want to allow scrolling for the first 700px but then no more. So on smaller vertical resolutions users can scroll to see the first 700px but then the rest is "cut off".
On the other hand users on large vertical resolutions will see the 700px div and the picture all with no scrollbar.
How can it be done?
You can use css media queries to use different css on different window size.
#media all and (min-width: 350px) and (min-height: 950px) {
// css for a window size of 250px height and 750px width or higher
}
So you want to do something like this?
.content {
height: 700px;
width: 300px;
}
.main {
height: 700px;
width: 100%;
background-color: red;
}
.pic {
display: none;
height: 200px;
width: 100%;
background-color: blue;
}
#media all and (min-height: 950px) {
.content {
height: 900px;
}
.pic {
display: block;
}
}