There seems to be an issue with the text when the window size is decreased. It overlaps with the image instead of resizing accordingly. I have tried using media queries, VW, and VH units to adjust the text size based on the window size but it's not working as expected. Here is the link for reference: https://i.sstatic.net/PFkKr.png
Here is the code snippet that I have used:
@media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
Any suggestions on how to fix this issue?
Below is the code snippet that I am currently using:
<!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">
/* CSS Styles Here */
</style>
</head>
<body>
<!-- HTML Content Here -->
</body>
</html>
Any help or suggestions would be greatly appreciated. Thank you!