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 embed 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 on 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 script code
</div>

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: https://www.w3schools.com/css/css_rwd_mediaqueries.asp. Please apply different width 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 HTML/CSS developer in order to get 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?