Jump to content

Make a CODE BLOCK full screen width (full bleed)

Recommended Posts

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.

Edited by casson
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Link to comment
  • 3 months later...

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.