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
</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 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; }