We Keep Coding

Make Intro.js tooltip responsiv

I'm using intro.js to guide users through my application the first time they log in. It's a great tool and it works, the only downside I see is that the introjs-tooltip element is not responsiv.
As you can see below the tooltip has a min-width and max-width in px which really don't make it very responsiv. Also this makes the image I include in some of the steps really small and kind of useless, because of the small size.
CSS - Simplyfied
.introjs-tooltip {
position: absolute;
visibility: visible;
padding: 10px;
min-width: 200px;
max-width: 300px;
}
I have been working on this "issue" for a few days now, and can't figure it out.
So my questions are: Is there a way to make the tooltip use % instead of px without having to change to much in the intro.js file? If not, what would you guys recommend me to do?

You can provide own implementation for .introjs-tooltip in your custom css file:
.introjs-tooltip {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
or you can use an additional class eg: .tooltip-large:
HTML
<div class="introjs-tooltip tooltip-large">
...
</div>
CSS
.tooltip-large {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}

In my case, "min-width" and "max-width" css rules are not working as expected, at least for floating tooltips in a responsive desing. In ended up doing the following. Maybe this is helpful for someone (tourTooltip is a custom class I defined for tooltips):
/* Size < Small */
#media screen and (max-width: 756px) {
.tourTooltip {
min-width: 300px;
}
}
/* Size > Small */
#media screen and (min-width: 756px) {
.tourTooltip {
min-width: 500px;
}
}

Bootstrap site not being responsive on mobile

Update: I've changed over the % and made px values max-width but it's still not being responsive with images, nor is the mobile menu working.. (link to website)
I am working on a site using Bootstrap, and for some reason it is not being responsive. I have the viewport set to meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
Bootstrap.css first, then the theme.css.

I see a couple of issues:
1) Your col-lg-1 and col-lg-10 classes need to be immediately inside a div with row class, that is inside container class. Do not wrap them in modal-body either - this is stopping the responsive grid styles from working properly.
2) You should probably add some col-md-** and col-sm-** classes to your columns as well, to give better control of proportion at medium and small size, instead of just specifying the large size.
3) Take all fixed widths off your classes inside container.

If you want to make a responsive website you should stop using fixed widths. For example on your website, you have a class named ".contacts" and the image "Mazars Messenger"(add a class here and use it instead of img from my code). Try to set these properties to it and see what happens:
.contacts{
max-width: 800px;
width: 100%;
}
/*here you add your own class instead of img to affect only the image with that class*/
img{
max-width: 800px;
height: auto;
width: 100%;
}
.container {
max-width: 970px;
width: 100%;
}
And you have the borders as images under every article. You need to modify the code for those too, and then your site should be responsive.
You need to do this for your entire website. Good luck.

You are forcing some width values in pixels, for example here:
.contacts {
width: 800px;
display: block;
}
If you want it to be responsive you need to set values in percentage like so:
.contacts {
max-width: 800px;
width: 100%;
display: block;
}

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??

The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/

I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

How do I resize images in Lightbox2?

I'm using http://lokeshdhakar.com/projects/lightbox2/. I have image thumbnails and on clicking them they open in lightbox - obviously.
The issue I have is that when some of those images are 1800x1200, lightbox covers the whole webpage.
How can I edit to ensure that the images are a maximum height of let's say 400px and width is in proportion? I can't simply upload the images in lower dimensions as they are user uploaded images, so I need to do this script/server side.
Thanks!

You can use the max-width and max-height CSS properties on both the images and the lightbox:
Demo: http://jsfiddle.net/rdfAV/1/
CSS:
img {
max-width: 400px;
max-height: 400px;
}
.lb-outerContainer, .lb-dataContainer {
max-width: 420px;
width: auto!important;
height: auto!important;
}​
This method appears to be compatible with all major browsers, a full compatibility list is available here: http://caniuse.com/#feat=minmaxwh

Please try adding the following to your CSS:
.lb-image{
max-width: inherit;
}

Thanks A Lot .. Really Help Full To My Landing Page
Some Editied Code , Play Wisely
img {
max-width: 800px;
max-height: 600px;
}
.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​

How to center and size an image to be 100% width of the screen, but only if <1024 px

OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/

Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}

if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.

You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.

Demo
I ended up opting for display:table-row ... oh well :P