[Resolved] Slider in Column Issues

[Andy]

Hi Tom,

I’m using your lightweight grid columns plugin on a build here: http://tinyurl.com/jzn4n3y

I’ve setup three columns on the home page with a Crelly Slider in the middle. But as you can see the slider is overlapping the footer.

Any help appreciated.

Thx,
Andy

[Andy]

Also, in tablet/mobile view, is there any way of making the slider/middle column stacked first??.

[Tom]

Doesn’t look it’s overlapping the footer? Did you resolve that?

Take a look at push and pull classes: http://unsemantic.com/css-documentation#6-push-amp-pull-classes

[Andy]

Sometimes you have to refresh the browser to see the overlap.

I tried adding mobile-pull-100 to the middle column, but that hasnt worked. Also tried class=”pull-100″.

[Tom]

Try setting equal_heights="false" in the shortcode options.

For the push and pull, you would make it so the slider displays in the first column, then you would push it to the middle, and pull the middle column to the front.

Then on mobile, the slider will display first as it’s the first column.

[Andy]

Thank you, the changing equal heights setting fixed the overlap issue. 🙂

How do I format the push/pull settings in the shortcode options, is it just mobile-pull-100 etc?

[Tom]

You use the class parameter in the shortcode options.

You wouldn’t use mobile- or tablet- classes, just the regular ones.

So the first column (your slider) would say something like push-33 (33% to the right)

And the second column would say something like pull-33 (33% to the left)

Might need some playing with, those classes get complicated! 🙂

[Andy]

Ok, I’ve tried adding push-50 to the first column (slider) as it is currently set to grid-50 to make it 50% width so I assume the push class has to match this and added pull-25 to the second column but its not doing anything.
Perhaps I’m misunderstanding how they work?

My shortcodes currently look like this, I had to remove the opening/closing shortcode tags for it to display properly on the forum, using code tags didnt work either:

lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ push-50 last=”false” equal_heights=”false”
[crellyslider alias=”home_slider”]
/lgc_column

lgc_column grid=”25″ tablet_grid=”25″ mobile_grid=”100″ pull-25 style=”padding-left:0;” last=”false” equal_heights=”false”
Properties to Let
Property Maintenance
/lgc_column

lgc_column grid=”25″ tablet_grid=”25″ mobile_grid=”100″ style=”padding-right:0;” last=”true” equal_heights=”false”
Properties for Sale
Auction Properties
/lgc_column

[Tom]

You would do: class="push-50"

[Andy]

Thanks, the push is working but the pull-25 isnt :s

[Andy]

Also, between 769px and 1024px the push-50 stops working.

[Tom]

Ah sorry, the classes have lgc- prefixed.

So it would be lgc-push-50 etc..

For 769px – 1024px, you need to use lgc-tablet-push-50 etc..

[Andy]

Again, class=”lgc-push-50″ works but class=”lgc-pull-25″ doesnt seem to pull it enough.

Also, in tablet view the button List your Property underneath all the columns is merging into the columns.

[Tom]

Ah, looks like a bug in the plugin.

Just pushed the code change to GitHub: https://github.com/tomusborne/Lightweight-Grid-Columns/commit/370f3b75fa8e5c3e7a0b6af613b3c754b0240bc5

[Andy]

Sorry to be a pain. I’ve added the new lightweight-grid-columns.php from github to the plugin but it still isn’t behaving as desired.

[Author]

Posts