How to detect whether an image is visible or not?

Question

So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.

When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.

<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
    <div class="row">
        <div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
            <div class="row">
                <div class="@(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
                    <div class="whitepaper">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.

My css for .gatedbg

@media (max-width: 960px) {
    .gatedbg {
        background-image: none !important;
    }
}

Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?

If I understood correctly, I cannot use javascript in this razor page because it is server side code?

Answer 1

These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?

If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);

otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.