Make Intro.js tooltip responsiv - javascript

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

Related

Microsoft-Edge adding a random overflow while other browsers not (SVG)

I'm a newbie here, nothing special, just have a little bug with Microsoft-Edge, it adds a random overflow-x while there's no content passing the screen's/browser's width, tried it on different screens and resolutions and the problem still there.
Here's a link of what I've done, if you want to test it on Microsoft-Edge : http://microsoft-edge.thefreecpanel.com/
A photo : Photo Showing overflow-x bug
Thanks in advance.
Try to set Margin to 0.
Make a test with code below and let us know whether it solves your issue or not.
html, body {
height: 100%;
}
body {
margin: 0; /* This will stop the margin, setting it to 0 */
}
div {
width: 100%;
height: 100%;
background: #ddd;
}
<div></div>

Google maps causing other elements to overflow the body

I have both <body> and <html> set to fill the full height and width of the view-- and they do. The problem is, now that I have a Google maps element essentially serving as a page background, other elements are overflowing the view size and being pushed offscreen.
This is how it looks currently. I've tried adjusting the size of the <html> and <body> elements, but that's not really a fix so much as a hack, as it throws off the layout in other ways. I've also tried playing around with overflow options.
This is how it looks when you inspect it, showing the overflow, and the fact that the body is the correct size. (You have to zoom out to see the overflow.) Notice that both the right side and the bottom, above the fixed navbar, show a gap between the edge of the map element and the limits of the screen.
I'm assuming the problem is something with my map element's CSS, but I cannot for the life of me figure out what it is. Here's the map-specific CSS:
#map {
position: absolute;
top: 50px;
left: 80px;
height: calc(100vh - 50px);
width: calc(100vw - 80px);
z-index: 0;
overflow: hidden;
}
#media (max-width: 768px) {
#map {
top: 0;
left: 0;
height: calc(100vh - 55px);
width: 100vw;
}
}
And here's a link to a codepen containing the page with the issue:
https://codepen.io/redheadedmandy/pen/BVRxZE
Any suggestions for a workable fix would be really helpful!
The problem is with with the div with the classes bottom content-container, just after the #map div.
The problem is that in one hand, it has width: 100% (by .bottom rule) and in the other hand, it has
#media (max-width: 768px) {
.content-container.bottom {
margin-left: 20px;
margin-right: 20px;
}
}
which "push" the whole document so the total width will be 100% + 20px.
The solution is to reduce the size by set margin: 0 or override the width: 100%.
Here is a the first solution:
http://output.jsbin.com/meziduy/4
Let me know if something is not clear.

Get Rid of White Space Under Footer On Full Screen Browser And Large (49 inch) Screens

Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}

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

how to make my images responsive?

Hi all using twitters bootstrap: http://twitter.github.io/bootstrap/base-css.html#tables
I am wandering how I can stop this happening: http://img823.imageshack.us/img823/6606/screenshotfrom201306071.png
I want the images to resize with the window until it gets bumped up above the text from bootsrap.
Link for it: http://www.prxa.info/articles/category/1 User: test.prxa. pass: test
I NEED images to have a max of 350px here as some images people include are massive and have to be resized to not mess it all up.
Here is my custom css for the thumbnail area and the images inside:
.thumbnail
{
width: 350px;
height: 220px;
display: table-cell;
vertical-align: middle;
}
img.tagline-img
{
max-width: 350px;
max-height: 220px;
}
Not the best responsive technique but it will make it fit
Just use
img.tagline-img {
width:100%;
}
Just tested on your site
taken from bootstrap :
img{
border:0;
max-width:100%; /* Part 1:Set a maxium relative to the parent */
width:auto\9; /* IE7-8 need help adjusting responsive images */
height:auto; /* Part 2:Scale the height according to the width,
otherwise you get stretching */
-ms-interpolation-mode:bicubic
}

Categories