I would like to centre align the h-card widget on the ‘About’ page of my website. I would like to appear below the title of the page (‘About’). I tried using the following CSS in the cusomizer : Additional CSS…
div.hcard-widget {
margin: auto;
width: 50%;
padding: 10px;
}
This doesn’t work. Do you have a suggestion as to what would work?
My website: About – Hoedlog
See screenshot for widget that I would like to centre align
How about:
justify-content: center;Or
text-align: center;Move the widget content into the content area.
I think that will align the text inside the widget. I would like to move the whole widget.
How can I do that?
Here’s the code from the widget…
<section id="hcard_widget-6" class="widget hcard_widget">
<div id="hcard_widget">
<div class="hcard-display h-card vcard u-author">
<div class="hcard-header">
<a class="u-url url fn u-uid" href="https://www.hoedlog.uk">
<p class="hcard-name p-name n">Ben Davies</p>
</a>
<p>
<a class="u-email" href="mailto:[email protected]" >[email protected]</a>
</p>
</div> <!-- end hcard-header -->
<div class="hcard-body">
<ul class="hcard-properties">
</ul> <!-- end hcard-properties -->
<p class="p-note note">Father of two children
I have a keen interest in non-hierachy, patriarchy and how this relates to my role as a parent.
I identify as Autistic. I enjoy reading, walking in nature, playing with my two kids. For self-care I am interested in Shamanic Journeying and Nei Gong.</p>
</div> <!-- end hcard-body -->
</div>
<!-- end hcard-display -->
</div>
</section>
I would simplify it a lot, but you can use it as is. Paste it into the content editor for that page (text side). Then you can give it a width and add margin: 2em auto to css.
Then remove the widget from the sidebar.
Try this…
<div id="about_widget">
<ul>
<li><a href="https://www.hoedlog.uk">Ben Davies</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<p>Father of two children I have a keen interest in non-hierachy, patriarchy and how this relates to my role as a parent. I identify as Autistic. I enjoy reading, walking in nature, playing with my two kids. For self-care I am interested in Shamanic Journeying and Nei Gong.</p>
</div>
CSS…
#about_widget ul {
padding: 2em 0 1em;
list-style: none
}
#about_widget a {
display: inline-block;
margin: .3em 0
}
And remove the widget from that page.
Unfortunately that won’t work. The widget includes Microdata that is required for compatability with the Indieweb. I’m looking for a solution that uses CSS only.
Try this…