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, Keyword Highlighter
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

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.