Widget at 100% to fill container responsively?

Update: I achieved this via stylesheet overrides, but it’d still be great to have the ability to specify 100% as the width in the plugin or widget settings.

Hi,

It’s possible if you type 100% value in the ‘Widget width’ field.

But also, it depends from a parent DOM container, if it’s not a 100% width, the widget will not expand to all width.

Thanks!

The parent DOM container is 1152px, which is definitely wider than the widget’s default width, so I expect that setting it to 100% will result in a wider widget.

However, when I entered “100%” in the widget’s “Width” field, it didn’t respond the same way as the CSS, which is why I was confused.

When I do this via adding “width:100%” to the element in CSS it works fine.

div#fbrev_widget-3.et_pb_widget.fb-reviews-widget {
width: 100%;
}

Hi,

Thank you for the information.

I found the another issue about it. The widget is rendered in the following div:

<div id=”grw_widget-4″ class=”et_pb_widget google-reviews-widget”>…</div>

But the Divi style.css has:

.et_pb_gutters3 .et_pb_column_4_4 .et_pb_widget { width: 20.875%; margin-right: 5.5%; margin-bottom: 5.5%; }

And it reduce the widget width to 20.8%, so without the additional style, the ‘Widget width’ option will not work:

Thanks!