Alignment of Front Page Columns

[hkp]

Hi Folks,

Out of the box, I find that the 2 columns of the front page with posts, don’t align with the text above, when full width justified.

Also, it seems all the related content area & post specific paddings are already either set at zero, or change both the front page and the post. So I can’t find any way to adjust the column widths.

Is it possible to make the desktop front page 2 columns wider, to align with the full width text above? (See red lines on image)

Secondly, it is possible to justify the Post Excerpt text on the front page?

Regards and thanks!

[scrambler]

And the link to the site would be ?

🙂

[hkp]

@Scrambler

Unfortunately I have no way to give you a link to this, but the principle is the same as

Regards and thanks.

[scrambler]

Then you will either have to inspect your site with your browser developer tools to find where the padding comes from, or be very detailed on how the page is created so I can make a test page on my side

[hkp]

Okay thanks. I understand.

Will leave it there now.

Regards and thank.

[hkp]

Came up with this which will do for now.

Alignment:

.content-2-col {padding-right: 1%; padding-left: 2%;}

Padding as padding-left: 0%; fully aligns all on the left, but brings the 2 columns too close together.

To Justify Excerpt Text:

.content-2-col p {text-align: justify;}

Regards and thanks.

[scrambler]

Are you creating your columns using manual HTML and the column classes or some other way?

We can definitely create CSS to make it do what you want, but I still need to know how you are creating the column, and especially how is the yellow background created to be sure.

[hkp]

@Scrambler

Thanks for the follow up.  It is greatly appreciated.  My sincere apologies for my curt words earlier.  I’ve been busy and rather fraught with many things, but that’s not excuse.

I develop all things on my desktop XAMPP, so I cannot share.  However, on this one, I have copied some of the CSS to our live site for testing (URL above), as both sites are developed in identical ways so far.

@Scrambler, I’ll be honest, coding is not in my DNA. All php and css I use is copied and modified to work, as I can’t write it.  But I can use Xtreme Options, Inspect, and this Forum as guides as to what is possible, and for where to look for solutions and sources, to get what I need.

So, to your questions, in the photo, the Front Page is a stock WP & Weaver page-with-posts, with the Xtreme Option: “Display post columns:  2 Columns”.  It uses one of your stock all-white sub-themes.

To see the boundaries of the displayed posts clearly, I made the last two post sticky and colored them yellow in Xtreme Options > Post Specifics > Post Area > Sticky Post BG: yellow.

The top 2+ lines of text are justified to visually define the max. with of the Content Area within the Wrapper.  The 6 black alignment lines are added to a screen capture in PowerPoint.  As I said… it’s all out of the Xtreme box… low tech stuff here.

What I found was that the 2 columns seem to be separated only by their L/R paddings, so while it is easy to set the paddings to 0% and align the outer sides to the columns as was wanted, the columns join in the middle and become one….

I found it impossible to have the sides of the yellow boxes align with the text over, as I needed to have some L & R paddings to both columns , to provide central separation between the columns.

FYI, I also found that with the Wrapping Area >  Container Area > Align Area: Center setting, that the contents did not actually align in the Center, but slightly to the left.  i.e. more white space on the right.  But I could not find the reason why.

Then I found that did not matter, as on the phones, there was far more white space on the left, and the right side was too tight.   So, I needed to balance the L/R paddings to get a satisfactory solution on phones too, where the L/R paddings make a much more noticeable difference than on the desktop.

I am still fiddling with it a little, but have more-or-less settled on the CSS quoted above, to align the columns on the desktop front page, and balance it with the phone appearance.

Even on the same phone, I found minor changes to L & R paddings had noticeably different results on different browsers.  So, a balance is needed here.

Thanks again for offering your expertise to help on this, but I think I need to leave this here now.

Yes, I could be pedantic and seek equal white spaces on the desktop, but as 77% of our visitors never see the desktop version, I think this will do and I’ll get on with learning how to use blocks and your Turnkey Bbpress in a prospective site, for which the yellow boxes image is a test part.

Regards and thanks,

Angus

[scrambler]

No problem, I will make a test page on my side and give you the CSS later

[scrambler]

So two things.

First I think the issue is more about adding the proper padding for the text above.

If you can tell me where hat text comes from (which piece / location), I can tell you how to add padding to it.

That said to set the left padding of the left columns to, and the right padding of the right column to zero, below are the rule you would need to use

.wvrx-posts .content-2-col:nth-of-type(2n+1) {padding-left:0;padding-right:2%;}
.wvrx-posts .content-2-col:nth-of-type(2n) {padding-left:2%;padding-right:0;}

If you only want that to happen on a specific page, you can add the page class to the rule

.page-id-xxx .wvrx-posts .content-2-col:nth-of-type(2n+1) {padding-left:0;padding-right:2%;}
.page-id-xxx .wvrx-posts .content-2-col:nth-of-type(2n) {padding-left:2%;padding-right:0;}

[hkp]

The 2+ line of text at the top of the page are on the Front Page : page-with-posts, and the setting for that text is simply:

<p style="text-align: justify;">.... 

The next text line is also on that page as:

<h3 style="text-align: center;"><span style="color: #0000ff;">Est, sem suspendisse metus potenti turpis .</span></h3>

There is nothing on the Front Page below that h3 line.

[scrambler]

What I meant is where does the content comes from, is it simply the page content found in the page editing page?

But looking at it again, I think you just want the rules I gave you

[hkp]

Yes, the content down to and including “Est, sem suspendisse metus potenti turpis .”  — and all above the top 4 social media icons, come from the Front Page-with-posts, page editing.

The 4 social media icons are automatically inserted by a plugin at the bottom of each page, hence they are inserted there, which is the bottom of my page edited contents on the front page.

All below the 4 social media icons is from Xtreme Option: “Display post columns: 2 Columns”.

Hope that helps.

I will be testing your above code ASAP.  But based on my own research, I think these will solve the issue.

Regards and thanks!

[scrambler]

If the text is the page content than it is submitted to the Content area Padding.

I guess the columns default CSS add extra padding to that, so the best solution are the rules I gave you to remove the left and right padding of the columns for the look you want

[hkp]

@Scrambler

I have tried your new CSS in our live site, but it only works for the top two posts on that page.

The posts below those, are aligned differently.

It is hard to tell on the desktop version, but on the phones it is pretty obvious, as per the attached phone screen captures.

So I have reverted the live site back to the previous CSS.

I do appreciate you help on this, but I think it is time to move on now  🙂   No one else is going to know… 🙂

Regards and thanks!

[scrambler]

You give up too easily 🙂

We do need to add a third rule for phone to cancel the paddings

.is-phone .wvrx-posts .content-2-col {padding-left:0 !important;padding-right:0 !important;}

You have another rule conflicting with mine that should be removed

.content-2-col (padding-left:.4em;padding-right:.4em;}

If after that it does not work, paste the content of the Custom CSS box here.

Note: you said the site is live, can you provide a link?

 

[Author]

Posts