Center WordPress Meta Data Category & Time Element (Divs)

I am having trouble figuring out how to center the category (weekly) and time (July 18, 2018) for responsive. On Desktop the category and time elements center perfectly from position: absolute;

category

time

position: absolute;

But in responsive mode, position: absolute; doesn't work.

position: absolute;

I've currently tried adjusting position: relative; along with top, right, bottom, and left. Along with doing other searches on Stack Overflow and I haven't' been successfully on figuring this out.

position: relative;

top

right

bottom

left

HTML

<article id="351" class="mk-blog-thumbnail-item
image-post-type mk-isotop-item image-post-type content-align-right clearfix">
<div class="featured-image"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/" title="This is the Event Title 5"><img class="blog-image" alt="This is the Event Title 5" title="This is the Event Title 5" src="https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbyyqfywge08vr8h2upg76d0miraa45r4lcg4s.jpg" data-mk-image-src-set="{&quot;default&quot;:&quot;https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbyyqfywge08vr8h2upg76d0miraa45r4lcg4s.jpg&quot;,&quot;2x&quot;:&quot;https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbz3lv4co3z1ddcx9m5w5lzfmlmkijrippzuqg.jpg&quot;,&quot;mobile&quot;:&quot;&quot;,&quot;responsive&quot;:&quot;true&quot;}" width="400" height="350" itemprop="image" mk-img-src-setted=""><div class="image-hover-overlay"></div><div class="post-type-badge" href="https://website.com/2018/07/17/this-is-the-event-title-5/"><svg class="mk-svg-icon" data-name="mk-li-image" data-cacheid="icon-5b58c8428bd16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.038 4.877h-408.076c-25.995 0-47.086 21.083-47.086 47.086v408.075c0 26.002 21.09 47.086 47.086 47.086h408.075c26.01 0 47.086-21.083 47.086-47.086v-408.076c0-26.003-21.075-47.085-47.085-47.085zm-408.076 31.39h408.075c8.66 0 15.695 7.042 15.695 15.695v321.744h-52.696l-55.606-116.112c-2.33-4.874-7.005-8.208-12.385-8.821-5.318-.583-10.667 1.594-14.039 5.817l-35.866 44.993-84.883-138.192c-2.989-4.858-8.476-7.664-14.117-7.457-5.717.268-10.836 3.633-13.35 8.775l-103.384 210.997h-53.139v-321.744c0-8.652 7.05-15.695 15.695-15.695zm72.437 337.378l84.04-171.528 81.665 132.956c2.667 4.361 7.311 7.135 12.415 7.45 5.196.314 10.039-1.894 13.227-5.879l34.196-42.901 38.272 79.902h-263.815zm335.639 102.088h-408.076c-8.645 0-15.695-7.043-15.695-15.695v-54.941h439.466v54.941c0 8.652-7.036 15.695-15.695 15.695zm-94.141-266.819c34.67 0 62.781-28.111 62.781-62.781 0-34.671-28.111-62.781-62.781-62.781-34.671 0-62.781 28.11-62.781 62.781s28.11 62.781 62.781 62.781zm0-94.171c17.304 0 31.39 14.078 31.39 31.39s-14.086 31.39-31.39 31.39c-17.32 0-31.39-14.079-31.39-31.39 0-17.312 14.07-31.39 31.39-31.39z"></path></svg></div></a></div>
<div
class="item-wrapper">
<div class="mk-blog-meta">
<div class="mk-blog-meta-wrapper">
<div class="mk-categories blog-meta-item"> <a href="https://website.com/category/weekly/" rel="category tag">Weekly</a></div> <time datetime="2018-07-17"><a href="https://website.com/2018/07/">17 July, 2018</a></time></div>
<h3 class="the-title"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/">This is the Event Title 5</a></h3>
<div class="the-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ultrices odio. Etiam eu [...]</p>
</div>
</div>
</div>
<div class="clearboth"></div>
</article>


CSS (Desktop)

.mk-categories {
top: -25px;
left: 140px;
text-transform: capitalize;
position: absolute;
}

time {
position: absolute;
top: 37px;
width: 100px;
left: 120px;
font-size: 12px;
}


Image (Desktop)

CSS - NEW position: relative;

position: relative;

.mk-categories {
top: -25px;
left: 140px;
text-transform: capitalize;
position: relative;
}

time {
position: relative;
top: 37px;
width: 100px;
left: 120px;
font-size: 12px;
}


Image (Mobile 767px)

Any help would be appreciated!

1 Answer
1

I'm curious why you're using absolute positioning for these elements in either desktop or mobile. Is there a specific reason these need to be positioned absolutely on desktop?

It seems to me the easiest solution is to redo the section using flexbox. It's widely supported at this point and fairly easy to implement.

Here's a link to a great breakdown on flexbox and how to use it.

In this case, I don't have all the CSS to go on, but here's possibly an example:

.mk-blog-meta-wrapper {
display:flex;
flex-direction:column;
align-items:center;
}

.mk-categories {
text-transform: capitalize;
}

time {
font-size: 12px;
}


Also your HTML is causing problems, as it's forcing you to try and move items before the title. Yet again, I'm not sure all the implications, but is there any reason you can't shift around your html to accommodate the title between the other parts?

<div class="mk-blog-meta-wrapper">
<div class="mk-categories blog-meta-item"> <a href="https://website.com/category/weekly/" rel="category tag">Weekly</a></div>
<h3 class="the-title"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/">This is the Event Title 5</a></h3>
<time datetime="2018-07-17"><a href="https://website.com/2018/07/">17 July, 2018</a></time>
</div>


Hopefully this is helpful. Look into flexbox, it will change your life. Happy coding.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.