How To Change When Elements Begin To Stack

Support
#1

Quick question:

I have text on the left of a column and a slider revolution to the right of the text. This displays great on a PC and laptop.

When I view this on a phone (portrait and landscape), the slider revolution box has dropped below the text and it is displaying nicely on the phone.

The question I have is, when I view this on a tablet (in portrait mode), the slider revolution box is becoming very narrow and cutting the images up. Can you tell me how to tell the slider revolution to drop below the text (like the phone does) when it is viewed in tablet portrait mode?

Thank You

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#3

Hi there,

Unfortunately, it is not possible to change the behavior of the column and determine when it stacks and it needs custom development.

But I suggest that you make the slider to fit nicely on Ipad Landscape screen. You can do it applying the method below:

https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

Thank you.

#4

As a work around, I just created a separate section for the tablet portrait mode and built it so the slider revolution would be positioned below the text. This allows the page to look much better.

I am not sure how much creating separate sections for certain displays can slow down pages loading. Lets say the section has a number of photos in it (or say a slider with a number of images) and to have it look good on all displays, there are 3 of the same section built, for example #1 for PC/Laptop, #2 for Tablet, #3 for Phone. Naturally they would only be turned on for the required screen display.

I assume that a device has to load all 3 of these display sections even though it is only going to display 1 of the 3 sections. Am I correct? If I am correct, do you find creating these additional sections slows down page loading very much?

Thanks

#5

Hi There,

If you have optimized your image using a tool like http://tinypng.com before uploading to your website, the impact should be really minor.

This is not something you want to do in every section, but it is a common practice when necessary.

You can compare the performance of your page using Pingdom or GTMetrix performance tests.

Hope it helps!

#6

I was pretty sure the different devices would have to load all the sections, even the sections they are not going to display but thanks for confirming this for me.

All the images I have put on the site have gone through Photoshop and been optimized for the web. I also have WP Smush for when I load the images into the library but to be honest, it doesn’t change the image size very much after the images have already been optimized by Photoshop.

Thanks for the performance test sits. I will keep that as reference and test the pages by using them.

Can you tell me what speed a ‘good’ page would load at and what speed a ‘poor’ loading page would be?

Thanks again.

#7

Hello There,

To avoid any further confusion, I will go back to your original question which is:

How To Change When Elements Begin To Stack?

In most case, the columns will display side by side when the screen size is greater than 980 pixels. In smaller screens like the tablets, the columns (left and right) will begin to stack up to each other. If you want to prevent this from happening or maybe advanced the stacking of the columns like when the screen size is still 1100 pixels, they’d be already stacked, the only viable solution is to use a custom css. To resolve your issue, please do this:

To collapse the columns

@media(max-width: 1100px) {
  #my-custom-section .custom-column {
    float: none;
    width: 100%;
    display: block;
  }
}

Feel free to adjust the 1100px to increase or reduce the width of the screen size.

Hope this helps. Please let us know how it goes.

#8

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