HTML code: Two photos not showing up properly in placement and size in the container

ArnabMukherjee3307 — Wed, 19 Mar 2025 20:12:40 GMT

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?

Re: HTML code: Two photos not showing up properly in placement and size in the container

Edvinas_S — Thu, 20 Mar 2025 12:13:10 GMT

I don't think this question belongs here. It has nothing to do with js maps sdk.

You CSS seems fine. Probably some other rules are making it render poorly. That 3rd image has crazy padding added to it. 391px top padding and 268.5px on both sides. Maybe this can give you some ideas.

I would suggest making a codepen with a working example, so people can help you better. Often times you would probably solve your problem just but making that codepen.

topic HTML code: Two photos not showing up properly in placement and size in the container in ArcGIS JavaScript Maps SDK Questions

HTML code: Two photos not showing up properly in placement and size in the container

Re: HTML code: Two photos not showing up properly in placement and size in the container