Resizing the Carousel to match Layout Grid

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Resizing the Carousel to match Layout Grid

Post by Magical » Sat Dec 23, 2017 12:48 am

http://d2biz.com/
http://d2biz.com/acme.wbs


Greetings,

I ran into a roadblock using a template with Layout Grids. I put a carousel but I need the carousel to match the max width of 1024 same as the Layout grid. The carousel just spreads all across the screen and it looks odd. If I change the attribute of the carousel from full width and floating to none, then all the elements underneath creep up.

Also, the on-load Hide seems to lag and visitor can see the hidden page for a few seconds. That page should only be visible when they click on the learn more icon.

Any ideas or help will be greatly appreciated.

User avatar
Bluesman
 
 
Posts: 508
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Bluesman » Sat Dec 23, 2017 4:23 am

If you are inserting the carousel inside a layout grid... then you have problems. The Carousel is a container that shall be used as a layer or layout grid directly on the page as full width and floating. Not inside another container/layout.
"Make My Day"

See my Website

User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Magical » Sat Dec 23, 2017 4:36 am

No, I tried to insert the carousel inside a layout grid, but it will not stick. The carousel is in between two layout Grids, one on top and one beneath it. You can fix the max-width of a layout Grid, but not of a carousel. The layout grids are maxed out at 1024, but the carousel simply spreads out to whatever the size of the view port is. On small screens that is fine, but on a 27" it does not look good at all.

Will need to do some re-design or come up with a creative solution.

User avatar
Pablo
 
Posts: 12676
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Pablo » Sat Dec 23, 2017 7:47 am

A full width Carousel will always be 100% of the viewport.
However the content of the Carousel can be any size you want (with breakpoints)

User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Magical » Sun Dec 24, 2017 4:03 pm

Since the images are embedded in the carousel you cannot individually set their properties they would follow the properties defined a the level of the parent.

Can I set the CSS max-width property using the custom style option? If so is there an example of using the custom style option I couldn't find one in the tutorials.

User avatar
Pablo
 
Posts: 12676
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Pablo » Sun Dec 24, 2017 4:42 pm

A Carousel is a multi layer container. The container size is flexible (full width), but the slides have a fixed size (as with all layers).
If you set the background image then it will fIll the entire background, unless of course you do not stretch or repeat it.

However since the slides of the carousel have a fixed size, you can place images on it (instead of using background images) and make them any size you want.

You can add custom code for any object in the Page HTML or an HTML object.

Note that the blog object can also be used as Carousel, in that as the content will be flexible as well.
Demo: http://wysiwygwebbuilder.com/support/wb ... ousel.html

User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Magical » Sun Dec 24, 2017 7:20 pm

Thank you Pablo, I see what I did; I loaded all the images as background images. In that mode it is not possible to shrink the images.

After reading your post, I converted all the image slides on the carousel to transparent, then dropped an image object on top of each of the slide and set their width. Since my jpg are already at 970 width the images will not go across the entire width of the page, they are also restricted by the image box.

Now the carousel works as I want it to. Limiting the images to 970 width.

Thank you for the excellent support.

PS You cannot for some reason drop a .jpeg on the carousel slide. You have to rename it to .jpg.

User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Magical » Mon Dec 25, 2017 2:04 am

http://d2biz.com/
http://d2biz.com/acme.wbs

I have the layout Grids figured out, but ran into a strange problem. Here are the steps to recreate it:

1 - Go to http://d2biz.com/
2 - The site should open perfectly in default view of 970 or more
3 - If you scroll down to the bottom there is link for "terms of service"
4 - Click on the link and you should see the terms of service pulled up
5 - To close click on the blue X - and it should close the TOS. Everything works in default mode
6- Start to reduce the browser horizontally
7 - When you pass 768 the terms of service blends through on the main page, its supposed to be hidden until the user clicks the link
8 - The X in upper right corner to hide/close the terms of service no longer works
9 - Start to expand the browser and once you get past 768 it works again.

What i did:
1 - I created a layer1
2 - I placed the TOS (Text Box) on top of Layer1 made sure there was enough room all around
3 - I added an Font Awesome Icon to Layer 1 and set its on-click property to Hide Layer1
3 - I set the properties for layer1 to Docking Layer with the Mode set as Fill
4- On the Page property I added an action to Hide Layer 1 On Load
5 - I added a link (Smart Link) on the main page and set the on click property to Show Layer 1
6- For each of the Breakpoints i adjusted the width of Layer 1 to prevent any overflow

The wbs is at http://d2biz.com/acme.wbs

User avatar
Pablo
 
Posts: 12676
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Pablo » Mon Dec 25, 2017 7:34 am

Please read 'When using events, the visibility is affected by breakpoints' in the FAQ:
viewtopic.php?f=10&t=63817

User avatar
Magical
 
 
Posts: 112
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Resizing the Carousel to match Layout Grid

Post by Magical » Mon Dec 25, 2017 9:18 pm

Cool! Fixed. It was active for all pages, I thought that was the default so did not touch it. Once took it off events work as expected. Thank you!

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests