Excess spacing on album page

Backlight 4, 5 & 6 Support
#1

I’ve addressed this issue before, but I still can’t the layout I want: there is too much padding between the album thumbnails and the credits and the top of the page.
In backlight/Pages I put a padding value of 200px to account for the ABOUT page.So, I am trying to target that section…In inspector, I see this:

album
album1865×837 149 KB

But where is the ID? I tried to use “content clearfix” in the CSS but nothing happens.

#2

Your screen shot doesn’t show which css file that padding is coming from

If you need to target only the About page, do that in custom css using the slug-xxxx class for the About page, which is found in the body tag

A link to the site would help

#3

I’m sorry about the missing link.
The About page is https://pideja.ca/about/
And the credits are in every album.
The latest one is :
https://pideja.ca/galleries/01_duceppe/2025-2026/02-corps_fantomes/

#4

I can only look on my ipad right now (probing is limited), but it looks like all that padding is coming from your page template.
Set the padding for what the majority of the site needs and address the About page with custom css.

#5

Have a look at the padding settings in Backlight designer:

image
image876×264 27.9 KB

For once, I don’t think you need to use custom css :slight_smile:

#6

I am aware of the situation. I have corrected the top-bottom padding to 20px in the Pages-pideja/Content area/Main Colum/Main copy, and it works fine, all the more since I now place the credits below the thumbnails.
However, I now have to find the correct way to correct the padding on the ABOUT and the CONTACT pages.

#7

Maybe

.pages-template-identifier-about .the__copy .content {
    padding-top: 200px;
}

and

.pages-template-identifier-contact .the__copy .content {
    padding-top: 200px;
}

or for both pages at once

.pages-template-identifier-about .the__copy .content,
.pages-template-identifier-contact .the__copy .content
 {
    padding-top: 200px;
}
#8

Seems to work fine on the large scree, However, on the mobile phon, not so good.

/@media only screen and (max-device-width: 768px) {
  .the__copy {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: auto;
  }
  
.pages-template-identifier-about .the__copy .content,
.pages-template-identifier-contact .the__copy .content
 {
    padding-top: 10px;
}ype or paste code here
#9

There’s a syntax error:

/@media only screen and (max-device-width: 768px) {

Did you notice the leading forward slash? Remove it and try again.

#10

Looks like there could be a missing closing bracket too?

#12

It looks like, but the CSS file has the correct closing bracket.