Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:

I have created a view that contains a full width container and a normal width container, How do I achieve that the width of each container is displayed exactly as I set it when I created the view?

Solution:

The difference between "Wide width" container and "Full width" container blocks is only a CSS class name: alignwide and alignfull.

See details here:

https://toolset.com/forums/topic/full-width-and-normal-width-container-in-a-view/#post-1610525

Relevant Documentation:

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.33 hours from now. Thank you for your understanding.

This topic contains 6 replies, has 2 voices.

Last updated by lucasD-4 5 months, 4 weeks ago.

Assigned support staff: Luo Yang.

Author
Posts
#1609699

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?

#1610349

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1610463

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.

#1610525

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#1610549

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".

#1611581

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#1612005

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!