Extend the tab column to the length of the map+profile

[jcockroft64]

You might want to extend the primary tab and the secondary tab section of equal length. That whole section (photo carousel included) will be the same length as map+profile.

[russellelliott]

I extended the height of the tabs widget from 300px to 353 px. Now the sum of the heights of the primary tabs, image carousel, and secondary tabs appear to match that of the right column map and elevation profile.

Here is what the CSS for the tabs looks like:

selector{
    height: 353px;
    overflow-x: hidden;
    overflow-y: scroll;
}

selector::-webkit-scrollbar{
width: 14px;
}

selector::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

selector::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

Map Height: 600px

• Visible in “Maps” section of the map customizer page Elevation Profile Height: 200px
• Visible in “GPX” section of the map customizer page

Total height: 800px

• Primary tabs + carousel + secondary tabs = 800px

In the Elementor menu, there doesn't seem to be an obvious way to get the height of an existing carousel. Altering the number of photos displayed changes the height of the carousel.

I used Inspect Element to get the heights of the various widgets. To make it easier to find the height of something, right click it, click "Inspect Element", and drag your mouse along the source code on the right until the element in question is highlighted.

Here's what I found from Inspect Element:

Height of right column div: 830 px

Height of image carousel div 124.27 (about 124) px:

830 - 124 = 706 706/2 = 353 The primary and secondary tabs should have a height of 353 px so the sum of their heights and the image carousel div match the height of the right column div. The content of the two columns are now the same height.

[jcockroft64]

Thank-you!