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.
Related
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) ) { ...
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%
}
}
how can i modify my head to hide the logo element when we are in mobile view?
<style type="text/css">
/*<![CDATA[*/
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
/*]]>*/
</style>
Right now i have used the head to fix the navigation bar and the logo element to stay on top during scrolling. Now it would be perfect, if i could tell the logo container to remove if we are in a mobile view, or lets say when we are less then the screen width of 768px.
Is this possible? I found out that it is quite a hustle to find hints on this in combination with jimdo.
You can use a CSS3 media query to specify styles which apply only under specific circumstances. To hide your logo on screens smaller than 768px:
#media (max-width: 768px) {
.jtpl-logo {
display: none;
}
}
More info about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use CSS Media Queries to conditionally use various CSS styles based on the size of the viewport.
Media Queries will likely solve your problem.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jtpl-logo {
display: none;
}
}
Hint: I like to use this one, as it has a good and useable collection of breakpoints https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
To hide in desktop use #media like
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
for other than desktop use following tags
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
<div class="jtpl-logo">
</div>
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>