We Keep Coding

Flexslider Image overlap on smaller screens

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;
}
}

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 */
}

How to implement 2 different grid structures in one section?

I am trying to mimic the header-graphic navigation from this site:
http://wpengine.com/
It seems that they are not applying any grid on the header-graphic area, but having them separated as 2 divs. In their Hero block (container) area. I am looking to recreate the giant content area (fluid content box with 5 navigation buttons). Please try to stretch the right side of browser, the main navigation boxes stays at the same position and the left area (content) extend its as fluid. I am trying to create that appearance.
These are the codes below are the code I inspected from google developer tool:
/* For content navigation area */
.gwc_slide_buttons {
width: 375px;
height: 556px;
right: 0;
position: absolute;
}
/* For content area */
.gwc_slider {
left: 0;
right: 375px;
height: 556px;
position: absolute;
overflow: hidden;
}
What I have in my code:
/* For content area */
.slider_content {
position: absolute;
}
/* For the content navigation area */
.slider_content_navi {
width: 430px;
position: absolute;
}
As you can see here, I tried both absolute positioning for my content and navigation button, but it is not working as it should be compare to the code I have inspected.
Does anyone have any suggestion?
Here is the preview on jsFiddle.

This is achieved through Media Queries aka different design for different screen sizes. Your HTML will stay the same but you can apply absolutely different styles for different screen sizes.
Also I noticed that you are using Twitter Bootstrap. Check it's Grid System and the Responsive Design support.

How to make Bootstrap 3 navbar not collapsible

I've been searching a lot but still didn't find anything similar.
If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button.
I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need.
What I need is to remove the collapsible menu generally. Any idea?

Bootstrap is displaying collapsed elements because of the way responsive design works:
The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.
Thus, the CSS code that is responsible for displaying the "normal" navbar (i.e. the navbar for a medium to large viewport) is wrapped around #media (min-width: 768px). That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.
If you do not want to change the breakpoints as proposed in this question, you have a few other solutions:
Use the non-responsive Bootstrap library
Create your own navbar by studying the non-responsive one from Bootstrap and copying the relevant code.

You can put the navbar links inside navbar-header, and then add some CSS to override the Bootstrap defaults..
.navbar-nav {
margin:0;
}
.navbar-nav>li {
float:none;
display:inline-block;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
Demo: http://www.bootply.com/118426
Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304

i am having this issue and i have just solved it
this will undo the collapse
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}

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.