[Resolved] Problem with formatting a content template

[Author]

Posts

[frankW]

I spend a view on a content template on the following wesite: hidden link 3 /. I have 3 problems formatting the content template.

1. The text area (slide-inner-box) should be positioned horizontally in the center of the atelectic picture. Vertically, the slide-inner-box should survive the same for all items below. (about 50px?)

2. The distance between the slide-inner-box and the next item should always be approx. 10 px.

3. How can this content template be best formatted for responsive views?

Thanks a lot!

[Nigel]

Because you currently use position: absolute to position the text box over the image it means that you take that text box out of the normal document flow, and setting margins on it to modify the spacing between slides will have no effect.

A better solution would be to keep the text box within the normal document flow using position: relative and then apply a negative margin to it so that it moves up over the previous image, but brings everything else along with it.

I created a demo for your on codepen: hidden link

With the method it is fairly trivial to modify the spacing.

As for responsiveness, as you are not displaying a grid and instead a single column it pretty much is already, certainly in the linked demo.

[frankW]

My issue is resolved now. Thank you!