Home Forums Weaver Show Posts & Show Sliders Weaver Show posts column issue on scaling

This topic contains 11 replies, has 2 voices, and was last updated by  booth1 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #57429

    booth1
    Participant

    Hi all. I just rebuilt a blog using the Weaver Show Posts shortcode in Weaver Xtreme. For the most part it works really well, but when I scale the site to the point Weaver creates 2 columns, the columns seem to break and leave gaps where there should be a post. I have styled the posts using CSS and there is a chance this broke it, but I removed any code that could have broke it and still had the same issue.

    Any ideas on what might be going wrong here? Appreciate any help you guys can give! Link to the page with the issue below:

    https://ally-law.com/global-matters/

    As an add on, Weaver Show Posts doesn’t have the option to make it Masonry columns somewhere does it?

    #57432

    scrambler
    Moderator

    That is a bug, I cant believe it has not been caught before.

    @weaver, when the number of  X columns goes down, there is CSS to remove the clear:left from the Xn+1 items and then place it on the new appropriate items, but that CSS is missing !important.

    For example, when going from three columns to two columns, there is the rule below to remove the clear on 3n+1 posts
    @media(min-width:581px) and (max-width:767px){
    .atw-content-3-col:nth-of-type(3n+1){clear:none}
    }

    But because it is missing !important, it does not get applied and causes empty location in the columns.

    I have not tested, but there may be other similar instances.

    @booth1, for now, add the rule below to the theme Global custom CSS Rule box

    @media(min-width:581px) and (max-width:767px){
    .atw-content-3-col:nth-of-type(3n+1){clear:none !important;}
    }

    As for masonry, I don’t see anyway to use that with showposts, may be weaver will know better.

    But given your page only has posts, why don’t you use a page with posts instead of the show posts shortcode?

    #57433

    booth1
    Participant

    Awesome thank you very much scrambler, just applied your code and tested and it is working great now! Let me know if you want me to look for more bugs 😉

    #57434

    scrambler
    Moderator

    @booth1, I juts added a comment on masonry, instead it was not there when you read my post above

    #57435

    booth1
    Participant

    Ah I see it now!

    With regards to why not page with posts, it is because I built the page a bit differently to allow me to do quite specific styling with the text at the top of the page on a white background, and maintain that across the site. One requirement was a sidebar that starts below that top bit of text and have everything below be full width. When I first built the site I tried a few different options for getting this design and this was the easiest and cleanest way to build it sitewide.

    I was actually using a plugin called essential grid to build the blog before, but it caused major slow down of the website, so today I rebuilt the blog using the Show Posts and it is much speedier! The only thing it is missing is the Masonry styling but we can live without it for the speed increase.

    #57436

    scrambler
    Moderator

    There is no styling issue we could not fix with a page with posts.

    I suggest you try with a page with posts and bring any styling issue you want to solve here.

    #57438

    booth1
    Participant

    Hi Scrambler. Ok let’s try this!

    I setup a staging site here with some of the modifications made (it is a page with posts with a 25% sidebar):

    http://allylaw.staging.wpengine.com/global-matters/

    The issues I have:

    1. The content at the top is not full screen as the widget sidebar extends up to the top of the page. I fixed this before by having a “blog top widget area” widget to use that content full width. It worked but it wasn’t ideal, and also I have 2 pages with “Page with Posts” now (also this one: http://allylaw.staging.wpengine.com/news/), so to be able to do that I would have to install another plugin to tell what widget to go to what page, and I am trying to keep plugins down.
    2. Feel like I am missing something simple here, how do I send certain sidebars to different pages with posts? Of course the end result being being able to have a sidebar which is psecific to the blog page, and a sidebar which is specific to the News page.

    So really the main issue is the sidebar thing. Interested to see how you would sort this issue.

    Thanks mate!

    #57443

    scrambler
    Moderator

    1- Full width area at the top
    Do you have the Plus plugin?
    If you do, you can use the “container_top” HTML insertion area only on that page with a page custom field for your text
    Below are all the insertion areas descriptions:
    https://guide.weavertheme.com/layout-and-html-insertion-areas/
    and below is how to use them on individual page/post with a custom field.
    https://guide.weavertheme.com/custom-fields-on-pages-and-posts-what-to-use-them-for-and-how-to-use-them/

    You basically create a new custom field, give it the container_top name, and place your text HTML in its value box.

    If you don’t have Plus, you can expand the top area using weaver expand class
    This area appears to have been done by you with HTML and is a section tag with the id globaltextbox. It seems unnecessary complicated for what we need here.
    Just replace that HTML by the one below, adding the class wvrx-expand-full to that element, that will make is expand to the full browser width
    (this is explained in the full width article https://guide.weavertheme.com/full-width-design/)

    <div id="globaltextbox" style=" background-color: #ffffff;" class="wvrx-expand-full">
    <p style="text-align: justify;"><span style="font-size: 12pt;"><span style="color: #808080; letter-spacing: 2px; font-family: Roboto, sans-serif;">
    <span style="color: #4aaa51;">Global Matters</span>
    &nbsp;features updates about legal and business trends, the impact of changes in law and other topics of interest affecting multi-jurisdictional businesses. In addition to contributions by member firms, 
    <span style="color: #4aaa51;">Global Matters&nbsp;</span>provides updates on Ally Law news and other developments.</span></span></p>
    </div>

    You also need to add the CSS rule below to the theme Global Custom CSS Rule box so the expanded div is fully visible.
    .is-desktop .content-page, .is-desktop #content {overflow:visible !important;}

    2- Per page sidebar areas.

    This is a standard feature of Xtreme, You first create your custom Widget areas by giving them names at the bottom of Main options > Sidebar & Layout. Once created they will appear in Appearance > Widgets where you can populate them with your widgets.

    Then in any page or post editing page, you can replace any of the existing widget area with these custom created ones using the widget area replacement drop down lists found the in page options > content tab

    #57463

    booth1
    Participant

    Hi Scrambler I do have the Plus plugin.

    So I ran through the things you said here: http://allylaw.staging.wpengine.com/global-matters/

    And it worked in some ways and not in others. First off thanks I had never tried building sections like that and imagine it will come in handy in the future. In this particular instance it comes in handy because I can use masonry, but other than that it seems to have the same result with some new issues, I am curious do you think there is a benefit to one way over the other (other than the masonry)?

    One issue I have with this way (Page with posts), is I cannot tell it to have a maximum word count for the excerpts, and I cannot tell it to say Read More instead of the 3 dots in brackets it has there, or am I missing something?

    Also weirdly I am not sure what did it, but when creating the post this way (and before I added CSS to the page), there is a huge gap between the end of the posts and the bottom of the page with nothing in it?

    S what do you think? Either way I learned som enew tricks so thank you!

    #57464

    scrambler
    Moderator

    Page with posts excerpt length and continue reading message settings are in Main options > Post Specifics > Excerpts / Full post section.

    Also weirdly I am not sure what did it, but when creating the post this way (and before I added CSS to the page), there is a huge gap between the end of the posts and the bottom of the page with nothing in it?

    I am not seeing any gap at the bottom of the page, I would need to see the page with the gap to know where it is coming from.

    Ultimately, there is no benefits one way or the other besides the ones you find (like masonry) 🙂

    #57515

    scrambler
    Moderator

    @booth1, weaver released a new version of Show posts with a fix for the CSS problem, so you should not need the rule below anymore (if you are still using that method)

    @media(min-width:581px) and (max-width:767px){
    .atw-content-3-col:nth-of-type(3n+1){clear:none !important;}
    }

    #57566

    booth1
    Participant

    Great thanks Scrambler. I tested it out and works great! 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.