Excess space

Backlight 4, 5 & 6 Support
#1

I’m trying to tighten up this area:

Capture d'écran_ 2025-04-22 à 15.08.35
Capture d'écran_ 2025-04-22 à 15.08.351637×502 38.1 KB

The space between the image animation and the “Scenographies” text is excessive. In the inspector, it looks like this:
Capture d'écran_ 2025-04-22 à 14.37.48

Capture d'écran_ 2025-04-22 à 14.38.15
Capture d'écran_ 2025-04-22 à 14.38.15935×474 34.6 KB

That green area is padding. Can I reduce this top-padding to 0? So, I wrote the “clearfix” line:

.the__copy {
	background-color: #4f4f4f;
	font-size: 1rem;
	line-height: 1.25rem;
	/*margin-top: 10px;*/
	max-width: 1440px;
	padding: 0 50px 75px 50px;
	text-align: center;
	width: 100%;
}

.content clearfix {
	padding-top: 0
}

Of course, it doesn’t work. but why?

pideja.ca

#2

Because then there’s the padding of 100px of the enclosed element:

.the__copy > .content {
    background-color: rgb(79, 79, 79);
    border-radius: 0px;
    box-shadow: none;
    padding: 100px 50px; <--
#3

I found the culprit in Backlight/Page Template/Pangolin Page/Content Area/Main Copy.
But, this is like nuking the padding from all other pages. All the other pages will have their text way up there, next to the Header. Not what I want.
The question is:how to address the Home page, or any other page for that matter, without creating havoc in the other pages? Will I have to create all different page templates for each page? Sounds tedious and time-consuming, unless there is a way to do this quickly and safely.

#4

If all your pages except the home page need that padding, you have a couple of options:

  1. Create a new page template just for the Home page

  2. Use custom css to target the copy padding on just the home page

#5

I think I found the source code that relates to my Home page:

</head>

<body class="pangolin type-page template-id-8 template-identifier-Pages-BWRAO pages-template-id-6 pages-template-identifier-home album-template-id-21 album-template-identifier-slideshow slug-introduction cart-unready crg-unready" data-layout="1col right">

from witch, I chose the pages-template-identifier-home and inserted it into my CSS, like so:

.pages-template-identifier-home .the__copy > .content {
    background-color: rgb(79, 79, 79);
    border-radius: 0px;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 1440px;
}

This doesn’t seem to do anything. Wrong identifier? Wrong syntax in the CSS?

#6

Maybe you’re just editing right now, but it’s commented and has a missing closing comment!

/*-------------------------------------Home page text placement----------------------------------*/
/*.pages-template-id-8 #the__copy > .content {
    background-color: rgb(79, 79, 79);
    border-radius: 0;
    box-shadow: none;
    max-width: 1440px;
    padding-top: : 0;
    width: 100%;
   
}

BTW, when you override a CSS settings, I try only to set the values I want to overwrite and leave the others alone. So I’d only set the padding-top and nothing else.

#7

Frankly, I think I’m mixed up here…consider this CSS:

/*------------------------------------------------------------------------------------------------------*/
.the__copy {
	background-color: #4f4f4f;
	font-size: 1rem;
	line-height: 1.25rem;
	max-width: 1440px;
	padding-bottom:75px;
	padding-top: 0;
	text-align: center;
	width: 100%;
}

/*-------------------------------------Home page text placement----------------------------------*/
.pages-template-id-8 #the__copy > .content {
    background-color: rgb(79, 79, 79);
    border-radius: 0;
    box-shadow: none;
    max-width: 1440px;
    padding-top: : 0;
    width: 100%;
   
}/*-------------------------------------------Text formating------------------------------------------*/
.slug-about .the__copy {
	background-color: #4f4f4f;
	font-size: 1.25em;
	line-height: 1.40rem;
	padding: 20px 50px 20px 50px;
	text-align: left;
	
}

p {
	margin-bottom: 20px;
	/* Ajoute une marge de 20 pixels sous chaque paragraphe */
}

Three sections to deal with “the copy” seems a lot. At least one of these sections must be redondent or useless. But, wich one?

#8

Looks like I finally have got it somewhat right. I say “somewhat” because although the text on the Home page is set properly, the side pallet, containing the Menu, tends to not close when a selection is made. But, only in Chrome. Maybe it will settle down after a reboot, who knows?

Thanks again Rod and Daniel

P.S. If you care to see the final CSS:

/*------------------------------------------------------------------------------------------------------*/
.the__copy {
	background-color: #4f4f4f;
	font-size: 1rem;
	line-height: 1.25rem;
	max-width: 1440px;
	padding-bottom:75px;
	padding-top: 0;
	text-align: center;
	width: 100%;
}

/*-------------------------------------Home page text placement----------------------------------*/
.pages-template-identifier-home  .the__copy > .content {
    background-color: rgb(79, 79, 79);
    border-radius: 0;
    box-shadow: none;
    max-width: 1440px;
    padding-top:  0;
    width: 100%;
  }
  
/*-------------------------------------------Text formating------------------------------------------*/
.slug-about .the__copy {
	background-color: #4f4f4f;
	font-size: 1.25em;
	line-height: 1.40rem;
	padding: 20px 50px 20px 50px;
	text-align: justify;

}

p {
	margin-bottom: 20px;
	/* Ajoute une marge de 20 pixels sous chaque paragraphe */
}
#9

It’s working fine for me in Chrome

#10

As expected, relaunching Chrome settled this issue.