Slider doesn’t work
I just see a big white space where the slider is supposed to be. The image appears when I view it in the preview area in Appearance>Widgets, but not on the actual site: https://www.percivalconstantine.com/
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
1Hi Perry
Thanks for the link. I had a look and can see what’s going on.
The Slider Widget is in the Header widget area, which Vantage places in the same row as the logo. Your logo image is 1080 pixels wide, the full width of the site, so the widget area beside it ends up with no width at all. The slider is there, it’s just zero pixels wide. The white space is its height, which is set to 757 in the widget’s Design tab. There are a few ways to go, depending on where you’d like the slider to sit.
If you’d like the slider in the header on every page, directly under the logo, you can keep it exactly where it is. Edit the widget at AppearanceWidgets, open the Design tab, and clear both the Height and Responsive Height fields so the images scale naturally. Then add the following CSS at Appearance > Custom CSS if you’re using SiteOrigin CSS, or at Appearance > Customize > Additional CSS if you aren’t. It lets the widget area wrap onto its own line below the logo at full width.
#masthead .hgroup { flex-wrap: wrap; } #masthead .hgroup #header-sidebar { width: 100%; }If you’d rather have the slider beside the logo, in the same row, the logo needs to be smaller to leave room. Resize the logo image to around 350 to 400 pixels wide and upload it at AppearanceCustomizeTheme SettingsLogo. You can set the 1080 pixel version in the Retina Logo field so it stays crisp. In the widget’s Design tab, set Height to roughly the logo’s height, around 150, and clear Responsive Height. Then add this CSS in the same place as above so the widget area takes up the space next to the logo.
#masthead .hgroup #header-sidebar { flex: 1 1 auto; } #masthead .hgroup #header-sidebar .widget_sow-slider { width: 100%; }And if you only need the slider on the home page, the simplest route is to add it to the page itself with Page Builder in a Full Width Stretched row. The steps are at Home Page Slider. Set Home Page Slider to None in Theme Settings > Home so the two don’t double up.
I tested the first two on your home page from this side and both display the slider, so take your pick. Let me know if you’d like a hand with any of them.
Kind regards
Andrew