[strobleyParticipant]

Hi Themeco,

WP 4.4.2
X 4.4.1
CS 1.2.2

I’ve just updated one of my test sites and the columns are now behaving differently with pseudo styles spanning across columns rather than being contained.

Will send details…

[strobleyParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! I’m not sure of the changes, but there are variables you need to consider when utilizing a percentage value. For the :before pseudo class please re-calculate the width: calc(80% + 10px); and left: 10%; for the :after update the width: 80%;

Hope it helps, Cheers!

[strobleyParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Sorry about that, yes I did ask the Developer and he had not seen anything related to this specific issue. Yes I did update/test the :after and :before value on dev tool. I just feel that It would be more efficient if we just update the classes, than looking for the variable that is affecting the current value (which is calculated).

View post on imgur.com

And please try re-saving the page as there were some column issues back with v1.0.7.

Thanks.

[strobleyParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I checked and confirmed that position: relative; is now removed from columns default styling. I can’t confirm this if this is intentional change but I’ll forward this issue.

But in my personal opinion, it should be removed. Adding positiong: relative will restrict other elements for that specific area which of course affecting elements that has position: absolute;. It’s better to be implemented as optional styling that user can manually add. This means if you wish to restrict left, top, bottom, right positioning then add positiong: relative;, if not, then remove it.

For now, please manually add position: relative; to your columns style input.

Thanks!

[strobleyParticipant]

Hi Rad,

Whilst I agree with you views on positioning. The question I asked is “what has a change in the update from X 4.3.4/CS 1.1.3 to X 4.4.1/CS 1.2.2 that could now cause this”. Bearing in mind none of my custom classes had changed.

Really appreciate all your guys help, but recommending further unnecessary changes to custom classes without understanding what had actually changed in the update often not wise.

I also notice that with 100% has been removed in the update. The affects layouts on no-container templates as the content no longer goes edge-to-edge up to the max-width size.

.x-section .x-container.marginless-columns {
<strong>width: 100%;</strong>
}

I realise I can add width: 100%; back in, but am effectively reproducing how the X/CS used to work. Was this taken out intentionally or will it be added back?… I don’t mind either way, just need know. On every update I don’t wish to continually reproduce pre-update code if it’s going to be changed back.

Thanks again.

[RadModerator]

Hi there,

Unfortunately, we don’t have a list of changes in code level.

And this CSS isn’t removed.

.x-section .x-container.marginless-columns {
width: 100%;
}

There is no CSS such as that even on the old version. But the column has containers that dictate the width of it. And it can be turned off and on through rows column container’s option. Basically, if you turned off the column containers, it will then default to 100%.

Column containers have default CSS like this, which inherits the layout setting from customizer. But if you turn off the column container, it will then set this CSS automatically.

.x-section .x-container.marginless-columns:not(.width) {
    width: 100%;
}

It’s not removed, maybe you just accidentally turned it on.

Thanks!

[strobleyParticipant]

Hi Rad,

I’m not totally sure I follow what you’re saying – but let me give you more info in case I’ve missed something. I’m using the Ethos stack with template 4 (no container, header footer) and setting the Row with 2 columns to marginless columns.

In the the previous versions ethos.css had:

.x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
    width: 100%;
}

The latest release the code is as follows:

.x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
}

Without the width: 100% it inherits:

.x-container.width {
    width: 90%;
}

I can’t find this example you’ve given in the Developer Tools.

.x-section .x-container.marginless-columns:not(.width) {
    width: 100%;
}

The width is inheriting the width:90 from .x-container.width

Does that make sense?

Thanks again.

[RadModerator]

Hi there,

Yes, that’s what I’m currently referring. It will inherit the container’s inner width of 90% when your row’s inner container is enabled. If so, you can just toggle on and off the column container whenever you wish.

This change is to allow the user to decide whenever they wish to apply column container, or using full-width ( 100% ).

Please toggle of your rows column container if you wish to have a marginless column with 100% width.

Thanks!

[strobleyParticipant]

Hey Rad,

OK, holding my head in shame… I’d never ever noticed the Column Container toggle just above the Marginless Columns toggle!

Just turned it off and yes the code:

.x-section .x-container.marginless-columns:not(.width) {
    width: 100%;
}

Appears 🙂

Thanks again.

[ChristianModerator]

You’re welcome. Glad we could help. 🙂

[Author]

Posts