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