[Resolved] Content full width not working

[Author]

Posts

[viniciusA]

I am trying to: Style a row in the Layout to show full width.

Link to a page where the issue can be seen: hidden link

I expected to see: The Hero image showing full width.

Instead, I got: The hero image is limited to the container width.

[Luo Yang]

Hello,

Thanks for the details, I see you are using bootstrap framework, so you can try the bootstrap full-width CSS "container-fluid",

I have tested it in the URL you mentioned above using Chrome browser
view-source:hidden link

and found two places, line 163:

<div class="uk-container">

You can change it to:

<div class="container-fluid">

Same as above, line 280, from

<div class="container ddl-remove-bs-padding">

to:

<div class="container-fluid ddl-remove-bs-padding">

See screenshot full-width.JPG
It is only an example, you will need to find those codes in your website, and change it

If it is a layout, you can follow our document to setup the CSS class name:
https://toolset.com/documentation/beyond-the-basics/leverage-existing-styles-and-add-new-css/

More help:
hidden link
Use .container-fluid for a full width container, spanning the entire width of your viewport.

[viniciusA]

Ok, thank you for your help.
This is a class automatically applied by the theme I'm using. Is there a way to remove the class uk-container and only apply the one suggested?

Thanks again.

[Luo Yang]

There isn't such kind of feature within Layouts plugin, and the "uk-container" CSS class should be defined in your theme files, I suggest you check it with author of your theme file.