Below is the concerned HTML code:
#Mall1Choice, #Mall2Choice, #Mall3Choice #Mall4Choice {background-image: url("https://i.imgur.com/TMgotyg.png
");
height: 15em;
width: 12em;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;}
#Mall1Choice {background-image: url("https://i.imgur.com/TMgotyg.png");}
#Mall2Choice {background-image: url("https://i.imgur.com/HUnNnq3.jpeg");}
#Mall3Choice {background-image: url("https://i.imgur.com/OLcMxwP.png");}
#Mall4Choice {background-image: url("https://i.imgur.com/H6vz1Kz.jpeg");}
#Mall1,#Mall2,#Mall3,#Mall4 {
position: absolute;
height: 15em;
width: 12em;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;}
#Mall1 {background-image: url("https://i.imgur.com/TMgotyg.png ");}
#Mall2 {background-image: url("https://i.imgur.com/HUnNnq3.jpeg ");}
#Mall3 {background-image: url("https://i.imgur.com/OLcMxwP.png ");}
#Mall4 {background-image: url("https://i.imgur.com/H6vz1Kz.jpeg ");}
#bookmarkLabel{
padding-left: 1em;}
#bookmarkContainer {
padding-left: 1em;
background-color: transparent;}
#or {
text-align: center;
transform: translate(-10%, 0%);
}
#instructions {
background-color: #dbecf0;
padding: 0.5em 1em 0.5em 1em;
z-index: 0;
outline: 0;
border: 0;
font-size: 18px;
}
div.polaroid {
width: 12em;
height: auto;
margin-right: 3em;
background-color: white;
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 4px 6px 20px 0 rgba(0, 0, 0, 0.19);
display: inline-block;
}
In the interface (home page) in the four containers the last two photos are not properly showing up in size and placement. What changes can be done in the above HTLM script to fix the issue?
