Move widget to the center of the page

CSS Codes Photo Gallery
1

Add this code to the Custom CSS field on your Photo Gallery widget’s Style tab:

.global-styles, [class*="RootLayout__Component"] {
    margin: auto;
}
2

There’s actually a couple other ways of doing this as well, that don’t require adding custom CSS. Both work by adding a style element to the Elfsight code used to install the widget - it typically look like this:
<div class="elfsight-app-[your-widget-install-code-here]" data-elfsight-app-lazy></div>
(substitute your widget's actual install code, omitting the square brackets).

To center both horizontally and vertically, replace “data-elfsight-app-lazy” as shown below. Reason being that vertical centering practically guarantees the widget will be above the page fold, making the lazy-loading statement unnecessary and counter-productive. The install code code would look like this:
<div class="elfsight-app-[your-widget-install-code-here]" style="display:grid; place-items:center; height:100vh"></div>

If you’re only interested in centering horizontally, it’s even easier (see below).
NOTE: If the widget will be above page-fold (i.e., visible without scrolling), omit ’ data-elfsight-app-lazy’:
<div class="elfsight-app-[your-widget-install-code-here]" style="margin:0 auto" data-elfsight-app-lazy></div>

3

Hi there, @Bob_Wilson :waving_hand:

You’re absolutely right! It’s also possible to change the widget’s position with the styles added to the installation code.

Many thanks for sharing your wisdom with the Community, we really appreciate it :wink: