We would like to have the Authors name and date appear to the right of the Authors headshot. We are using this in Flex Block 1. Please see link https://www.screencast.com/t/8ZuUWgiFC
We currently have the CSS below to make the author’s name and date breaking into 2 lines.
CSS:
/* Authors / Byline to display in 2 lines */
.metainfobreak .td-editor-date .td-author-date .td-post-author-name {
display: block; }
Hello,
Normally the author name and date are displayed as you want, so if you to look like this => https://i.imgur.com/OuE2JBu.pngthen you need to remove the CSS or set to display inline-block =>
.metainfobreak .td-editor-date .td-author-date .td-post-author-name {
display: inline-block; }
Thank you!
We would like to have the headshot to the Left then display the Authors’ Name on 1 line and on the 2nd line the date only. by default. per your screenshot, it has all 3 items inline. We need the date to break to a new line.
link showing what we are looking to accomplish with meta info : https://www.screencast.com/t/d795iEaQxjO6
Hello,
I made a custom code, but you need to change the value because depends on the author image size => https://i.imgur.com/tW3hy14.png
.td_flex_block_1 .td-author-date
.td-post-date{
top: -12px;
right: -35px;
display: block;
}
.td_flex_block_1 .td-post-author-name{
top: -7px;
}
Hope this help you!
Thank you!
Thank you for sharing. The CSS. I added the code you supplied and made some edits so it would position correctly. We now have an issue where the CSS is adjusting all td_flex_block_1 elements. How can we only affect specific elements?
See link: https://www.screencast.com/t/xzJpe3zJVn
site: https://dev.hrmasia.com/
/* Authors / Byline to display in 2 rows */
.metainfobreak .td-editor-date .td-author-date .td-post-author-name {
display: block;
}
/* HeadShot, Authors Name and Date formating text to right of photo */
.td_flex_block_1 .td-author-date
.td-post-date{
top: -20px;
right: -50px;
display: block;
}
.td_flex_block_1 .td-post-author-name{
top: -7px;
}
Hello,
So, if you want to apply the code only for certain blocks, then you need to add an extra class for these blocks => https://i.imgur.com/7eQbbhw.png and add the extra class to the custom code.
Thank you!
