flexslider resizing issue for iphone/ipad - resize

I've implemented flexslider before, but this time it is not resizing when I view it in i-phone or i-pad. Also its not working when I'm resizing my browser window.
Please suggest any workarounds..
For now I've made it work by adding media query in flexslider.css file.
Thanks in advance for any help.

Finally I got it, the problem was because of Bootstrap framework. Elements with classname "span1/2/3.." in bootstrap don't resize beyond a fix browser width, even when using fluid structure. Because of that my flexslider div was not getting resized.
I just changed the fixed with of .span class from "px" to "%" and it started working.

Related

Rally HTML app always forces browser scroll bar - how to avoid this?

I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)

Strange bootstrap behaviour

I am using Bootstrap 3. I have noticed a strange behavior that when I use class .col-md-6 on a <div>, it occupies half the area as it should be, but when I use class .col-md-4 on the same <div>, it occupies the whole row.
Below are the attached images.
1) Image with .col-md-6:
2) Image with .col-md-4:
Can anyone tell me how I can resolve this issue?
Try using .col-xs-4. I suspect it's due to the breakpoints since they're stacking....

Isotope responsive size problems when filtering

I'm having a problem with Isotope.
Everything seems to work except that, when I filter the items, these are resized in a weird way, as if the items were resized relative to their old width instead of the container width.
I let you see by yourself here : https://codepen.io/anon/pen/RLPbpd (Click on the group of red buttons to see).
I tried to layout after each filter :
$iso.isotope('layout');
and to destroy isotope and then re-init, but nothing solved it.
My .grid-sizer is at the perfect size and all items have the same width..
I really don't know what could be wrong there, so I'd be very thankful if you could help me !
Sorry for my bad English, it's not my main language !
Problem solved.
The problem was due to
fitWidth: true,
in the initialization code of Isotope.
I just removed it and it works.

markers disappear when resizing the canvas?

I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.

flexslider slideshow not resizing properly

I have set up the Flexslider Carousel with thumbs on my website. For some reason, when I shrink it below a certain size it does not re-size properly and then it disappears (overflow: hidden could be causing this second issue) I freely admit that my java skills are limited, so I hope that someone here will be able to tell me what I messed up...
http://studiobilodeau.com/VLSB/slideshows/the_body2.php
Thanks for any help!
v
Try this, give your containing div (#container) width either in %, so that it adjusts as per your browser window or set its width for different viewports.