Как сделать диаграмму Венна отзывчивой на мобильном телефоне? - PullRequest
Новая
       9

Как сделать диаграмму Венна отзывчивой на мобильном телефоне?

0 голосов
/ 19 октября 2018

Как мне заставить работать эту диаграмму Венна на мобильных устройствах?Он перекрывается при изменении размеров окон.Короче говоря, круги Венна не реагируют, и мне нужно, чтобы они реагировали на любом устройстве.

Кто-нибудь знает, как это будет работать? 

.venn-container {
  padding: 25px 25px 25px 80px;
}
.venncircle {
	float: left;
  padding: 18px;
  width: 300px;
  height: 300px;
  -moz-border-radius: 750px;
  -webkit-border-radius: 750px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
}
.venncircle > a {
  font-size: 57px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop {
  padding: 50px 50px 50px 40px;
  width: 300px;
  height: 300px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  margin-bottom: -130px;
  margin-left: -70px;
  background-color: #0d8bba;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 1;
  position: relative;
}
.venncirctop > a {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop:hover {
  z-index: 5;
  background-color: #b8d7d8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(183, 214, 215, 0.5);
}
.venncircrt {
	padding: 20px 60px 5px 5px;
  width: 280px;
  height: 280px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
	margin-top: -150px;
  margin-left: 160px;
	margin-bottom: 270px;
  background-color: #5e577b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 3;
  text-align: right;
}
.venncircrt > a {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircrt:hover {
  z-index: 5;
  background-color: #625F75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 95, 117, 0.9);
}
.venncircbtm {
  padding: -10px 20px;
  width: 280px;
  height: 280px;
  -moz-border-radius: 190px;
  -webkit-border-radius: 190px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  top: 15px;
  margin-right: 150px;
  margin-left: 50px;
  text-align: center;
  background-color: #627746;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(13, 139, 186, 0.5);
  z-index: 1;
  position: relative;
}
.venncircbtm > a {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircbtm:hover {
  z-index: 5;
  background-color: #3a4e20;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(58, 78, 32, 0.9);
}
.venntxttop {
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 10px;
}
.venntxttop:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtrt {
  margin: 0 0 0 87px;
  display: inline-block;
  position: relative;
  top: 63px;
  z-index: 5;
}
.venntxtrt:hover {
  color: #FFFFFF;
  text-decoration:none;
}

.venntxtbtm {
  text-align: center;
  display: inline-block;
  width: 70%;
  position: relative;
  top: 103px;
}
.venntxtbtm:hover {
  color: #FFFFFF;
  text-decoration:none;
}
 
div.testiform  {
	 margin: 0px 30px 0px 20px;
	padding: 0px 30px 0px 20px ;
	
}
<div class="container-fluid">
<div class="span9">
<div class="venn-container">
<div class="venncirctop"><a class="venntxttop" href="https://thepuppycarecompany.com/our-services/">Puppy Training</a></div>

<div class="venncircrt"><a class="venntxtrt" href="https://thepuppycarecompany.com/shop/">Paws &amp; Bones</a></div>
<div class="venncircbtm"><a class="venntxtbtm" href="#custom_html-14">Products &amp; Reviews</a></div>
&nbsp;

</div>
</div>
</div>

Вот как это выглядит в веб-браузере:

browser

Но когда я изменяю размер, это выглядит так:

mobile

Это веб-сайт:
https://thepuppycarecompany.com

1 Ответ

0 голосов
/ 19 октября 2018

Похоже, у вас есть точка останова на 860px.Если ширина меньше этой, вы можете использовать значения vw как для текста, так и для ширины / высоты кругов.Например: 

@media (max-width: 859px) {
    .venncirctop {
        ...
        width: 43vw;
        height: 43vw;
        ...
    }

    .venncirctop > a {
        font-size: 5vw;
        ...
    }
}

Повторите это для двух других кругов, и они будут реагировать на ширину области просмотра.Поиграйте с этими числами, чтобы придумать что-нибудь удобное.

...