All Collections
Frequently Asked Questions
How Can I Adjust the Width and Position of the Widget
How Can I Adjust the Width and Position of the Widget

If I embed the widget in a wide page, how can I limit the widget width so that it doesn't take the full screen width

Sharon Luria avatar
Written by Sharon Luria
Updated over a week ago

The Opinion Stage widget is built on responsive design principles and therefore auto-fits to the page in which it is embedded in all devices (e.g. desktop & mobile). However, in some cases (e.g. very wide layouts) you may want to limit the width of the widget or/and center it with margins on the right/left.

Following is a technical explanation of how to do that. Note that this requires some basic HTML/CSS coding know-how.

How to Limit the Width of the Widget

To limit the width of the widget in the embedded page:

1) Add to the page you would like to embed the widget.

<div class="opinionstage-widget-wrapper">
// Place here the Opinion Stage general embedcode

2) Add to your CSS file. 

.opinionstage-widget-wrapper { width: 650px; } 

Replace 650px with the width you would like to have.
In order to set widths for different screen sizes please check the following article: Please apply different widths to opinionstage-widget-wrapper CSS class in the following manner:

@media only screen and (min-width: 600px) {
.opinionstage-widget-wrapper { width: 600px; }

@media only screen and (min-width: 768px) {
.opinionstage-widget-wrapper { width: 800px; }

Please note, the example here is for reference only, exact values (e.g. widths and screen sizes) may depend on the exact needs and details of your site (which is varying a lot), so it's best to consult with an HTML/CSS developer in order to get the best results.

How to Center the Widget

The technique is similar to the previous one, just add margin: auto to opinionstage-widget-wrapper CSS class:

.opinionstage-widget-wrapper { margin: auto; } 

Did this answer your question?