Add Custom Padding Between Carousel Content

Site URL: https://krystalsim-33.squarespace.com/

Password: brineintopedro

I'm trying to correct the padding for the custom styling but am unable to without shifting the whole container right.

It's supposed to look like this:

Hey Simkrys, what you're looking for is margin not padding. I've first targeted the specific summary block you're using then the summary items within it. Use this bit of CSS:

#block-yui_3_17_2_1_1616980247371_7874 .summary-item {
   margin:10px;
}

Hope that helps!

thanks so much! i didnt think to target the specific block since i wanted the same styling for all carousels. this'll point me in the rught direction, thanks!

On 3/29/2021 at 1:23 PM, simkrys said:

thanks so much! i didnt think to target the specific block since i wanted the same styling for all carousels. this'll point me in the rught direction, thanks!

On tablet, the layout doesn't look good.

Do you want to increase its width?

hey @tuanphan yes! i'd like to increase the width and make it responsive.

i haven't touched tablet or mobile view yet and am not looking forward to it 😢

hi @tuanphan i tried editing tablet view but nothing seems to be changing. I have this so far:

@media screen and (max-width:767){

//Poster Image Card
.sqs-block-image .design-layout-poster .image-card{
    width: 90vw;
	}
}

On 4/2/2021 at 4:30 AM, simkrys said:

hi @tuanphan i tried editing tablet view but nothing seems to be changing. I have this so far:

@media screen and (max-width:767){

//Poster Image Card
.sqs-block-image .design-layout-poster .image-card{
    width: 90vw;
	}
}

 

Add to Design > Custom CSS

/* Fix banner text */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60612d0cef866f45aff9b5ae .image-card {
    margin-left: 10vw !important;
    margin-right: 0 !important;
    width: 60%;
    margin-top: -40vw;
}
}