Topic: GPP / Inner container / Layout / Dynamic position

locke85
April 18, 2024 at 5:32 am

Hi there,

I’m using the borders of an inner container as a picture frame, which creates a visual effect around the central item of a carrousel.

In the current version I’m using a static positioning (margin based) for the two-part frame.

How would change the settings of the frame-top- and frame-bottom-container in order to position them in the center of the wrapper-container no matter which screen size?

Thanks,
Jan
David
April 18, 2024 at 6:10 am

Hi there,

tough one, considering if you view the front end, the carousel isn’t center, and that changes depending on the screens size.

first thing to do would be to make sure the carousel always has a centred item.
Then revisit hoe to put the frame into place.
locke85
April 18, 2024 at 6:52 am
You can read my mind, David 😉

That is exactly what I did in the meantime:
```
responsive:{
        0:{
          items:1,
	  stagePadding: 40,
          margin: 100,
	  center: true,
        },
```
I then removed the margin setting and made it work.

Is there any documentation/ tutorial that helps me better understand how to use relative positioning (layout “block”, “inline”, “inline-flex” etc.)?

Thanks,
Jan
David
April 19, 2024 at 2:59 am
Some info on the position property here:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Consider you have the container with the carousel-wrap class as the parent element to which you want to centre your “frame”. Begin by setting its Layout > Position to Relative, or use this CSS to do the same:
```
.carousel-wrap {
    position: relative;
}
```
You can the add a container inside your carousel-wrap and give it a class of carousel-frame
This frame you could position absolutely in the center with this CSS:
```
.carousel-frame {
    position: absolute:
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
}
```
OR Alternatively you could position the carousel-frame to cover the entire carousel-wrap:
```
.carousel-frame {
    position: absolute:
    inset: 0;
    pointer-events: none;
}
```
Then you can add blocks inside the carousel-frame, and set the carousel-frame layout to flex and justify / align those blocks to the center.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

GPP / Inner container / Layout / Dynamic position