Page Builder background image won’t rescale for mobile devices

Hi Trikaecoresort.com

Thanks for reaching out.

There is a fair bit going on here. Let’s start with the first row. You ideally need to drop the empty paragraphs, there are three below the buttons.

The space above the headline is being added by Easy Google Fonts with the following:

.home-headline {
    color: #f7f7f7;
    font-family: 'Roboto Slab';
    font-size: 84px;
    font-style: normal;
    font-weight: 300;
    margin-top: 161px;
}

The margin-top ideally, also needs to be dropped. Removed.

Next, edit the row concerned, click Attributes top right, and enter a custom row class name:

custom-home-hero

Next, install a Custom CSS plugin if you don’t already have on installed. Page: SiteOrigin CSS Editor

Next, go to Appearance > Custom CSS or wherever your Custom CSS plugin is located and insert the following:

/* Page Builder Styles */

@media (min-width: 680px {
	.custom-home-hero .textwidget {
		margin-top: 161px;
		margin-bottom: 100px;
	}
}

You can make adjustments to the values as required. Let me know once that is done, I’ll take a look at the image then.

Hi Trikaecoresort.com

Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

[email protected]

Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

The spacers are the challenge. They aren’t dynamic or being dropped on mobile so they negatively impact the responsive behaviour of the page.

Sorry, error in Custom CSS, use:

/* Page Builder Styles */

@media (min-width: 680px) {
	.custom-home-hero .textwidget {
		margin-top: 161px;
		margin-bottom: 100px;
	}
}

Very similar procedure. It all depends, is the padding top and bottom the same? Remember we said:

margin-top: 161px;
margin-bottom: 100px;

So, if those are the same for the other rows, then we just need to add the class name into the new row Attributes field.

If we need custom padding then we might need to repeat the procedure but with a new class name for the next row.

Ahh, it looks like you removed the first rule we added.

For sure, I checked out the bottom row, it has a Visual Editor in it. Remove the contents from Text tab in the widget. Leave widget in place. You can use equal margin top and bottom OR equal padding.

For sure :)

There is no content there to help the image for mobile so we’d need one more rule.

.custom-home-hero-rainbow .textwidget {
	min-height: 200px;
}

Adjust as required.

This is a comment in CSS:

/* Page Builder Styles */

They don’t do anything functional. Use them to organise your CSS so it makes sense when come back to it later.

The most you can use for min-height there is 208px.