Columns questions

[Christen]

Aloha
Of course I installed V3 and started reading the new guide. I’m working here https://www.humancoherence.net

Each of the following pages is rendering in a way I would correct if I could figure out how…

Home – 1. there is an over large right margin I can not account for in all the settings I played with
             2. is there a way to give each column a title
             3. can the rows be made a uniform height?
Lyricus – 1.the text on this ‘page with posts’ is a different width than the masonry giving the page a disjointed feel when it scales
               2. same, uniform row heights?
Global Meditation – 1. same over large right margin as on the Home page
                               2. right sidebar widget is rendering under the content
Free Coloring Pages – 1. same over large right margin as on the Home page

I do not understand the errors I am getting in the debug window
As always, I appreciate your help!
Christen

[scrambler]

Home
1- If you mean the space between the columns, you have the posts set to 90% with a rule in a CSS+ box
{max-width:90%;}

Check CSS+ boxes in the Post Specifics page and Remove that

2- Just Type a title before the shortcode, use h tag to set the size like:
<h3>Title col1</h3>
[shortcode col1]

3-The difference in height comes from the post title being on one or two or 3 lines and the Excerpts also have different height.
there is no way to make them all the same size in a responsive manner, but you could add the rule below in Main options > Fonts & Custom > Custom CSS Rule Box to give them a minimum height.
.home article.post {min-height:400px;}
adjust the value to be at least as high as the highest post. But it is possible that as the browser gets smaller the value wont be big enough.
Eventually we can have one rule fo each device size using rules like
.is-desktop.home article.post {min-height:XXXpx;}
.is-smalltablet.home article.post {min-height:YYYpx;}
.is-phone.home article.post {min-height:ZZZpx;}

Lyricus
1- No idea what you mean, please elaborate
2- First don’t use masonry if you want the same height
second as above, you can have a rule to impose a minimum height on that page and eventually by device size (start with a single rule for all and check)
you will have to replace   .home by    .page-id-531

Global Mediation
2- You have a rule
.page-id-846 #content{background-color:rgba(255,255,255,0.8);width:80%;margin-left:3%;margin-right:3%;}

That set a different (bigger) width and margin on content, so the total of Content and sidebar is now more than 100%
Remove the width and margin property in the rule.
This is probably a rule placed in the Page editing page “per page style box”

[scrambler]

This discussion was created from comments split from: Weaver Xtreme Version 3 – Beta.

[Christen]

All fixed.
I think I’ll live with the column rows being uneven for now.
You rock!
I ALWAYS learn something more, thanks!

[Christen]

What’s the difference between the Masonry and Columns display on posts with pages?
or point me to the answer and I will read…

[scrambler]

Actually, this issue picked my curiosity, and I wondered if we could equalize the post height responsively with a script.

I believe I came up with such a script.

So do not put any of the min-height rule I gave you, and let us try this first.
In each page where you need to equalize the height of posts, do the following:

• In the Create New Custom Filed section, click ENTER NEW
• In the name box, type    postfooter
• In the value box paste the code below (in bold)

<script type=”text/javascript” language=”javascript”>
function weaverxUserOnResize() {
 //Equalize post height
 var wvrxPostHeight = 0;
 //Calculate height of highest post
  jQuery(‘article.post’).each(function () {
  jQuery(this).css(‘min-height’,”);  //Remove min-height
   if(jQuery(this).outerHeight() > wvrxPostHeight) {
    wvrxPostHeight = jQuery(this).outerHeight();
   }
  });
  
 //Apply height as a min-height to every post
  jQuery(‘article.post’).each(function () {
   jQuery(this).css(‘min-height’,wvrxPostHeight + ‘px’);
  });
};
</script>

• Then click ADD Custom Field
• Update the page

View the page and check if all the posts have the height. If not, post a link to the page that has the script inserted

[scrambler]

When using columns, the top of the posts are always aligned.
When using Masonry, the posts are moved vertically to fill in the space, like bricks

Do try the scrip above, it should take care of the equalization.

[Christen]

worked like a charm! check it out:
https://www.humancoherence.net/pivot-points/

[scrambler]

Closed for maintenance, but glad it did

[Author]

Posts