Jump to content

Reduce spacing between title and carousel

Recommended Posts

Site URL: https://hexaflexagon-beagle-y2r2.squarespace.com

Hi @tuanphan

 

I have a huge space between the title and temoignage carousel that I would like to reduce on mobile version.

Can you help me ?

Thank you !

Here is the code :

//Témoignages - Game Changer//
section[data-section-id="61bc5a05a27d2613355219a5"]{
  .user-items-list .list-section-title p {
font-family: ivypresto-display, serif!important;
font-weight: 100;
font-style: normal;  
text-transform: uppercase;
  }}
.user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__title{
  font-family: roc-grotesk-wide,sans-serif;
  font-weight: 400;
  font-style: normal;  
text-transform: uppercase;
  font-size: 20px!important;
  color: #684B51!important
}
.user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__description{
  font-size: 16px!important;
}
section[data-section-id="61bc5a05a27d2613355219a5"]{.list-section-button{
  font-family: roc-grotesk-wide,sans-serif;
  text-transform: uppercase;
   font-size: 15px;
   line-height: 22px;
  background: #684B51
  }}
section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list-banner-slideshow__arrow-icon-background-area{
  background: #684B51!important;
  opacity: 1!important
    
  }}
section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list:hover .user-items-list-banner-slideshow__arrow-button{
  opacity: 80%!important
    
  }}

 

https://hexaflexagon-beagle-y2r2.squarespace.com/game-changer

Pass : Jennifer

 

Capture d’écran 2022-01-04 à 11.18.45.png

Link to comment
12 hours ago, Esoes_design said:

Site URL: https://hexaflexagon-beagle-y2r2.squarespace.com

Hi @tuanphan

 

I have a huge space between the title and temoignage carousel that I would like to reduce on mobile version.

Can you help me ?

Thank you !

Here is the code :

//Témoignages - Game Changer//
section[data-section-id="61bc5a05a27d2613355219a5"]{
  .user-items-list .list-section-title p {
font-family: ivypresto-display, serif!important;
font-weight: 100;
font-style: normal;  
text-transform: uppercase;
  }}
.user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__title{
  font-family: roc-grotesk-wide,sans-serif;
  font-weight: 400;
  font-style: normal;  
text-transform: uppercase;
  font-size: 20px!important;
  color: #684B51!important
}
.user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__description{
  font-size: 16px!important;
}
section[data-section-id="61bc5a05a27d2613355219a5"]{.list-section-button{
  font-family: roc-grotesk-wide,sans-serif;
  text-transform: uppercase;
   font-size: 15px;
   line-height: 22px;
  background: #684B51
  }}
section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list-banner-slideshow__arrow-icon-background-area{
  background: #684B51!important;
  opacity: 1!important
    
  }}
section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list:hover .user-items-list-banner-slideshow__arrow-button{
  opacity: 80%!important
    
  }}

 

https://hexaflexagon-beagle-y2r2.squarespace.com/game-changer

Pass : Jennifer

 

Capture d’écran 2022-01-04 à 11.18.45.png

Try adding to Home > Design > Custom Css

section[data-section-id="61bc5a05a27d2613355219a5"] {
	.list-section-title {
		padding-bottom: 0 !important;
	}
	.slide-content.list-item-card-background {
		margin-top: 0;
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...

Hi there @Beyondspace I am trying to accomplish something similar and was wondering if this code snippet could be adapted. I am trying to add some padding between the title of the carousel and the images, they're sitting very close together despite type size. I am using the below code to adjust the heading font. Any input would be much appreciated, thanks!

//Summary Carousel Titles//
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: LS Medium;
font-weight: 600;
font-size:20px !important;
color: #000000;
text-transform: UP;
font-style: medium; 
} }

url: https://www.mwlit.com/illustration pw:(spacebar)

Link to comment
On 3/20/2023 at 11:32 PM, nmbenson1 said:

Hi there I am trying to accomplish something similar and was wondering if this code snippet could be adapted. I am trying to add some padding between the title of the carousel and the images, they're sitting very close together despite type size. I am using the below code to adjust the heading font. Any input would be much appreciated, thanks!

//Summary Carousel Titles//
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: LS Medium;
font-weight: 600;
font-size:20px !important;
color: #000000;
text-transform: UP;
font-style: medium; 
} }

url: https://www.mwlit.com/illustration pw:(spacebar)

Password is incorrect. Can you check it again?

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.