Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

https://cohassetpso.org/events/middle-high-school-color-run-2023

Here is the live link

Attaching a screenshot isn't possible. But here is what it should look like:

https://cohassetpso.org/images/bg.png

Do you want to remove this whole portion?

https://prnt.sc/xgbuW-jrcQd4

Could you please mark it in your screenshot which portion do you want to hide?

This is what it looks like when I go in SPPB to edit the page.

Correct view of entire page as seen in SPPB edit:

But when it goes live, anything outside the box is cut off. I want the page to look like what it looks like when editing.

So yes, the boxed-in area needs to be coded to remove the sides that are circled in red. See image below of live webpage with red circles indicating what view is actually shown live:

Which resolution you have faced this issue? Because on Desktop it seems fine on my end.

https://prnt.sc/1GQd_CkKOD-v

Hello, no it is not fine on the desktop either. The sides are cut off as you can see in the example where the arrows are pointing. I think it's just an easy CSS fix but I don't know what CSS style is determining that the component should be boxed in instead of showing the entire space with background elements.

Here is the example:

Use this custom CSS

.view-article #sp-main-body{
        background-color: #dcfaff !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.