responsive background or ‘sticky row/widget’

Here we go:

Thread: Page Builder background image won’t rescale for mobile devices

Please, take a spin through that thread. It all comes down to how you’re adding space above and below your text. Let me know how that goes.

Sure; please, see: Thread: How to add parallax scrolling to a Page Builder row.

To get rid of of some of the space above, add the following to Appearance > Custom CSS:

/* Home */

.home #main {
padding-top: 0;
}

To rid of the rest, open the Visual Editor widget, click over to the Text tab and remove the first paragraph tag. If there is none just make sure there are no extra spaces there. Also, in the Visual Editor widget, un-check the auto paragraph checkbox at the bottom of the widget.

The content size is controlled by the Vantage stylesheet. To adjust, you can try adding the following to Appearance > Custom CSS:

/* Adamrob Parallax */

.entry-content .adamrob_parallax h1 {
    font-size: 1.7em;
}

.entry-content .adamrob_parallax h3 {
    font-size: 1.7em;
}

Adjust as required.

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.

Not sure about Android, I don’t have a device to test on at the moment. Either way we should drop the text size down a bit for mobile, or at least try doing so. Add:

@media (max-width: 680px) {

	.entry-content .adamrob_parallax h1 {
	    font-size: 15px;
	}

	.entry-content .adamrob_parallax h3 {
	    font-size: 13px;
	}

}

Adjust as required. With that we’re setting text size up to 680px, after that resolution our previous rules, the ones I sent before, those will kick in.

You can perhaps try this:

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */ 

	.entry-content .adamrob_parallax h1 {
	    font-size: 15px;
	}

	.entry-content .adamrob_parallax h3 {
	    font-size: 13px;
	}
 
}  

Use the above and insert test sizes to see what happens on Android. Bit of a complex topic:

http://stackoverflow.com/questions/17102161/how-to-use-media-queries-for-android-devices-with-android-version-2-2-1-and-2-3

Phew, not sure we can offer anything further on this. If I knew the answer I’d certainly send it along. This is a third-party plugin so we’re already quite far along in terms of adding responsive behaviour to it’s workings. Hopefully we’ll have Page Builder’s native parallax feature sorted for the next release. That should make things a bit easier.

Thanks for your understanding.

It’s a tough little question. My understanding of the stackoverflow thread I sent is that your phone is using a higher res which is why our media queries aren’t working.

When we set the main sizes:

/* Adamrob Parallax */

.entry-content .adamrob_parallax h1 {
    font-size: 1.7em;
}

.entry-content .adamrob_parallax h3 {
    font-size: 1.7em;
}

Did those changes reflect on your phone?

That’s strange. Try this:

/* Adamrob Parallax */

.entry-content .adamrob_parallax h1 {
color: red !important;
    font-size: 20px !important;
}

.entry-content .adamrob_parallax h3 {
color: red !important;
    font-size: 20px !important;
}

Temporarily remove all of your Custom CSS and try just the above. See it on the phone?

Can you test with another browser on Android?

I’ve run a bunch of Google searches now. I’m not winning. No idea why our changes would be ignored. My idea to try another browser was to see if there was a caching issue.

Another idea is to open a private browsing window on the phone and browse using that in mobile view.

Ok cool, so that most likely rules out a caching issue then.

Sorry, see we’ve done that. Sec. Checking now.

Line I added:

.main-navigation ul li:hover > a, #search-icon #search-icon-icon:hover { background-color: #912929 !important; }

That’s a browser default, there for usability. You can try:

.main-navigation ul li a { outline: none; }

Glad to hear you’re making progress:

1. You might try our Hero widget here. This is a tough question considering what Page Builder can do. Even if we help position the widget for desktop we’d need to re-position for tablet and mobile. It quickly turns into a custom development task. So my ideas right now are to try the Hero widget, see if that works for you.

2. Settings > Page Builder > Layout > Row Gutter. That’s set to 40px. The spacing you see is using this setting.

3. That’s Vantage table styling. At the following to Custom CSS:

/* Tables */.entry-content table {  border-bottom: none;}

2. We’re discussing the same figure. Try adjusting the setting I mentioned for testing purposes, it should change.

3. Send a link to the page, please. Thanks :)

1. Edit the row in question by clicking the wrench icon, then Layout tab. What is Gutter set to?

2. TablePress is adding the style in question:

.tablepress tbody td, .tablepress tfoot th {
    border-top: none;
}

The about should resolve.

I can’t see your Custom CSS in place for the tables. Is it there? Are you running a caching plugin that might be showing me a cached result?

You can see at the bottom of Custom CSS what I’ve tried to do. We’re hacking hard now. I can’t get the h2 to align without further custom work. You could look at where things are now and perhaps move the H2 into the first cell. We’ve, unfortunately just run into a limitation of what the plugin combined with our support offering can provide at the moment.

Thanks for your understanding. We’re aware of these shortcomings and working hard to bridge them.

Cheers :)