Jump to content

Remove padding on Full-bleed Image

Recommended Posts

Hi,

What CSS code would be required to remove the bottom padding on a full bleed image?

I would like the padding at the bottom removed, so my markdown block can sit right at the bottom of the image

Thanks for the help.

Link to comment
  • Replies 11
  • Views 619
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks everyone. Yeah markdown is in the same section as the image.

I'd like the quote that says

"A PROGRAM OF MUSIC THAT IS ACCESSIBLE TO ALL, CELEBRATING THE CREATION AND PERFORMANCE OF NEW MUSIC IN AUSTRALIA"

To be at everyone's feet. However, when I try moving the quote lower to do this, the whole image just gets bigger and stays in its relative position - so I assume its because the image has padding?

https://celery-rhubarb-mdm2.squarespace.com

password: inventi

Edited by IEn
Link to comment
On 7/3/2022 at 6:23 PM, IEn said:

Thanks everyone. Yeah markdown is in the same section as the image.

I'd like the quote that says

"A PROGRAM OF MUSIC THAT IS ACCESSIBLE TO ALL, CELEBRATING THE CREATION AND PERFORMANCE OF NEW MUSIC IN AUSTRALIA"

To be at everyone's feet. However, when I try moving the quote lower to do this, the whole image just gets bigger and stays in its relative position - so I assume its because the image has padding?

https://celery-rhubarb-mdm2.squarespace.com

password: inventi

Remove this red padding??

Screenshot_3.thumb.png.ce885598a61336bcdddc0e047879b2a8.png

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
19 hours ago, IEn said:

Yeah I think so. That will allow the piece of text to sit down at the bottom right?

Try adding to Design > Custom CSS

[data-section-id="62760cee60278307ec5a0674"] .content-wrapper {
    padding-bottom: 0px !important;
}

 

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

Mate you're a legend. That worked. Thanks heaps.

Is there a way to do the same for mobile view? I'm moving the markdown block lower by using spacers in the desktop view. Although, spacers aren't appearing in the mobile view.

And thanks again.

Link to comment
3 hours ago, IEn said:

Mate you're a legend. That worked. Thanks heaps.

Is there a way to do the same for mobile view? I'm moving the markdown block lower by using spacers in the desktop view. Although, spacers aren't appearing in the mobile view.

And thanks again.

Add this CSS

@media screen and (max-width:767px) {
[data-section-id="62760cee60278307ec5a0674"] {
    align-items: Flex-end !important;
}
}

 

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
19 hours ago, IEn said:

Amazing. Thanks heaps man - you're a legend.

Out of interest, what do you think of the way I have added the quote to the page? Do you think there is a design that would look better? 

I'm not good with UI/UX. If you need feedback, you try posting to category Feedback or post to some groups on Facebook

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

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.