Page sidebar not aligned with title, how to align?

Support
#1

Hi,

I have a problem with the alignment of my sidebar in X Theme, Ethos stack.
For posts, it is normal that the sidebar is aligned to the right next to the post title.
However, for the pages, the sidebar is aligned below the page title (to the right of the content text).

I want to change this so the alignment is the same for posts and pages - both should align like a post would.
That means, titles should always go left and sidebar should always go right of the title, not below.

How can I do this?

Thanks,
Arnold

#2

Hey Arnold,

Thanks for writing in!

Are you referring to your Contact page? To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-default .x-header-landmark+.x-container>.offset>.x-sidebar {
    margin-top: -105px;
}

We would loved to know if this has work for you. Thank you.

#3

Thanks for helping! I tried your suggestion, but it wasn’t a correct fix. Added some extra pixels (300px instead of 105) to align it better. But it cuts off the title text, making it unreadable.

Here’s the result for a dummy page I made:
https://gyazo.com/f7fa6b95c127bafc0b94642a652a2723

#4

Hi @ArnoldM,

May I know what URL has this issue? I couldn’t find it. The content width is wider than other posts.

Have you created it from the builder (eg. widget area element)?

Thanks!

#5

It’s basically any page on my site with a title that’s too long. I still have these pages in draft mode (they are not published yet because they need to be finished). Here’s a dummy page I just published as example:

https://bestweldingsupplies.com/recommended-products/best-plasma-cutter-in-the-world-when-i-write-too-much-text-here-there-the-sidebar-should-be-to-the-right-of-this-text-but-its-below-this-text-and-thats-not-what-i-want/

I have not created it with a builder, I just used the standard WordPress backend editor.

PS. The previous fix also makes the sidebar look very weird on my “Recommended Products” page, whereas it looked normal (i.e. similar to the homepage) before. See this URL: https://bestweldingsupplies.com/recommended-products/

#6

Hi there,

Please try to remove the previous code then try this:

.x-header-landmark+.x-container>.offset>.x-sidebar {
   margin-top: 0;
}

Hope this helps.

#7

Did as you described, now it’s back to the old problem: https://bestweldingsupplies.com/recommended-products/best-plasma-cutter-in-the-world-when-i-write-too-much-text-here-there-the-sidebar-should-be-to-the-right-of-this-text-but-its-below-this-text-and-thats-not-what-i-want/

#8

Hi there,

Please try updating the code to:

.page .x-main.left .hentry .entry-featured, 
.single-post .x-main.left .hentry .entry-featured,
.x-header-landmark+.x-container>.offset>.x-sidebar {
   margin-top: 0;
}

Hope this helps.

#9

All done, still nothing. See results here: https://bestweldingsupplies.com/recommended-products/best-plasma-cutter-in-the-world-when-i-write-too-much-text-here-there-the-sidebar-should-be-to-the-right-of-this-text-but-its-below-this-text-and-thats-not-what-i-want/

#10

Hi again,

Sorry for the confusion. The layout you’re trying to achieve is not possible with CSS only. It needs a bit more customization, try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('body.page .x-header-landmark').removeClass('max width x-container').addClass('ptn').insertBefore('body.page .x-main article > .entry-featured');
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#11

Yes! That did the trick. Thanks for your help, this solved my problem :slight_smile:

#12

You’re welcome.

#14

It seems that you have withdrawn your post, which is totally fine. Feel free to create a separate thread if you have any other issues.

Thanks!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.