Text background colour spans whole column, with no gaps

[mugwumpr]

Hi all,

I’ve been pummelling away at this for days, and I can’t get it to behave. I can’t get the text colour to stay behind the text. It’s stuck to the sides of the column like its life depends on it.

I can get the top and bottom of the area to behave, but I’ve tried everything I can think of (padding, display, column-gap, other stuff I’ve forgotten), but none of it will budge the sides.

You can see it at https://staging.canadapottery.ca.

This was supposed to be a simple routing page, but it’s become the worst part of the entire multisite setup. I just want space between the options.

Thanks in advance!

[User]

Not sure I understand what you mean.

Do you want the text background to look lile it looks om this page?

i. e.  A white or other color for only the text columns?

https://retirementadventures.staging.canadapottery.ca/articles/

Regards.

[mugwumpr]

Yes, similar to that, although that page is posts, rather than just linked text. This is also posts, but shows what I’m trying to accomplish visually: https://staging.canadapottery.ca/articles/

I want the sides to conform more closely to the text, as it does at the top and bottom, rather than spanning the entire column to merge into a page-width blob as it’s doing now.

Example:

[scrambler]

I assume you created the content with HTML.

If you did not, please explain how you setup the three columns.

If you did use HTML you seem to have put the 3 column class directly on the h1, which means the h1 box will fill the whole column.

Normally you create 3 divs with the column class and place the content inside the divs.

Responsive Columns and Widgets – Weaver Xtreme Guide

That said if you want to leave the columns class on the H1, you can make it work by adjusting the values for the class.

You would need to put a class on the div that wraps the h1s, so we can target just that div with the CSS, for example use the class name mydiv

Then use the CSS below in the theme Global custom CSS rule box to change the column CSS in that div

.mydiv .content-3-col {width: 30%;margin-left: 1%;}

Again if you did not create the content with HTML, explain how you created it so we can give you a different CSS to make it work.

[mugwumpr]

Thank you, scrambler!

That’s exactly what I did to the h1.

I’d copied the 3-col section from the Guide, but then edited the styling into the wrong place and lost the plot completely in trying to fix it.

It’s working exactly as hoped now.

Thanks again!

[Weaver]

I have a comment about the flower background on many pages, e.g.,

BC Ceramics & Herta Picture Gallery

I find it very difficult to actually read the text on these pages. The example above seemed worse than many of the other pages.

I assume that is what you want for your design, but I know that if I were just browsing your pages like that, I’d simply give up and look elsewhere. I don’t have much patience for hard to read text. Perhaps if the text were really black, perhaps a bold font, they might be more readable.

The overall design is nice, but don’t overlook the font over flowers readability.

[mugwumpr]

Hi Weaver.

Thanks for the feedback!

This is still in the early stages of structural setup as a new multisite (adding 2 new sites to an old, established one at the base canadapottery.ca URL); I wanted to get the upper level navigation nailed down before getting any deeper in.

The pages will look like the posts, with white backgrounds and darker text before things go live. In fact, that was today’s planned task!

Hold that thought, though; I’ll be working with per-page styling and may be back here again in the near future.

😉😁

[Author]

Posts