Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
casson

Make a CODE BLOCK full screen width (full bleed)

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Code Blocks may contain HTML or JavaScript that isn't displayed so the blocks themselves don't have a size per se. You will need to set the size of the elements that you are adding using the Code Block. That may be images, text or an iframe. If the elements need to be responsive, you'll need to write the responsive code using CSS media queries.

It is impossible to be more specific without

  • a working link to the page in your question
  • details of the code you have added
  • details about what the code is supposed to do.

Note that trial sites aren't visible to us unless you set a site password and tell us what it is, so that we can view it.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked six weeks in advance for jobs longer than an hour.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

As I mentioned, a link is essential. Without it we'd spend a huge amount of unproductive time going back and forth.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked six weeks in advance for jobs longer than an hour.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...