Hello everyone. I am trying to change the size of a second image on a web page by using CSS inside a file called PlazaDeMayo.html.
The problem is that even when I attempt to change the width and the height with the “Inspect” tool in the web browser, the size of the image still does not change.
The following is what I am seeing in the web browser with the “Inspect” tool:
The following is the full view of the web page:
The following is the source code for the PlazaDeMayo.html file:
{% load static %}
<!DOCTYPE html>
<html>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.site-text1 {
position: fixed;
/* width: 48%; */
bottom: 20px;
left: 15px;
}
.site-text2 {
position: fixed;
max-width: 48%;
height: auto;
top: 95px;
right: 10px;
}
p {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 1em;
}
</style>
<body>
<div class="site-text1">
<br><h1>Plaza De Mayo</h1>
<p>Being the oldest public square in Buenos Aires, Plaza De Mayo is
<br> sacred to the city's native residents. The square has experienced
<br> important events throughout history. From the second founding of
<br> the city in 1580 through the revolution of independence in 1810,
<br> also known as the May Revolution of Buenos Aires, the plaza has
<br> seen vehement protest or jubilant celebration. Argentina's first
<br> political rally was held here in 1890. Plaza De Mayo represents
<br> the scars and advancements of Argentina's history.
</p>
<img src="{% static '/images/plaza-de-mayo.jpg' %}">
</div>
<div class="site-text2">
<img src="{% static '/images/plaza-de-mayo2.jpeg' %}">
</div>
</body>
</html>