I am running X v. 1.8.4 with shortcodes v. 2.2.1
URL is http://fantasticrace-comp2.blissvilledesign.com/los-angeles-races-rev-1/

I have a page with two columns. In the left column I have a responsive slider (via your shortcode) and in the right column I have a content band to which I have added the class “infinite-scroll”. Inside that content band, I have several text boxes and an accordian. Anyway, my issue is that the slider in the left column and the content band in the right column only look top and bottom aligned on a screen about the size of a standard laptop. Once the browser window size is increased or decreased (for larger and smaller screens), the two become only top aligned. I would like the content band to match the responsiveness of the slider so they remain top and bottom aligned at all times.

It seems to maybe be an issue with the infinite-scroll max height, but if I don’t set a max height, then the content band just shows full height and that eliminates the scroll effect. Here are my infinite-scroll settings:

.infinite-scroll {
padding: 20px;
background: transparent;
max-height: 425px;
overflow-y: scroll;
}

And speaking of infinite-scroll, is there a way to make the scroll bar show up all the time instead of just upon scrolling?

Thanks in advance!
Rayna

Thank you for writing in!

#1: Please try adding the following jQuery code under Custom > JavaScript in the Customizer:

jQuery(window).load(function($) {
   var sliderHeight = $('article .x-flexslider-shortcode-container').outerHeight();
   console.log(sliderHeight);
   $('.x-content-band.infinite-scroll').css('max-height', sliderHeight);
   $(window).resize(function() {
      var sliderHeight = $('article .x-flexslider-shortcode-container').outerHeight();
      console.log(sliderHeight);
      $('.x-content-band.infinite-scroll').css('max-height', sliderHeight);
   });
});

#2: Regarding the scrollbar, unfortunately, we can’t provide support for a 3rd party plugin order script.

Hope this helps. 🙂

Thank you.

Thanks for the support. My client decided that they don’t want the area to scroll, so I removed the infinite-scroll class. So I entered your javascript code anyway, changing your ‘.x-content-band.infinite-scroll’ to just ‘.x-content-band’, but the right column still does not stay top and bottom aligned when I resize the window, only top aligned.

What do I need to do to make the content in the right column resize properly so that the left column and right column stay top and bottom aligned? Do I need to use responsive text shortcodes or something?

Oh, and just FYI regarding the scroll bar, I did not use a 3rd party plugin to create the infinite scroll, I just used the class “infinite-scroll” as described by one of your team members in another topic 🙂 I was just wondering if the scroll bar that the infinite-scroll class creates can be made to show all of the time instead of just when a user scrolls over text in that area.

Thanks!
Rayna

You can download latest X from ThemeForest

This update guide is also helpful highlighting steps to accomplish the update -> http://theme.co/x/member/kb/updating-your-theme-and-plugins/

Let us know how it works out after the update.

Cheers

I cannot update my version of X yet, as I am waiting for my client to review a page and I don’t want anything to get messed up while there’s a chance they’ll be trying to view the page, but within a few days I will do the update. Once I do the update, I will come back here and update this thread 🙂

Thanks!
Rayna

I finally had a chance to update the theme and shortcodes, but the columns are still not looking good. Can you take a look now that I have updated?

Thanks!
Rayna

I am sorry but we cannot support the customization of this because there are lots of variables that needs to be taken into account to make everything work correctly. We can adjust the font size, icons and image in the content band but I don’t think there is an accurate way to do it to make the two elements aligned.

An alternative is to make the whole right column as an image with the same size as the slider max width and height,
that way as the screen resizes the image will resize as a whole. Hope this make sense.

Thanks