Popout Post Grid/Showcaee
-
Topic
-
-
Replies
-
What are doing with custom padding on the wrapping column which contains the pop out element? And section? Play with disabling the custom padding you’ve applied. Can you link me to a live example?
Hey Jason, slept on this.
So with a fresh mind. I used Post Showcase Element instead of Post Grid Element and that worked.
As I wanted to embed video, I simply moved content-showcase.php to my child theme and modified the file to include themeblvd_content_video(true);
Anyway the following class (.row) is targeted using the Post Showcase Element.
.post_showcase.no-gutters .showcase-wrap>.row {
margin: 0;
}So when using Post Grid Element with the element display ‘popout’ you simply need to add the following class to remove the horizontal scroll.
.popout .post_grid .grid-wrap>.row {
margin: 0;
}Hey there, Mizzinc, I have had this issue on some sites, and the problem/solution is related to the padding on the Section.
What I have found is that if you use popout but then set custom padding in the display options for the section and inadvertently remove the 30px left/right padding, you will get horizontal scroll bars. Add back in the padding, and the horizontal scroll bars go away.
Yeah I agree with Angela; I was able to identify the same behavior. But I’m not fully sure of the best solution just yet. I’ll probably have to end up just spitting out more dynamic CSS in the
<head>of the site to compensate, from the builder plugin.Anyway, it happens because the popout element works by adding negative margin to the elements to fill back the padding of the current section. So, for example, by default you have sections with 60px padding, and then you have the popout elements with negative 60px margin, so they fill back to the edge. However, the padding of the section is dynamic outputted CSS (if you add custom padding), while there is no dyanmic CSS outputted to adjust the negative margin of popout element.
I guess the initial thinking here is that if you have a popout element intended to fill the whole section, it wouldn’t make sense to be adding padding to the section because this would now be controlled within the element. But, I can see how life is not always this simple, and your section may end up having a mix of popout element and those that are not. However, if you’re using a popout element in any way, you could probably achieve a similar effect by separating that popout element into its own section, and thus have no reason to be messing with custom padding on the section.
This is always a nice little CSS hack you can add that will throw a nice big newspaper over the mess everywhere on your site, where it might potentially arise.
body { overflow-x: hidden !important; }What I have found is that if you use popout but then set custom padding in the display options for the section and inadvertently remove the 30px left/right padding, you will get horizontal scroll bars. Add back in the padding, and the horizontal scroll bars go away.
I looked at this further, and I did make an attempt already in the plugin to combat this it looks like. BUT the bug currently is that if you set the section custom left/right padding to
0px, the builder doesn’t spit out the CSS to compensate inner popout elements. For example, if you set the right/left padding to1px, it should work.Now that I see this, it should be an easy fix for the next builder update.
- You must be logged in to reply to this topic.