Change width of sidebar dynamically

[dshakya]

Hi,

I would like to change the width of sidebar dynamically depending on the width of the main content. I have been able to do this my manipulating CSS values in Global JS. The issue is the lag in the sidebar width expanding/rendering once the page loads as the calculation ifs performed on Page load.

jQuery(document).ready(function($) {
$.CustomiseLayout();
$(window).resize(function(){
$.CustomiseLayout();
});
});

When the page loads, user can see the siderbar width expand. It would be good to set the sidebar width from the calculation and then the content in the sidebar load so that the user does not see the sidebar expand due to width calculation.

For example: https://rei.dwer.wa.gov.au/estuary/wilson-inlet/

Is there a hook that I need to utilise to do this calculation?

Also, I have assigned Content Width (.x-main) to be 65% in Theme options but when the page loads it is only 61.79803%.

UPDATE:

After reading other posts, I can see that there is a gap of 5% assigned between content area and sidebar. In my case it is about 6%.

REQUEST: It would be good if there was a setting in Theme Options to set the gap value say 0% to 10%. So if it is set to 0%, which is what I am trying to achive, I wouldn’t have to do all these calculations using JS.

Thanks in advance.

[christian]

Hey Deepak,

In the future, you will be able to achieve that without using custom code as there will be a Layout Builder which you can use to build your single post and archive designs. You can read more about our plans in our News Archive.

For now, you’ll need to override the width of the x-main and the x-sidebar using CSS. If you wish to close that gap, just make the width of both elements equal 100%. The current setup across all stacks is not 100% because they will not look good without a gap and your desired design wasn’t taken into account yet.

Thanks.

[dshakya]

Thanks for your reponse @christian_y. Look forward to the new release of layout builder.

[ruenel]

You are most welcome!