This is one of those questions that’s probably going to have everyone pointing at someone else when it comes to support, but here goes! I just installed the new 3rd party StudioPress theme called Showcase Pro on a local dev site I’m working on. The page width is set at 1280 in the Global options. I inserted the Posts module on a new page, using the default setup of 300px wide, 60px between posts. It only displays the posts 2 columns wide. I created a new page, used different posts, changed the width of each post to 250, checked the margins and padding, nothing will make it go wider than 610px. After looking at it in inspector the posts module is in this element: .fl-row-fixed-width { max-width: 1280px;}, but when I actually select the .fl-post-grid.masonry element, the inspector shows: element.style {width: 610px; height: 2748px;}. I can’t figure out where this is coming from, so I loaded another StudioPress theme (Pretty Creative), and the page is fine - 3 columns wide of posts showing on the page without any tinkering.
I’m sorry that it’s on a local dev site, so I can’t give you a link, but I can provide you with screenshots or code. I’ll try and move it to some hosted space tonight so you can take a look at it, because I’m dying to use that theme!
The inline style you’re seeing from the .fl-post-grid-masonry element is being generated dynamically, i.e., it is being calculated while the page is loading. Definitely let us know once you’ve managed to transfer the site to a live URL so we can check further!
I switched the theme and then set the page template to the Full-Width Template. This resolves the column issue. However, that theme also has styling that is interacting with the Gallery and causing the images to not be at the top of each column.
The CSS in question is:
@media only screen and (min-width: 800px)
.grid > *, [class*="grid-"] > * {
align-self: flex-start;
}
@media only screen and (min-width: 800px)
.grid, [class*="grid-"], .equal-heights > * {
display: flex;
flex-wrap: wrap;
}
They’re targeting any element that includes grid- in the class name, but they’re also using a universal selector with the asterisk (*). This is overriding the styling for BB. You’re going to need to contact them and see if they can prefix this code with something unique to them.
I have left that theme active along with the Full-width Template. So you can see the issue.
Thanks, Danny. I really thought I tried the full-width template, but maybe it was caching or something, glad you got it to work! I have submitted a support ticket to the theme developer in hopes that they can provide me with a fix for the other problem you noticed. I really appreciate you pointing that out, it would’ve driven me crazy! It’s a gorgeous theme, I really want to use it.
How did you add the row? That’s really weird how it does that! I simply copied your module, moved it to a new row, and deleted the old row. Can you check/play around with the same page and see if you can recreate the issue?
Now that I reread my question, it does sound kinda stupid! I was wondering if you were pulling in the 1 Column row layout or the Right Sidebar layout. Definitely let us know when you can recreate it so we can take a look and enjoy your spring break!
Hey Ben,
I definitely just added a single row. As a matter of fact, I didn’t even realize there was a right sidebar layout! I’ve been adjusting two columns to 70% / 30%, duh, I won’t do that anymore! So, it’s just something weird going on because it happened with the StudioPress Showcase Pro theme and now with Altitude Pro. The one thing that was in common between them is that both times I was using the post grid module. I’ll keep my eye out to see if it happens again and let you know.
