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
  • Replies 4
  • Created
  • Last Reply
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.