Why my interface look differently in browser and google device toolbar? - html

Question

my interface in Google chrome browser (Is normal, I set it like this)
But when I click the inspect and click google device toolbar, the interface look like:
.btn {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.div_hover {
background-color: #F9F7F2;
}
<div style="width: 80%; margin: auto;">
<div class="div_hover" style="width: 473px; height: 200px; margin: auto;">
<p style="font-size: 18px;">Dear Customer</p>
<hr>
<p style="font-size: 11px">Welcome.......</p>
<hr>
<p style="font-size: 11px">bla..bla...</p>
<hr>
</div>
<div style="width: 49%; margin: auto; position: relative;">
<img src="https://www.rspcasa.org.au/wp-content/uploads/2019/01/Adopt-cat-mobile-banner-600x300-fit-constrain-q70-mobile_banner_image.jpg">
<form action="https://www.google.com/">
<input type="image" src="https://www.freepngimg.com/thumb/download_now_button/25399-6-download-now-button-thumb.png" class="btn" />
</form>
</div>
</div>
How can I make it both same?

Answer 1

Well, you are currently setting the div have the width of 49% but <img> doesn't have any width set. That is causing the image to be its original size. If you want to display the image in the same way for different screen width, you should do something like this:
<div style="width: 80%; margin: auto;">
<div class="div_hover" style="width: 473px; height: 200px; margin: auto;">
<p style="font-size: 18px;">Dear Customer</p>
<hr>
<p style="font-size: 11px">Welcome.......</p>
<hr>
<p style="font-size: 11px">bla..bla...</p>
<hr>
</div>
<div style="width: 473px; margin: auto; position: relative;">
<img width="100%" src="https://www.rspcasa.org.au/wp-content/uploads/2019/01/Adopt-cat-mobile-banner-600x300-fit-constrain-q70-mobile_banner_image.jpg">
<form action="https://www.google.com/">
<input type="image" src="https://www.freepngimg.com/thumb/download_now_button/25399-6-download-now-button-thumb.png" class="btn" />
</form>
</div>
</div>
As you see, don't give the custom width to the second child div. If you have to give the width as 49% for second div, then give the width for <img> as well.
https://jsfiddle.net/2epL85r1/