Carousel as Full Width & Floating, Image, and Breakpoints

[protectourlands]

I have a carousel object set as Full Width and Floating. I have slid an image into the first slide and centered it. The image must get smaller in smaller breakpoints so I set the carousel to "Responsive Carousel". The responsive resizing works fine but the image does not stay centered in various window sizes. If I shut off Responsive Carousel the image centers fine but does not resize in smaller breakpoints. Is there a way to work around this?

[Pablo]

Normally, when using images in a carousel, they are added as background image for the slides. Then you can control the alignment and size via the background properties. Also, the images will scale automatically.

Demos:
https://www.wysiwygwebbuilder.com/suppo ... _band.html
https://www.wysiwygwebbuilder.com/suppo ... opper.html

[protectourlands]

Thank you Pablo. I already have large images as backgrounds. These smaller images are "click here" buttons, logos, and other images that need to be layered. The logos especially look bad not centered.

I'll try some other image rotator objects and see if I can make this work. Best regards.

[protectourlands]

I tried locking the layer so the smaller objects don't become children and can act independently from the carousel settings, but they then get covered by the carousel.

[Pablo]

If you need further assistance then please share a demo project so I can see all your settings.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[protectourlands]

Thank you Pablo. I sent it to you. It is the page "index".

You will see the logo image only centers just before a new breakpoint is reached.

[Pablo]

Your demo seems to work correct. For me, the image is always centered.
What do I need to do to see the problem?

[protectourlands]

It will show centered on the workpage but not when you preview it. In a browser the logo is off center unless your screen width is at the breakpoint. In other words the logo does not auto center to the viewport. The carousel background image does, but not the placed logo image. If I remove the responsive carousel option, the logo auto centers, but then it won't resize in the smaller breakpoints.

Thank you so much for reviewing this. I hope my explanation makes sense.

[crispy68]

Do you have a simple demo to look at?

[Pablo]

It will show centered on the workpage but not when you preview it. In a browser the logo is off center unless your screen width is at the breakpoint. In other words the logo does not auto center to the viewport. The carousel background image does, but not the placed logo image. If I remove the responsive carousel option, the logo auto centers, but then it won't resize in the smaller breakpoints.

This is expected behavior because with your current settings layout is 'fixed / absolute'.
So, each breakpoint has a fixed container with the size of the breakpoint.

I think it's better to use a flexible carousel instead with alignment set to center, middle. In that case, set full width property of the image to 'false' so it can have a different size in each breakpoint.

[protectourlands]

I think it's better to use a flexible carousel instead with alignment set to center, middle. In that case, set full width property of the image to 'false' so it can have a different size in each breakpoint.

Pablo, It looks like I can make this work. I didn't know flexible mode works with layers that float. I need the added image to be center but not necessarily middle. I can use padding to adjust that. I am so grateful to you, not only for this incredible software, but for the help you provide to your users.

Ron, thank you for offering to help. If you still want to see the demo I can send it to you directly.

[protectourlands]

I have made a demo using generic images instead of the client images.
http://www.icandyexperts.com/Carousel_Demo.zip

The first page is the issue described. The second page is Pablo's solution. I hope this helps others.

[crispy68]

@protectourlands,

I downloaded your project and took a look at the "issue" page. One thing I did notice is you have page centering set to center but since you are using a floating carousel it should be set to do not center the page.

However, I must be missing something. When I preview the page, the black image stays centered and changes sizes when the breakpoints are hit. I do not see any issue with it staying centered.

[protectourlands]

That is a mystery. On my end the black image does not stay centered in the issue page. It only centers just before the next breakpoint. It does however respond in size to different breakpoints. If you open the carousel manager and remove "Responsive Carousel" the black image self centers but does not respond to the breakpoints for sizing.

Are you sure you are looking at the "issue" page preview and not the "solution" page?

[crispy68]

Yes, I am looking at the 'issue' page. Maybe I'm missing the issue (no pun intended). I've published just that page here.

When I shrink the browser window, the black image in the center seems to always stay centered when I view it. Does it the same for you?

[protectourlands]

This is crazy. Yeah everything looks good in your "issue" page publish.

Here is my issue page publish.
http://www.icandyexperts.com/demo/issue.html

Black image not centering. What a mystery.

[protectourlands]

The difference I see between the test pages is a div tag not in yours but in mine after the body open tag

Code: Select all

<div id="container">
   </div>

[crispy68]

That's because your demo has page centering set to center. In my previous post I mentioned this. When you are using floating objects, you need to set this to do not center the page.

[protectourlands]

Oh yes. I see that now. Thank you so much. Everything is working great now. I sure do appreciate your help.