The image on the screen is not resizing properly. Please refer to the image with the alternate text google-play-badge.
Even though the width and height of the image are set to auto, it is still not adjusting automatically.
Here are my codes:
body {
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
color: white;
display: flex;
justify-content: center;
overflow: hidden;
}
@supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
p {
background: linear-gradient(90deg, #000, #000fe6, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3.75s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(45, 45, 45, .05);
}
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
svg {
display: flex;
font: 10.5em 'Montserrat';
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
@supports (stroke-dasharray: 6% 29%) {
.text-copy {
stroke-dasharray: 6% 29%;
}
}
.text-copy:nth-child(1) {
stroke: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2) {
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #FDB731;
animation-delay: -5s;
}
@keyframes stroke-offset {
100% {
stroke-dashoffset: -35%;
}
}
@media screen and (max-width: 600px) {
p,
h3,
img {
font-size: 20px;
}
}
</style><body>
<div>
<h3>
<svg viewBox="0 0 960 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">TITLE</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
</h3>
<p>Some Text Here</p>
<div><img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" /></div>
</div>
</body>The image is not being responsive as per the screen size. Kindly view the image with the alternate text google-play-badge.
Despite setting the width and height of the image to auto, it does not resize automatically.