Prevent re-size on zoom using bootsrap

Question

I'm fairly new to the CSS/HTML world. I am creating an interactive image using html hotspots, CSS and bootstrap to create modal information about certain parts of the image. The image is very wide (its a process road map) and will be used on a large touch screen for a presentation only. The issue I am having is that when the bootstrap modal is opened it appears at the zoom level of the browser. Since this is a very large image and the user can zoom in and out I need to make the data on the modal appear static in size/zoom. I have used viewpoints to keep the size of the text static and this works well for 100+ - 60% zoom. What does not work well is when I zoom far out the text overlaps itself, 50% or less which is possible if people want to see the whole image before clicking the link to open the modal. The layout on the modal is two rows of three columns using bootstrap. The columns do not overlap its that the text wraps over itself. I'm not sure how to fix this problem or perhaps another approach is better all together.

I have played with changing the size of the image which helps some, but at some point varying zooms will be used no matter what image size I use thus the problem occurs.

What it is doing at 45% zoom, text size is OK but its overlapping:

What I need it to look like at any zoom:

CSS for modal content: /**** Start details Model Content Section ****/

.details, .details-2 {
    padding-bottom: 80px;
}

.details {
    text-align: center;
     min-height: 100px;
}
.details h4{
    font-size: 2.5vmin;
    color: #666;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

.details-2 h4{
    font-size: 2.5vmin;
    color: #444;
    padding-bottom: 10px;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

.details p, .details-2 p {
    color: #444;
    font-size: 2vmin;
    line-height: 20px;
    font-weight: 300;
}


.details i {
   font-size:3.5em;
   color:#fff;
    background: #FF432E;
    width: 100px;
    height: 100px;
   padding:25px;
    margin-bottom: 10px;
   -webkit-border-radius:70%;
   -moz-border-radius:70%;
   -o-border-radius:70%;
   border-radius:70%;
   position: relative;
    box-shadow: 0 0 0 30px transparent;
    -webkit-transform: translate3d(2, 2, 2);
    -moz-transform: translate3d(2, 2, 2);
    -o-transform: translate3d(2, 2, 2);
    transform: translate3d(2, 2, 2);
    -webkit-transition: box-shadow .6s ease-in-out;
    -moz-transition: box-shadow .6s ease-in-out;
    -o-transition: box-shadow .6s ease-in-out;
    transition: box-shadow .6s ease-in-out;
}
.no-touch .details:hover i,
    .no-touch .details:active i,
    .no-touch .details:focus i {

        -webkit-transition: box-shadow .4s ease-in-out;
        -moz-transition: box-shadow .4s ease-in-out;
        -o-transition: box-shadow .4s ease-in-out;
        transition: box-shadow .4s ease-in-out;
        box-shadow: 0 0 0 0 #FF432E;
}


.details-2 i {
    color:#FF432E;
   font-size:3em;
   padding:1px 10px 0 1px;
   position: relative;

}

.container {
    width: 96%;
    height: 96%; 
}



/**** End details Modal Content Section ****/

Have you tried the *viewport* meta tag? Something like [this](http://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari/4389976#4389976) — JCOC611, Oct 19 '15 at 17:54
http://jsfiddle.net/Hope62/5c7f4rq1/ I removed the image map as the image I am using cannot be posted. — Hope, Oct 19 '15 at 18:44

score 0 · Answer 1 · answered Oct 19 '15 at 17:57

0

<meta name="viewport" content="width=device-width, initial-scale=1"> should help on mobile scaling problems.

Place between the <head> and </head>

answered Oct 19 '15 at 17:57

baconck

386
2
5
19

This will prevent all zoom action, right? I'm not sure that's what the OP is after. – isherwood Oct 19 '15 at 18:04
I can't have zoom eliminated all together as the main image the modal is triggered from requires zooming. Perhaps using a new page in the modal with the zoom disabled may work though? – Hope Oct 19 '15 at 18:27
@isherwood - this meta tag only prevents zooming when it has the `user-scalable` attribute set to `false` – Mike Donkers Oct 19 '15 at 21:37
Fair enough. Please describe in your answer how exactly it "helps". – isherwood Oct 20 '15 at 01:25

Prevent re-size on zoom using bootsrap

1 Answers1