htmlcsswordpressstretch

Stretch image (not background) to full browser width in Wordpress with HTML and CSS


I'm trying to make a GIF display to full browser size, however I want it below menu (site-header div) and above footer. In order to do that I hid the page-header div and am stuck in a small container. `

<div id="content" class="site-content"><div class="page-header"><div class="container"><h1 class="entry-title">Kampania</h1></div></div><div id="content-inside" class="container no-sidebar"><div id="primary" class="content-area"><main id="main" class="site-main" role="main"><article id="post-1259" class="post-1259 page type-page status-publish hentry"><header class="entry-header"></header><div class="entry-content"><p><img src="https://shop.sin.org.pl/wp-content/uploads/2017/03/gif.gif" id="selector"></p></div></article></main></div></div></div>

What is packed in div "content-area" I need to move to the "site-content" div. How do I achieve that?

https://shop.sin.org.pl/pl/kampania/

Thanks!


Solution

  • Have you tried setting your page template to 100% width?

    If that doesn't work you can manually set the page width to 100%;

    #content-inside {
        width:100%;
        max-width:inherit !important;
        padding:0 !important;
    }