Remove Spaces In Between Rows in sparkling theme

Hi Kali,

Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on Dashboard page. Please reference this thread and include your SiteOrigin order key in the email.

Hi Kali,

Okaym so the bulk of the spacing is due to row spacing. Please open up a row you wish to remove the spacing from (said spacing is added after the row) by clicking the wrench icon above it. Head over to the row styles sidebar and open the layout settings group and set the bottom margin to 0. You’ll need to repeat this for each instance.

If you would like to adjust this setting globally (as to remove all of bottom margin at once), please navigate to WP AdminSettingsPage Builder and open the Layout tab. Set the bottom margin to 0 and save. This setting will affect any row that doesn’t have a custom bottom margin applied.

—

Outside of that, the theme is adding slight (45px 50px) of padding around the main content area. You can remove this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

.post-inner-content {    padding: 0 25px !important;}

You might also need to install the SiteOrigin CSS Editor.

—

There are also some instances where you’ve added empty lines. Empty lines in the Editor will create spacing. For example, here’s with the empty lines:

And without:

Hi Kali,

Oh, sorry, I missed an obvious bit of white space. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:

.page-content, .entry-content, .entry-summary {
	margin: 0 !important;
}

You might also need to install the SiteOrigin CSS Editor.

If there’s any other white space you would like to remove, please point it out.

—

To remove the zoom, please add the following CSS to WP Admin > Appearance > Custom CSS:

.siteorigin-panels-stretch.panel-row-style {
	background-size: initial !important;
}

To adjust the parallax speed, please navigate to WP AdminSettingsPage Builder and open the General tab and adjust the Limit Parallax Motion setting.

—

I can’t seem to see the button you’re referring too. Could you please link me to the specific page?

—

The photo spacing will be corrected by the CSS provided at the top of my reply.

Hi Kali,

Thin white line
You’ve added a border to the hero widget. Please remove the border to remove the thin white line.

Parallax Zoom
The zoom looks to have worked. It does however look like you’ve set the limit parallax motion to a low amount. I would recommend increasing the amount to ensure the parallax effect is visible.

Spacing at the bottom of the photo
This is, as mentioned, bottom margin. Please follow the steps outlined in my second reply on how to remove this spacing.

Hi Kali,

Ah. It looks to be a combination of the row margin and a content margin added by your theme.

Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:

.container.main-content-area {
    margin: 0 !important;/
}

Then remove the following CSS (as it doesn’t do anything anymore):

.container.main-content-area {
    margin-top: 0;
}

Hi Kali,

Previous reply

I can’t seem to replicate this issue. The link you provided links to a desktop resolution rather than a mobile resolution. Regardless, I wasn’t able to replicate the issues you’ve described on a mobile device. Could you please provide a direct screenshot of what you’re referring too?

—

The current version of SiteOrigin.com doesn’t factor in premium users. A new version is going to be launched very soon however so that should resolve that issue.

Regardless, there should be nothing preventing you from creating threads – if there is, please send me a screenshot of the message that appears and I’ll get it sorted asap. Just note that we’re unable to provide premium support over the forums. If you would like to make use of premium support, please refer this Dashboard age for instructions.

Hi Kali,

Okay so this issue is caused due to your padding, which is currently set to 600px 25px 0px.

600px basically prevent this background image from ever being responsive. In CSS background images need to maintain the size of the container and as a result of 1200px of total vertical height, the image is massively stretched on mobile devices and cannot display correctly. You should instead rely on a percentage based padding if you’re going to use it for row sizing as that way the row size will be directly related to the size of the document and thus be more consistent and responsive on mobile devices.

Hi Kali,

Please open the hero widget and scroll to the Design and Layout settings group. Set the Top and Bottom Padding setting to a % based unit of measurement (it’s currently set to px) and set it to roughly 5, then save. How does that look? Too small? Try increasing the amount to 15. Repeat this process until you’ve found an amount that you’re happy with.

% based padding will allow for the padding to be responsive and thus allow avoid this issue.

Hi Kali,

Very sorry for the delay.

The problem there is that you used px. 600px is huge. The only way you’re going to get it responsive is if you switch to a percentage-based unit of measurement. px will not work for you in this situation.

You’ll need to adjust the percentage amount until you get the desired spacing. Don’t try and use the currently set amounts or it’ll look worse – 600% is going to be much larger than 600px in most instances.

Hi Kali,

So the parallax zoom occurs happens as the image is otherwise not long enough to parallax without it. Try using an image that’s longer or lowering the height of the overall container it’s applied to.

To clarify, if the zoom effect didn’t occur, the parallax would exceed the length of the image.

Hi Kali,

Is SiteOrigin Premium enabled? If so, is the Slider Parallax plugin addon enabled? Not sure? Please navigate to WP AdminSiteOriginPremium Addons and search for Parallax Sliders. If the icon is grey it’s inactive – please activate it.

Hi Kali,

Would it be possible for you to create a temporary admin account for us so we can log in and take a look?

Hi Kali,

Sorry for the delay.

To clarify, on what page is the issue with the zoom present?

Also, there’s no button on the O nas page. Did you remove it?

Hi Kali,

Thanks.

Please open that page in the editor and scroll down to the page settings. Please untick the Page Title and Footer top margin settings. Then save.

This will remove the top spacing and the bottom spacing. Let me know if this helps.

Hi Kali,

The photo isn’t touching the edge due to row gutter. Please open the row housing that layout slider and head over to the row styles sidebar. Open the Layout settings group and set the gutter to 0.

The image itself isn’t touching the top because the image contains a large amount of spacing in the image itself. The only way to avoid this would be to manually move the image with CSS Please open the layout slider and head over to the widget styles sidebar. Open the Attribute settings group and set the widget class to sign-background-pos-bot and then save.

Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:

.sign-background-pos-bot .sow-slider-image {
	background-position: bottom !important;
}

How does that look?

You might also need to install the SiteOrigin CSS Editor.

The image isn’t touching the bottom because the left column is larger than the column on the right. You’ll need to ensure the right column is either larger or the same height as the left column.