Home>Support>Background parallax size

Background parallax size

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!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 2 months, 2 days ago Andrew Misplon Hi, I Work Here

    Hi Nanci

    Thanks for getting in touch.

    Do you have a public URL where we can take a look at what’s going on?

  2. 2 months, 1 day ago nanci theevildesigner

    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!

  3. 2 months, 1 day ago Andrew Misplon Hi, I Work Here

    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 :)

  4. 2 months, 8 hours ago nanci theevildesigner

    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.

  5. 1 month, 30 days ago Andrew Misplon Hi, I Work Here

    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.

  6. 1 month, 30 days ago nanci theevildesigner

    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.

  7. 1 month, 30 days ago Alex S Hi, I Work Here

    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

  8. 1 month, 30 days ago Alex S Hi, I Work Here

    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

  9. 1 month, 30 days ago nanci theevildesigner

    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…

  10. 1 month, 29 days ago Andrew Misplon Hi, I Work Here

    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.

  11. 1 month, 29 days ago nanci theevildesigner

    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?

  12. 1 month, 29 days ago Andrew Misplon Hi, I Work Here

    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:

    text-aling: center;
    

    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.

  13. 1 month, 28 days ago nanci theevildesigner

    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!

  14. 1 month, 28 days ago Andrew Misplon Hi, I Work Here

    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.

  15. 1 month, 28 days ago Alex S Hi, I Work Here

    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

  16. 1 month, 27 days ago nanci theevildesigner

    Thank you so much for the help, Andrew and Alex!

    You made my next weekend not so busy as I was imaging it…

  17. 1 month, 27 days ago Andrew Misplon Hi, I Work Here

    Hi :) I’m glad we could make some progress. All the best with your site!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More