Full-width arcgis map formatting

I embedded an arcgis (not designed by me) on my website here:

https://pedl.tech/resource-map

Password: Mert's Maps [space included]

I used some CSS code to make the section the full-width of the page. However, the map seems to be pulling in narrower than the page. My partner who made the map thinks this is something that can be adjusted with web code versus the arcgis app. Any suggestions? Many thanks.

<style>
.embed-container {
  position: relative; 
  padding-bottom: 80%; 
  height: 0; 
  max-width: 100%;
} 

.embed-container iframe, .embed-container object, .embed-container iframe{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
} 

</style>

<div class="embed-container">


<iframe frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
src="https://ut-austin.maps.arcgis.com/apps/instant/media/index.html?appid=0d99623c08774fe78e6cbf0f1a102623"></iframe>

</div>

Ugh. I accidentally deleted some CSS that I had above this code, and now it now longer works. I can't seem to recreate what I did either. Welcome any suggestions.

You can move this code in to bottom of Code Block (do not add to Custom CSS)

<style>
  .fe-65b1968b881a407ad804001e {
        --sqs-site-max-width: 100% !important;
}
</style>

Excellent, thanks!

On 2/17/2024 at 11:01 PM, tuanphan said:

You can move this code in to bottom of Code Block (do not add to Custom CSS)

<style>
  .fe-65b1968b881a407ad804001e {
        --sqs-site-max-width: 100% !important;
}
</style>

 

I'm curious, what does the fe-65b1968b881a407ad804001e refer to? It's not something I see when I use the ID viewer in Chrome.

On 3/1/2024 at 11:32 PM, Ottan said:

I'm curious, what does the fe-65b1968b881a407ad804001e refer to? It's not something I see when I use the ID viewer in Chrome.

You can use this ID, both are same

[data-section-id="...."] .fluid-engine

Replace data-section-id with your id

Super helpful! I see that in the inspector too.