Flexslider Image overlap on smaller screens - javascript

I am attempting to make a webpage mobile responsive however the images in the flexslider on smaller screens, goes askew. Whether it was loaded or scaled down, the image to the right encroaches on the current image.
I would post an image but I need more reputation points.
I am trying to figure out how to push the current image being viewed over so that the edge of the next picture isn't being shown prematurely.

Just needed to add a media query to apply margin-left at a certain point. just couldn't find the rule to target for a little while:
.slides:first-child img{
height: auto;
}
//fixes the bug where the second image appears on the right on smaller screens
#media (max-width: 991px){
.slides:first-child img{
margin-left: 40px;
}
}
.flex-control-thumbs{
margin-top: 20px;
li{
cursor: pointer;
list-style-type: none;
}
}

Related

CSS Responsive Slider Turn Vertical When Mobility

I'm currently using Slick Slider to start to create a responsive Slider on my web page.
But I want the slider to turn all the images to a vertical listing. It will be horizontal full width when full screen, then when it went to mobility all the images will be split to vertical to view.
I tried to search w3school for "media" method to change in the CSS files as shown below :
#media only screen and (min-width: 370px) {
.slick-slide img
{
float: left;
display: block;
overflow: hidden;
list-style-type: square;
position: relative; /* for the negative top distance to work */
display: inline-block;
clear: left;
}
}
But no luck, there was no response at all. How can I make my slider the same as Square Space? or are there any other methods I can try?
Thanks!
You need jQuery to perform this action. For your convenience, slick allows you to turn your slider vertically using one single attribute. Your code should be something like this:
var wrapper = $("#wrapper-id-on-mobile");
wrapper.slick({
//some attributes
vertical: true
});

Dynamic margins using css

I'm quite new to web-design, but know most of the basic stuff, but please try to keep it relatively simple) So, I'm designing a web-site, where I want to have grey background on the sides of the main page, which I managed to do. However, I want the page to "eat up" the grey space if the window is resized, just like Marriott hotel uses I have tried looking their code up, but it's a lot and I don't think they use CSS but JavaScript for resizing dynamics. Am I right? If so, is there a way of doing it with CSS? Or java, but relatively simple, I'm very new to it!
Also, I have currently given the wrapper a width of 88% and used the 12% as the grey background. Is using % the best solution for different screen resolutions? (Keeping in mind that it would be for PCs and tablets at the most, no smartphones)
Using percentages can be useful, but if you truly want things to look how you want them to on a smaller screen resolution, you can use media queries.
Media queries work well because they can even change the styles depending on device orientation:
#media (min-width: 700px) and (orientation: landscape) { ... }
Using a media query. (Make the window bigger & smaller to see it in action.)
I think what you want is the following:
Add a background to the body.
Add a div with X px and margin auto, that will center it.
So then, when you resize the window, this will "eat" the margins from the body hidding the grey background.
If what you want is different sizes for the web depending on the width screen, then you are entering to media queries.
You are looking for:
#wrapper { width: 900px; margin: 0 auto; }
This will place your wrapper (with a 900px width) with even margins on the side and then recalculate the margins as the window changes.
I would give your wrapper a set width since setting a width of 88% means that the center content will ALWAYS be 88% of the window which means you will always have margins.
You may do it this way
here is the fiddle: http://jsfiddle.net/fcvbkv5w/
body {
text-align: center;
}
#navbar {
width: 100%;
margin-left:0%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 70%;
position: relative;
text-align: center;
background-color: red;
}
#media (max-width: 700px){
#fwcenter{
width:100%;
}
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="container">
Website content
</div>
</div>
</center>
</div>

Orbit slider not loading on page refresh?

I'm having an issue with an Orbit slideshow, part of ZURB's Foundation.
http://visiondemo.com.au/tmp/
If you click on the header logo or land on the homepage by clicking a link, the slideshow loads perfectly. No issues. However, if you hit refresh, it's missing.
Also, when the page is refreshed and the slideshow is missing, resizing the window makes it magically appear.
Any ideas how I can get it loading at all times?
Cheers.
Hmm this answer will be quite a hacky way of doing things but I think it'll work for you in a way or another..
Firstly to fix the height: 0px problem in the data-orbit.
Since you have chosen the content of your orbit to be an actual caption as well then, try to add this in a <style> tag or in your style.css. (#note this is only for the medium-up block only, supply your height for the small block).
.slideshow.show-for-medium-up > li {
height: 421px !important;
}
now thats already good and working, you'll see your orbit now.. apparently another problem would appear. It would display the orbit before the content's .orbit-caption finishes styling the list. So append this small fix to your style.css
/* Orbit Fix */
ul[data-orbit] {
margin: 0;
padding-left: 0;
list-style-type: none;
}
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}
/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }
/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
display: block;
}
UPDATE:
I think thats because you show the image only when the screen is small, I recommend adding this,
.slideshow.show-for-small-only img {
/* change the img height here */
height: 200px; /* Change this as you see fit */
}

Making a container to distribute over all the window screen

I am working on a web api, in UI the container is just distributed to certain amount of browser window where there is content but I want to distribute it all over the browser regardless of the content.
CSS
.container {
margin-right: 10px;
margin-left: 10px;
margin-top:20px;
padding-top:70px;
*zoom: 1;
border:none;
background-color:aliceblue;
}
Screen Shot
In the below screenshot it can be seen that the lightblue(aliceblue) is just distributed upto some extent and remaining was grey. I would like it all aliceblue
Add height: 100%; to your container and it should be fine

Is there a Vertically Responsive Gallery Plugin? Jquery or Javascript?

Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.

Categories