Topic: Unexpected margin under publishing date on mobile

Leonardus
February 21, 2024 at 12:08 pm

Hi,

Before updating the plugin on my website, I made a test website that looked almost perfect.

Now I’ve done the update in the actual site (copied all settings plus extra css) and I have some unexpected results. For instance:

The margins between headlines/publishing date on mobile are different from the ones in desktop and tablet view. Can you please tell me where I could fix that.

(url’s in private information)

Desktop

Mobile

Thanks, Leon

Ying

February 21, 2024 at 12:23 pm

Hi Leon,

Can you try adding this CSS?

@media(max-width: 768px) { 
  .post-image-aligned-left .post-image,.post-image-aligned-right .post-image {
         margin-bottom:0;
    }
}

Leonardus
February 21, 2024 at 12:45 pm

Thanks Ying,

This works nicely for the pages “Columns” and “Dossiers”, but not on the homepage or archive.
Could you maybe fix that as well?

Kind regards, Leon
Ying
February 21, 2024 at 1:03 pm

This works nicely for the pages “Columns” and “Dossiers”, but not on the homepage or archive.

I wrote the CSS for homepage and archives, doesn’t it work?

It should NOT affect your Columns page as it’s built by WP query loop block.
Leonardus
February 22, 2024 at 1:29 am

Hi Ying,
You are right: it does NOT affect the columns and dossiers pages.
However, it also does NOT affect homepage and archives page.

On the images you see the effect on these pages:

Home

Archives

Thanks, Leon

David

February 22, 2024 at 3:12 am

Hi there,

try this CSS:


@media (max-width: 768px) {
    .post-image-aligned-left .generate-columns-container .post-image, .post-image-aligned-right .generate-columns-container  .post-image {
        margin-bottom: 0;
    }
}

It will make the Yings CSS a little more specific so it should override the current style.

Leonardus
February 22, 2024 at 5:42 am

Hi David,
Unfortunately the new css had no effect.
I hope you can think of some other solution.

(strange enough, the test site doesn’t have the same issue.)

Thanks, Leon
David
February 22, 2024 at 7:57 am

See here:

https://app.screencast.com/ynmdESLVc81GY

The previous CSS rule is missing its closing } bracket, so the CSS below won’t load.
Leonardus
February 22, 2024 at 9:14 am

Hi David,
Rather embarrassing, but that was it.
Thanks!
Leon
David
February 23, 2024 at 2:59 am

Mo problem, glad to be of help!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Unexpected margin under publishing date on mobile