CODEWITHSUNDEEP
htmlcsswordpressstretch
user3158006
user3158006

Reputation: 47

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!

Upvotes: 2

Views: 5437

Answers (3)

Ranushka Lakmal Sankalpa
Ranushka Lakmal Sankalpa

Reputation: 921

  #full-width-image {
    width: 100vw;
    height: auto;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

#content {
    padding-top: 100px;  /* Adjust according to your header's height */
}


.site-content, .page-header, .container {
    width: 100%;
    overflow: visible;
}

Upvotes: 0

Arjan Knol
Arjan Knol

Reputation: 940

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;
}

Upvotes: 0

Alex
Alex

Reputation: 2775

Try to add this CSS:

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

Upvotes: 0

Related Questions