Stack Overflow Asked by Power Rico on January 11, 2021
I’m doing a web site with HTML, PHP, and CSS.
I have a problem with the images of the contact page, they need to be fixed with change of the screen, like for mobile they need to be smaller.
This is my HTML code:
<div class="informazioni" style="text-align:right">
<p class="contact_label">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon-casa.png" alt="casa" style="width:35px;height:36px;" class="img_info">
adress<br>
adress
</p>
<p class="contact_label">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon-telefono.png" alt="tel." style="width:35px;height:36px;" class="img_info">
+00000000
</p>
<p class="contact_label">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon-fax.png" alt="fax" style="width:35px;height:36px;" class="img_info">
+00000001<br>
</p>
<p class="contact_label">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon-email.png" alt="email" style="width:35px;height:36px;" class="img_info">
[email protected]<br>
</p>
</div>
And this is my CSS:
.informazioni {
width:49%;
display: inline-block;
}
.contact_label {
text-align:left;
font-size: 20px;
margin: 5px;
}
.img_info {
width:2em;
height:2.006em;
float:left;
margin: 15px;
}
It’s working just for the big screen because I have inserted the style on the HTML file like it will not change if I use a mobile screen for example.
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon-casa.png" alt="casa" style="width:35px;height:36px;" class="img_info">
But if I delete the style="35px, height 36px"
, it appears that my image have no size and will be too big:
For mobile, the code is under the @media only screen and (max-width: 481px)
:
.img_info {
width: 1em;
height: 1.0667em;
}
Anyone who can help me?
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP