0

We have here circles on our main page. We have managed to make it responsive in terms of resizing the screen, eg 992px, 768px, etc. Here's our CSS code:

.circle { 
   position: relative; 
   display: inline-block; 
   width: 100%; 
   height: 0; 
   margin-top:10%; 
   margin-left:-15%; 
   padding-bottom:120%; 
   -moz-border-radius:50%; 
   -webkit-border-radius:50%; 
   border-radius:50%; 
   background-color: white; 
   -ms-transform: rotate(20deg); /* IE 9 */ 
   -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */ 
   transform: rotate(20deg);   
}

The problem is, they are not being responsive when the screen is being zoomed in or out.

misterManSam
  • 24,303
  • 11
  • 69
  • 89
thisIsMe
  • 1
  • By "zoomed in or out" are you referring to a touch device? If so, doing a pinch-zoom isn't going to change the dimensions of the window. Your CSS is setting the width of .circle as a percentage of its container, which will be unchanged by zooming. – benjarwar Aug 03 '15 at 02:14
  • It's either being zoomed in by pinch-zoom or using mouse pointer. The application will be applicable to all kinds of devices with different screen sizes, from desktop to mobile phone. What would you suggest? :) – thisIsMe Aug 10 '15 at 01:46
  • Do you need to allow zooming on a mobile device? You could [disable user scaling with a meta tag](http://stackoverflow.com/a/4472910/1489537). If the content is always going to scale to the screen, then it doesn't seem like zooming is necessary for your application. However, please note that disabling user scaling is considered poor accessibility, especially if you have text that some users may find hard to read. – benjarwar Aug 10 '15 at 12:47

0 Answers0