Make Classic Row Parallax

Support
#1

Hi there,

I’m building this website here: https://stroagebarn.co.uk and I’m trying to make the black and white background image in the row with the Personal Storage and Business & Trade Classic Feature Boxes into a parallax image.

There was no option in Cornerstone to select parallax so I used this code in Customiser to do it:

.row1-bg {
	background-image: url(https://storagebarn.co.uk/wp-content/uploads/2018/06/Storage-Barn-Interior-4-Greyscale.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.site {
background-color: transparent !important;
}

Can you help me make it parallax please?
Thanks for your help.
Matthew
Login details in the below…

#2

Hi Matthew,

Thank you for complete information.
You may update your custom CSS to this:

.row1-bg {
	background-image: url(https://storagebarn.co.uk/wp-content/uploads/2018/06/Storage-Barn-Interior-4-Greyscale.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
        background-attachment: fixed;
        height: 500px; /*Feel free to adjust the height accordingly*/
}

See this guide: https://www.w3schools.com/howto/howto_css_parallax.asp
Although, parallax effect is possible on V2 elements ROWS. We just need to edit settings. Please go to X > Settings > User Preferences > Advance Mode. Set this to Always ON. Save settings.

Then when you inspect ROW now, you can see Advance checkbox

Once enabled, the following options will appear:

Set the background image accordingly and enabled parallax.

Hope this helps.

#3

Perfect thank you very much Lely. I didn’t realise X still had the Advanced Settings option — thanks for pointing that out.
Alll the best,
Matthew

#4

You’re most welcome!

#5

Can I ask another question please?

I’ve built a price list and a storage size guide on this page: https://storagebarn.co.uk/storage-prices/

I’ve built them using columns to look like a table and I’d like each column to display horizontally on one row on mobile like they do on desktop — can you help me please? Currently they display one on top of the other which doesn’t work.

Thanks,
Matthew.

#6

Hi Mathew,

To display a table correctly and to make it responsive, I suggest you to use a 3rd party plugin like Tablepress (https://wordpress.org/plugins/tablepress/). You can see the documentation from here (https://tablepress.org/documentation/).

Thanks!

#7

Hi there,

Thanks for your reply, but I don’t really want it to be responsive, I just want the columns to display next to each other on mobile. You guys gave me some code to do it on this site I built: http://travelling-tots.co.uk/equipment-price-list/
but it doesn’t work on https://storagebarn.co.uk/storage-prices/ for some reason.

Can you help me make them display in horizontal columns on mobile please?
Thanks,
Matt

#8

Hello There,

The code given in the previous thread was tailored specifically for your site that is why it does not work in your other site. To make this happen, please use of this code instead:





@media (max-width: 767px){
  .page-id-283 .e283-11.x-section .x-container .x-column.x-sm.x-1-5{
    float: left;
    vertical-align: top;
    width: 16.8%;
    margin-right: 4%;
  }

  .page-id-283 .e283-11.x-section .x-container .x-column.x-sm.x-1-5.last, 
  .page-id-283 .e283-11.x-section .x-container .x-column.x-sm.x-1-5:last-of-type {
      margin-right: 0;
  }
}

Please let us know how it goes.

#9

Hi RueNel,

Thanks so much for taking the time to fix that for me, much appreciated.
Cheers!
Matt

#10

Glad that we could be of a help :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.