Archived topic
How can I align height of sidebar with the blog post featured image?
1 reply · Started by crosby87 on May 9, 2021
Hi there,
I would like to align the heigh (start) of my sidebar with the featured image of my blog posts. So basically I'd like my sidebar to start at the same height as my featured image.
See screenshot here: https://imgur.com/tjvHneJ
Could you please help with this?
Thanks in advance.
Hi there,
This is pretty tricky to do because the title length will vary.
This will affect how the featured image will align because another line of text from the title will push the featured image further down.
To get the most accurate result, we may need to right a custom script to calculate this.
This is out of our scope but to help you out, try adding this script on the footer.
<script>
var feat = document.querySelector(".featured-image");
var sidebar = document.querySelector("#right-sidebar");
var inner_sidebar = document.querySelector(".inside-right-sidebar");
var computed = feat.offsetTop - sidebar.offsetTop;
function sidebar_align(){
inner_sidebar.style.marginTop = computed+'px';
}
sidebar.onload = sidebar_align();
</script>
Note: I don't recommend doing something like this. It may be flagged as a CLS issue.