Make a CODE BLOCK full screen width (full bleed)

Hi,

Is there some code that will make a 'code block' fill the full bleed of the screen on the homepage? The code block currently retrieves and displays two images (one on hover only) but the images don't spread full bleed as I can only manually drag the code block out to a certain width. I'd need a 'responsive' solution to perform properly across all devices (smartphone etc.). Any help would be much appreciated.

Hi and thanks for responding. I'm using 7.1 for reference and the code block is on the homepage. I can't really give out a password at the moment because of the site's content but can confirm what I have at the moment regarding code. Hopefully you can advise from this? I have got this far from reading forums and I'm not (as you can probably tell) a developer!

The HTML in the code block is as follows:

<a href="https://chicory-gar-gmkw.squarespace.com/shop">
<div id="cf">
  <img class="bottom" src="https://static1.squarespace.com/static/5dc7fcb97665c170c504ac05/t/5dc80acfb9580a7364fa8ac2/1573391056583/Gothic+Shop.jpg" />
  <img class="top" src="https://static1.squarespace.com/static/5dc7fcb97665c170c504ac05/t/5dc80abe394ef27dc9a9523b/1573391039411/Gothic+Ambience.jpg" />
</div>
</a>

The CSS in Design > Custom CSS is as below. The last section is my attempt to try and get the code block to full width but it's not playing.

#cf {
  position:relative;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

#block-yui_3_17_2_1_1573563399764_11327 {
  max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
 padding-top: 0 !important;
  padding-bottom: 0 !important;
  //margin-left: 0px;
  // margin-right: 0px;
  }

ok, understood, the landing page which I have just started working on is at... https://chicory-gar-gmkw.squarespace.com/home

The code block in question is the image 'Gothic Ambience'

I'll send you the password directly.

Thanks for your help.

Similar Q here,

I have a code block that renders video in a card layout. As a result there are now two scrolling sections... the page its self and the video card section from the code block. 

Any idea on how to make the code block area with the video cards full screen so that there is only one scrolling section. Currenlty it is confusing for the user that one can scroll the page and the inner area playing the videos. We want it to be all the same. 

https://www.goldfishads.com/screens-full-screen?gallery=P2vSiZPyBJg

removed css overflow: auto

Works now!