Когда пользователь уменьшает размер окна, текст меняется в зависимости от размера окна.Но когда я уменьшаю размер окна, оно переходит к изображению.Я пробовал медиа-запросы, но они всегда показывают то же самое.Я использовал VW и VH, чтобы изменить размер в соответствии с размером окна.
Я получаю вот так.Как решить эту ошибку.Медиа-запрос, который я использовал:
@media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
Как решить эту проблему.
Мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
color: #32CD32;
}
.carousel-indicators li {
border-color: #000000;
}
.carousel-indicators li.active {
background-color: #32CD32;
}
.button {
background-color:#000000;
border:black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
/*.text {
font-size: 160%;
position: absolute;
display: inline-block;
left: 50%;
top: 180%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}*/
.button1 {
border: 1px solid black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
@media screen and (max-width: 803px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
img {
width:100%,
height:auto;
}
.col-sm-8 {
padding: 60px 50px;
}
@media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
/*@media screen and (max-width: 500px) {
.text {
font-size: 70px;
}*/
/*@media screen and (max-width:760em) {
.img {
font-size: 150px;
}*/
@media screen and (max-width: 803em) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <img src="Assets/img/deyapayiconandroid@3x.png" alt="logo" style="width:60px;"><br> -->
<h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html" class = "button" style ="color:white;text-align:center;padding:15px 20px 30px;">Signup</a></li>
<li><a href="login.html" class="button1" style ="text-align:center;padding:15px 20px 30px;"> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid" style = "background:#FFFFFF ">
<div class = "row">
<div class="col-sm-8">
<h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
Pay for it anyway you want</br>
with deyaPay </h2>
<button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
</div>
<div class="col-sm-4">
<img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: #F2F2F2">
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-4">
<img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">
</div>
<div class="col-sm-8">
<h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<div class="item" style="background-color: #F2F2F2">
<div class="row">
<div class="col-sm-4">
<img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">
</div>
<div class = "col-sm-8">
<h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" style="background-color:#F0F8FF ">
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="New York" width="180">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
</div>