Vertical alignment of header + date of posts

Posted in: Newsmag
Post count: 27

Hi,

On the 2 attached images, we’re having problems with the vertical alignment of the date and headline of a post (or, actually all of our posts). The problem occurs in the following two scenarios:

1) To the left in the footer, we show the latest 3 posts. However, as seen on the image, the date and headline of those posts do not vertically align.

Alignment problem in the footer

2) When click an actual post, then that post-“page” also has problems with the vertical alignment of the post date and headline as seen on the image below.

Alignment problem on a post

Any reason as to why this has happened? We have toyed around with margins, borders and such – but not on any sections that should mess up the alignment of a post date+headline in the footer, or on a post page.

Any help to align them vertically is of course highly appreciated!

And also – happy new year to all of you!

Post count: 6535

Hi

I cannot recreate this situations on my side but looks like a css issue. Try to deactivate all plugins except Visual Composer, clear all caches and test again. Also if you made any customizations in theme’s files or you added some custom code in theme panel > custom code make sure that this don’t affect theme’s functionality.
Let me know how it goes and if the problem persist please provide your site url so I can inspect it closer.

Thanks!

Post count: 27

Thanks for the quick reply!

We have tried with the plugins, and also cleared caches loads of times 🙂 We have no customizations in the theme’s files – and we do also not have any custom code in the theme panel.

1) URL for the frontpage where you can see the problem in the footer: Frontpage

2) URL for a specific post, where you can see the alignment error at the top (with the date and headline of the post): Specific post

Have tried some methods, that did not work – so am a bit confused as to how this even happened 🙂

Post count: 6535

Hi

Try this css in theme panel > custom code > custom css and modify the margin value as you like: http://screencast.com/t/ZsKuJGiRA8AT

.widget_recent_entries .post-date, .td-post-date{
margin-left: 5px;
}

Let me know how it goes.
Thanks!

Post count: 27

Hi Andrei – the CSS code works like a charm, in order to align the date with the headline.

However, it seems that instead of moving the margin of the “date” element 5px to the left (as the CSS code did), it should instead be the “headline” element that should be moved 5px to the right (so that both date and headline aligns with the footer widget name “Nye indlæg”).

Is that possible? I tried to inspect the headline element in the footer, but could only see the following HTML code for the headline

If possible, the margin of this element should be moved 5 px to the right

Is it possible to move this HTML code 5 px to the right – that would solve it :-)?

The page I have taken the above example from is: this page

Thank you for the help so far!

  • This reply was modified 10 years by Xperten.
Post count: 6535

Hi

You can achieve that using this css: http://screencast.com/t/wsww8PCFKlxg

.widget_recent_entries li a{
margin-left: -5px!important;
}
.widget_recent_entries .post-date{
margin-left: 0px!important;
}

Thanks!

Post count: 27

Wonderful! Thanks a bunch Andrei – really appreciate the help during the holiday period 🙂

Have a great day, and a happy new year!

Viewing 7 posts - 1 through 7 (of 7 total)
The forum ‘Newsmag’ is closed to new topics and replies.