XF 2.2 how to set top:0px for this part?

[securedme]

For the following part:

<div class="gridCard--cover">
<div class="groupCover--wrapper">
<div class="groupCover groupCoverFrame groupCoverFrame--setup">
<a href="/groups/test.3/">
<img data-crop="{&quot;w&quot;:1118,&quot;h&quot;:200,&quot;x&quot;:&quot;0&quot;,&quot;y&quot;:&quot;-77.5px&quot;,&quot;imgW&quot;:0,&quot;imgH&quot;:0}" class="groupCover--img" data-xf-init="tlg-cover-setup" data-debug="0" data-width="918" data-height="367" alt="ok" style="top: 30.9003px;" src="https://whatever.com/attachments/ok-jpg.17/" data-force-height="100">
</a>
</div>
</div>
</div>

How do I change the following part to "top: 0px" for all gridCard?

 

[Jeremy P]

This isn't part of the core. It's set by the style="top: 30.9003px;" attribute, but I imagine that's being set by some JS handler (tlg-cover-setup?). You should ask the author of the customization.

 

[securedme]

This isn't part of the core. It's set by the style="top: 30.9003px;" attribute, but I imagine that's being set by some JS handler (tlg-cover-setup?). You should ask the author of the customization.

Thanks Jeremy.

Actually it's set by the add-on after the user dragging (repositioning) the "cover image" to a desired position. So it's different for every gridCard. But I just want to set them all to top=0px; for a particular @media (max-width: .

So it can't be set by some css codes in extra.less?

 

[Jeremy P]

You can try this, but since I don't exactly know what purpose it serves I'm not sure if it would break or otherwise negatively impact something:

.groupCover--img
{
    top: 0 !important;
}

 

[securedme]

You can try this, but since I don't exactly know what purpose it serves I'm not sure if it would break or otherwise negatively impact something:

.groupCover--img
{
    top: 0 !important;
}

It works! What exactly is the double hyphen doing?

I had a hard time getting the right class name for making modifications.

I tried the following but didn't work. After your reply, I added the !important
but it still doesn't work.

.gridCard--cover >a > img {
    top:0px;
}

 

[Jeremy P]

It's not doing anything special. The element has class="groupCover--img" so that is merely its class name. XF CSS convention is based on BEM, but it has no syntactic significance.

The selector you tried has the child combinator (>), which only selects direct descendants. .gridCard--cover a img would have probably worked.