[Resolved] Full width and normal width container in a view

[Author]

Posts

[lucasD-4]

I have created a view that contains a full width container and a normal width container. When I place this view in my template, both containers have only normal width. If I place the view in a full width container, both containers in the view will have full width, including the container that is supposed to have a normal width. How do I achieve that the width of each container is displayed exactly as I set it when I created the view?

[Luo Yang]

Hello,

I assume we are talking about "Toolset Container" block, I just tried it in my localhost, but I don't see the options you mentioned above: full width container and a normal width container.

How do you setup a "Toolset Container" block as full width or normal width?
Please provide detail steps to duplicate the same problem, thanks

[lucasD-4]

Hello Luo,
as you can see in the picture, on a normal page or in a view template it is no problem to use these two container forms. But if I want to insert the view on a page, the settings for the width of the containers are not applied. All containers are displayed in "normal" width.

[Luo Yang]

Thanks for the details, I have tried it in a fresh WordPress installation + the latest version of Toolset Blocks plugin 1.1.3.

It works fine, see screenshot container-width.JPG

For "Wide width" container, it will add a CSS class name in the container DIV tag: alignwide
In WordPress default theme 2020, the CSS style codes are below:

@media (min-width: 1280px)
.entry-content > .alignwide {
    max-width: 120rem;
    width: 120rem;
}

For "Full width" container, it will add a CSS class name in the container DIV tag: alignfull
In WordPress default theme 2020, the CSS style codes are below:

@media (min-width: 1220px)
.entry-content > .alignfull {
    margin-bottom: 10rem;
    margin-top: 10rem;
}

It should display 100% width by default.

It might be a CSS problem, I suggest you switch to WordPress default theme 2020, and test again, and you can also setup CSS codes to override them.

[lucasD-4]

So my problem is that it does not work when I use it in a toolset view. A full width container is displayed with a wide width when using the view in a template, even though the DIV tag has the class "alignfull".

[Luo Yang]

This is a CSS issue, as I mentioned above:
The difference between "Wide width" container and "Full width" container is only a CSS class name: alignwide and alignfull.

If these CSS class name does not take effect on your website, you can setup CSS codes to style them.

If you need more assistance for it, please provide the live problem page URL, I need to check it in my Chrome browser.

[lucasD-4]

Well the problem was actually a DIV tag with the class "fields-and-text" surrounding my view. Now I have inserted the view completely "naked" over its shortcode and it works. Thanks Luo!