Hello,
I tried to add some parallax background to a row, with a text widget on it (with white background) and it looks perfect on Chrome, but it acts like a 2 columns row (image and text) on Safari and mobile.
Is there something I can do to have a parallax background kinda everywhere?
Thanks!
Hi Nanci
Thanks for getting in touch.
Do you have a public URL where we can take a look at what’s going on?
Here it is https://www.yourbrandstrategy.com/start/
Let me specify I’m working on a 12″ iPad, which should be recognized as a mobile device (I don’t have a laptop anymore and since the rule is “mobile first”…), but the parallax works in Chrome only. What I see from my iPhone Safari, my iPad Safari, my dad’s Samsung (default browser, so I suppose Chrome) and mom’s Wiko (Chrome app) is the background image on the right (parallaxing a bit on iPad, so the function is there) and the text on the right, if setting “no collapse” (the donuts image) and text before the image if setting the collapse order “right on top”.
Also the custom CSS is “ignored” where the parallax doesn’t work, had to write Css declaration for every single block and “fake” the menu at the top, while the footer custom HTML menu is working fine.
I’m pretty sure that if it didn’t work back in February I wouldn’t have built my pages like this.
Anyway, I have no clue how to fix it.
Is there something I can do?
Thanks!
Thanks for the update.
Parallax seems to be functioning normally for me on my iPhone in Chrome and Safari. I asked our developer Alex to check on Android and iPad Air too. Parallax was functioning for Alex too.
At SettingsPage BuilderLayout you can increase the Mobile Width if you’d like Mobile CSS declarations to be applied to your iPad. Here is a reference for CSS widths https://www.mydevice.io/#compare-devices. I’m not quite following the Custom CSS you’re referring to so this paragraph is a guess.
Please, could you send us the layout. We’re not quite following the setup of this particular row. If we could inspect it locally, that’ll help. You can export the layout by editing the page in Page Builder and then click Layouts > Import/Export > Download Layout. You can then upload the JSON file to WeTransfer/Drive/Dropbox and send us the link.
If you could perhaps also confirm how you’d like this row to behave on mobile, that’ll be helpful.
Thanks again :)
For real?!?! I checked various devices, all different sizes an none of them vas right.
Ok, so what if I export the layout and also include screenshots of the “”good” one and the “bad”?
The custom CSS is the SiteOrigin CSS, now mostly using the widget embedded CSS declaration boxes.
Thanks for the update. If you could send the layout along with any supporting assets like screenshots, that’ll be great. If you could clarify via an image or explanation how the layout should look on mobile, that’ll be great. Thanks.
If you’d like us to take a look at the Custom CSS in SiteOrigin CSS, please, clear and temporarily deactivate your modification plugin. Thanks again.
Here’s the link https://drive.google.com/drive/folders/10LrUHD0hvs8tF1c31K_z0ie6iZSTy5FH
Right now is ok on Safari iPad too. Don’t know why or how.
The custom CSS is currently completely screwed up, trying to make it work. Don’t worry about it.
Hi Nanci,
Thank you for providing those files. To confirm, does the video showcase the issue, or do the images? Based on your previous replies, and what we’re seeing, we suspect the video showcases the issue but want to confirm if that’s the case to ensure we’re on the same page. Regardless, I can confirm we’ve only seen what is pictured in the images.
I’ve had a look at the provided layout and I’ve noticed an issue. it may or may not relate to the issue you’re facing – I’m unable to confirm at this stage due to being unable to replicate it. The CSS Declaration field only supports inline CSS so selectors cannot be used. The Text widget used to add the “Do you want more COMMENTS” text has a selector present. Please remove the selector and ideally please remove any other selectors added using that field for any row/widget. Once removed, please clear your devices browser cache and then check if this issue is still occurring.
I recommend giving the following article a quick read for instructions on how to use SiteOrigin CSS alongside Page Builder.
Kind regards,
Alex
Hi Nanci,
For reference, the potentially problematic CSS in the CSS Declaration field is the following CSS:
b{ font-weight: 800; }Please remove that CSS. The rest of the CSS in that field is fine.
Kind regards,
Alex
Hi Alex, It was actually on the “Just IMAGINE posting on INSTAGRAM and getting” text, which has got no background image, but I removed it, since it doesn‘t work (while it was working when the SiteOrigin custom CSS was working).
Nothing changed.
Anyway, I think I’ll just make the row collapse “right on top” like the one below, with the toasting.
Looks like the only legit solution…
Hi Nanci
Thanks for the updates and for hanging in there with us!
CSS Declarations Field
The following is general advice, not necessarily related to your main question. The CSS Declarations field accepts properties and values, for example:
color: red. The closing;is not required after each declaration in this field. The CSS Declarations field, unfortunately, doesn’t accept rules such as:b { font-weight: 800; }. I got into further detail in the guide Alex linked above. Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.Parallax and Column Question
I’ve uploaded two images here https://imgur.com/a/gyO17jc. Image 01 is from your Drive folder. Is Image 01 how you’d like this row to display on all devices?
Image 02 is how the row looks on all of my displays.
Request
If you could clear and temporarily deactivate your caching plugin that’ll be helpful so we can see your Custom CSS. Thanks.
Hi Andrew,
image 01 is how I see it now on iPad (both Safari and Chrome), while 02 is how I saw it on iPad Safari (not sure why it’s ok now).
Anyway, image 02 shows the row like if it’s a 2 cells one, not one cell with background (like the Drive screen recording shows).
Same thing for smartphones, so the only solution I can think of is the collapse behavior “left on top”, so the background goes after the text.
I deactivated the WP Fastest Cache plugin. Correct?
Thanks for the updates.
For the first time, I’m seeing the row as you do in image 01. That might be related to minification being disabled. The URL of the SO CSS file is https://www.yourbrandstrategy.com/wp-content/uploads/so-css/so-css-astra.css if you want to exclude it in your minification/caching plugin.
In your text widget CSS Declarations field, perhaps check the following:
The typo is causing the declaration to be disregarded.
Perhaps re-check your devices now with your caching/minification plugin deactivated. The row displays as a single column on my iPhone 12 Mini now, it didn’t before. You’ll need to adjust your mobile CSS to reduce the font size and padding etc. for when the row background isn’t as tall as the text but otherwise, it looks close to finished.
https://imgur.com/a/2YaUlAJ
Summary: From my perspective, the minification plugin is negatively impacting Custom CSS. With minification disabled it looks like the row text needs to be reduced in size for mobile in order for the text container to not exceed the height of the background image. The background image height is maintaining aspect ratio which is why it isn’t as tall as the text container below about 712px.
OMG, Andrew… caching plugin yet again… I needed IT guys from my host provider to check on my website, because I was continuously getting 500 server error and it was W3 Total Cache plugin.
I guess I shouldn’t have any…
I “aling” mistake is not the onlyI’ve made.
Last question: there any way to make the background as high as the text widget? I care more about the hight than the width…
Thanks!
Hi, glad to hear you’re making progress :)
The image height is reduced on mobile because it’s maintaining the aspect ratio. I’ll ask Alex to comment and let us know if he has any ideas. With the current image, my suggestion is to reduce the size of the text for mobile in order for the text container to not exceed the height of the background image. The background image height is maintaining aspect ratio which is why it isn’t as tall as the text container below about 712px.
Hi Nanci,
The Modern Parallax uses HTML and will actively prevent stretching so there’s no reliable way for the image to be the entire length of the widget. The Legacy Parallax uses CSS so it can be the full height of the widget but due to how CSS handles background images parts of the image can be clipped/omitted (the Modern Parallax won’t do this) to prevent as much distortion as possible. You can switch Parallax Type by navigating to SettingsPage Builder and open the General tab. Set the Parallax Type to Legacy and then save.
Kind regards,
Alex
Thank you so much for the help, Andrew and Alex!
You made my next weekend not so busy as I was imaging it…
Hi :) I’m glad we could make some progress. All the best with your site!