Jump to content

Custom Code in block Squarespace 7.1

Recommended Posts

Site URL: https://mypersonaltestingwebsite.squarespace.com/agenda

Hello everyone,

Currently trying out some custom coding and I am having some width-related issues as the image in the background should cover the whole background and not only the code section as you can see on the page: https://mypersonaltestingwebsite.squarespace.com/agenda 

Can anyone tell me how to have a full width code section with 0 padding top/bottom visualisation of this timeline? 

Thanks a lot for your patience!

Looking forward for your answer!

Screenshot 2021-01-13 at 23.55.54.png

Link to comment
2 hours ago, Drewster said:

Site URL: https://mypersonaltestingwebsite.squarespace.com/agenda

Hello everyone,

Currently trying out some custom coding and I am having some width-related issues as the image in the background should cover the whole background and not only the code section as you can see on the page: https://mypersonaltestingwebsite.squarespace.com/agenda 

Can anyone tell me how to have a full width code section with 0 padding top/bottom visualisation of this timeline? 

Thanks a lot for your patience!

Looking forward for your answer!

Screenshot 2021-01-13 at 23.55.54.png

You did a good job with the slider! Please try what I changes to see if it work, in Design->Custom CSS

section[data-section-id="5ffde71ac787b51b434a31e9"] .content-wrapper {
  		padding: 0 !important;
}
@media only screen and (min-width: 640px) {
  	section[data-section-id="5ffde71ac787b51b434a31e9"] .content-wrapper .timeline-container {
          padding-left: 25%;
          padding-right: 25%;
          box-sizing: border-box;
        }
}

image.thumb.png.550dff91eb4ccf4aa1035a673c0f9ce4.png

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi Bangank!

Thank you for your answer! I just adapted the CSS as you suggested but as soon as I injected it, the only change I was able to see was that the left-sided  content moved to the center while the background size hasn't changed. 

Again, really appreciate your support on this!1070485427_Screenshot2021-01-14at08_53_52.thumb.png.cd3fa96edc5bdbfdb1e1586bd64e139a.png

Link to comment
On 1/14/2021 at 3:05 PM, Drewster said:

Hi Bangank!

Thank you for your answer! I just adapted the CSS as you suggested but as soon as I injected it, the only change I was able to see was that the left-sided  content moved to the center while the background size hasn't changed. 

Again, really appreciate your support on this!1070485427_Screenshot2021-01-14at08_53_52.thumb.png.cd3fa96edc5bdbfdb1e1586bd64e139a.png

Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.