Hi there,
Going back some years now Toolset support kindly helped sort a page layout to make a map stick, this using the Kadence theme.
All has worked great with no issues until Kadence did their latest update and this has changed some of the Row and Column structure.
We've used this CSS, supplied by support to make a map stick and full height:
.kt-row-layout-inner > .kt-row-column-wrap > .inner-column-2 {
width: 30%;
position: fixed;
right: 0;
}
}
On this page you'll now see the issue: hidden link
I guess it's because we have targeted the column rather than the map element and their update has broken this.
I have spent better part of 3 hours trying to work round this and make things worst or have no effect.
Can you offer any thoughts once again to resolve this please?
We have a number of sites that when updated, will have the same issue.
Many thanks, Pete
Hi Pete,
Thank you for contacting us and I'd be happy to assist.
When I checked the page, the right column for the map was acting as a sticky section, but the left column for results was centered in the middle with the map section overlapping over it.
To fix this, you can change the following custom CSS code from the template "loop-item-in-holidays-sub-feat-pages", from:
.kt-row-layout-inner > .kt-row-column-wrap > .inner-column-1 {width: 100%;}
To:
.kt-row-layout-inner > .kt-row-column-wrap > .inner-column-1 { width: 100%; margin-right: 0; margin-left: 0; }
This should do the trick.
regards,
Waqar
Hi there Waqar,
Thank you very much for that suggestion, something so simple worked a treat 🙂 Wish I had thought of that approach 🙂
Can I ask as it's related to the same layout? The reason this page broke was due to a theme update, sure these things happen.
However yesterday I was working on a new version of the template, this just using Toolset Containers and Grids.
This worked correctly from the start. Can I ask, the map when viewed on desktop....is this the best approach for making this fixed?
Here I am targeting the left grid cell and not the map itself.
This the new Template using just Toolset Containers etc: hidden link
That said there is a .map-stick class on the map and I have no idea where that is on the map or the site CSS.
I only ask as I have never got the fix element right in the past and moving forward will be using more and more Toolset Blocks rather than site theme.
Many thanks in advance and appreciate your time.
Thanks for the update and glad that it worked.
Without the reference to the old instance, it is very difficult to guess exactly which part of the theme update affected the layout. But, it is good that you've adopted it to work using only Toolset's container and grid blocks. This way it shouldn't be dependent on the markup/HTML coming from the theme.
For fixed/sticky elements, it doesn't really matter, whether you're targeting the grid column cell or its inner element. As long as it works, I can't think of any benefits of one approach over the other.
From the code it looks like, the page is using a single field block inside the grid cell for the map. In that field block, the div with class "map-stick" holds the code for the map. I'll recommend checking which field this field block is set to use and then checking that field's content in the backend post edit screen.
