left sidebar is not all the way to the left

Hello,
?
?Please add this extra CSS code in Customizer -> General Settings -> Additional CSS :
?

.page-template-page-templatespage-with-left-sidebar-php .page-content .gridContainer {
width:100%!important;
max-width:unset!important;
}

thanks for the tip but your sample doesnt seem to be formatted correctly.
I have tried using something like this below and the sidebar width can be changed, but I still cant change its position.

.sidebar {
        float: right;
        margin-left: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

Is there some way to correct your sample, or to guide me in how to modify my sample to force the sidebar to the far left?
Thanks

Hello,

Can you show me in a screenshot how exactly you want the sidebar positioned in the page so I can better understand and help?

Thanks, it should look like this
https://www.olaptrader.com/wp-content/uploads/2021/11/sidebar.png

looking in the theme editor, I see this is the way it’s currently set:

<?php
/*
Template Name: Page With Left Sidebar
*/

materialis_get_header();
?>
<div class="page-content">
    <div class="gridContainer">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-3 page-sidebar-column">
                <?php materialis_get_sidebar('pages'); ?>
            </div>

            <div class="col-xs-12 col-sm-8 col-md-9">
                <?php
                while (have_posts()) : the_post();
                    the_content();
                endwhile;
                ?>
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

Maybe you can just tell me what to change there. It might be easier for me to change it there, rather in the CSS editor in the customizer.

i tried again using your example and got it working somewhat .
eg.

.gridContainer {
width:100%!important;
max-width:unset!important;
}

https://www.olaptrader.com/TEST/

Now, I have a question regarding how to change the width of the sidebar to be only as wide as the longest line. Also, how do I make it so that the sidebar only appears as the three line hamburger menu on a mobile device?
Thanks

Hello,

Please use this CSS code :

.col-xs-12.col-sm-4.col-md-3.page-sidebar-column {
padding:0px!important;
}

For mobile view, can you also show me in a screenshot how would you want it to look?

that recent change made the column width smaller which is good, but it is no longer left aligned like it was before when I had this:

.gridContainer {
width:100%!important;
max-width:unset!important;
}

Hello,

Is it not displayed properly with both pieces of CSS code?

It should be displayed properly if you use the CSS code as below:

.page-template-page-templatespage-with-left-sidebar-php .page-content .gridContainer {
width:100%!important;
max-width:unset!important;
}

.page-template-page-templatespage-with-left-sidebar-php .col-xs-12.col-sm-4.col-md-3.page-sidebar-column {
padding:0px!important;
}

you didnt say I needed to use both pieces together.
Also, to me its strange to be referencing the rather strange filename for the php file. But regardless, if I use your example above with both pieces, or if I truncate it like this –
.gridContainer { width:100%!important; max-width:unset!important; }
.col-xs-12.col-sm-4.col-md-3.page-sidebar-column { padding:0px!important; }

It does work, but I dont see any way to reduce the width of it. If I change the 100% to 90%, it’s no longer left aligned. It shouldnt this hard.

is there any documentation you can send me a link to? Stuff specific to Materialis and CSS customizations?
Thanks