Adjusting CSS on sidebar to make it flush

[Peter_Fae]

Hey. I’m seeing an inconsistency in the way the sidebar between pages and posts. I’m wanting it to be flush against the left without any whitespace showing when the page is in default mode, to be nice and clean.

It works on posts - example --> https://intothemythica.com/2019-2-27/

Yet not on pages - example --> https://intothemythica.com/physics-of-the-quest-the-structure-of-the-self/

Obviously, I’d like it to be clean on mobile (tablet, phone) as well.

In a related way, what setting of margins(?), I’d like to see how the ‘Physics of the Quest - Structure of the self’ banner on the second (page) example would look it is was flush, nice and clean, on the right and up against the sidebar on the left.

Basically, a clean look that works across mobile and desktops.

Thank you

[rad]

Hi Peter,

Thanks for reaching out.

This custom CSS is the one responsible for that

.single-post .x-container.max.width.main {
    max-width: 100%;
    width: 100%;
}

If you wish to make it the same for other pages then you must change it to this

.x-container.max.width.main {
    max-width: 100%;
    width: 100%;
}

I checked it on mobile and it’s clean, may I know what you’re referring? But if it’s still related to the above CSS, then please do that first.

It’s not due to margin, but with the width, the more you reduce the width, the more space but the content is always centered. Are you trying to apply smaller width but still flushed to the left giving more space to the right?

Thanks!

[Peter_Fae]

nah, what I’d like is simply to have the header (Physics of the Quest) be flush with the left edge, it’s already flush with the right, and be consistent with that across all devices.

https://intothemythica.com/core-teachings-physics-of-the-quest/physics-of-the-quest-the-world-tree/

[thai]

@Peter_Fae

nah, what I’d like is simply to have the header (Physics of the Quest) be flush with the left edge, it’s already flush with the right, and be consistent with that across all devices.

Hi Peter,

It’s not possible because the Physics of the Quest header is belong to the .x-main element which has the maximum of width is 74%.

But you can achieve it with the global block instead. Please add the following code under functions.php file locates in your child theme:

function x_print_global_block(){
	if ( is_page( 28861 ) ) do_shortcode('[cs_gb id=381]');
}
add_action( 'x_after_view_ethos__landmark-header', 'x_print_global_block' );

The 28861 is Physics of the Quest page ID and [cs_gb id=381] is your global block shortcode.

Hope it helps