Web Embed Component No Padding, Fullscreen

Community Resources
1

Hi guys! I have been able to adjust the Web Embed component padding using this code. I also removed the top and bottom navigation but you can remove that part and adjust your margins to suit if you like. I hope it helps someone. :folded_hands:

Edit: @Himaladin helped me to clean this up and finish the edges :ok_hand::dizzy: . See the updated code below:

Edit***: Descriptions added and all “!important” commands removed by targeting #main-root

/* ============================================
   TAB BAR / TOP BAR STYLING
   ============================================ */

/* Hide topbar when fullmode-embed is active */

#page-root:has(.fullmode-embed) .no-sidebar .topbar-root {
display: none !important;
}

/* Hide tab bar when fullmode-embed is active */

#page-root:has(.fullmode-embed) .has-tab-bar > div:last-child {
display: none;
}


/* ============================================
   IFRAME / WEB EMBED STYLING
   ============================================ */

/* Ensure embed container takes full width */

#main-root [data-testid="wire-component-stack-fullmode-embed"] .normal {
max-width: 100%;
}

/* Remove Glide's default horizontal padding */

#main-root [data-testid="wire-component-stack-fullmode-embed"] [class*="wire-container___StyledDiv3"] {
    --container-x-pad: 0;
}


/* Reset padding and adjust margin for fullmode embed wrapper */

#main-root .fullmode-embed {
    padding: 0;
margin-top:-20px;
}

/* Make iframe fill full viewport height dynamically */

#main-root .fullmode-embed iframe {
height: 100dvh; 
min-height: 100%;
}
4 Likes