[Resolved] Inside Div issue – Connections theme

[Matt]

I am trying to get a little div of text to stick to the bottom left or bottom right corner to credit an image used in the header

The connections theme uses a Home Page header element for the home page, and a separate Page Header for the other pages. At least that’s how I’m using it.

I’m trying to add text (dynamically using a custom field per page, which is working fine at the moment) as a Headline/div.

I’ve got a few classes for adding photo credit to various images, see below.

.image-credit, .image-credit-left, .image-credit-right {
  color: var(--base-2);
	 background-color: rgba(23, 23, 23, 0.3);
	 font-size: 17px;
	padding: 0.25rem;
}

.image-credit a, .image-credit-left a, .image-credit-right a {
  color: var(--base);
}

.image-credit {
	position:absolute;
	bottom: 0;
	right: 0;
}

.image-credit-left {
	float: left;
	bottom: 0;
	left: 0;
}

.image-credit-right {
	float: right;
	bottom: 0;
	right: 0;
}

The one that works perfectly on the home page, doesn’t work on other pages. That div class is .image-credit and uses position:absolute. I’ve also got image-credit-left and image-credit-right that float either side of images, these work on a couple of other images you can see on the home page as testimonials.

It looks like the problem is that if I put the headline in the page header inside the main container, it’s constrained too much because it gets puts inside the “gb-inside-container”. If I move it in firefox inspector to be inside “gb-container-ecb82962” it’s fine.

However, if I move the headline outside of the div in the editor, it’s not caught inside the main “gb-container” and goes outside of it, messing up the page.

Can you help? I’ve attached a video of this.

[Ying]

Hi there,

The home page is using position: absolute; while the faq page is using float: right;

I would suggest using position: absolute; for the text on all pages.

If the position is not correct, set a z-index value for the parent container of the text, this will add position: relative; to the container.

[Matt]

Yes, it currently uses float:right, but you can switch the class to the “image-credit” one in the CSS above and the issue becomes that the text box sits outside of the main div.

I added a z-index of 1 to the inner div of the main container and that’s fixed it while using the position:absolute class. Tganks.

[Ying]

No problem 🙂

[Author]

Posts