Content Main float:left

Nobady an idea?

If I assume correctly you want to left-align your main content area.

If so, you have to set

.site-content{
    float: left;
}

But then your sidebar will be on the right side instead of left.
This is because in your html the sidebar comes after your main content area. So if you wanted to have it on the left again, you’d have to move their html around.

Regards,

Kim

hi kimkwanka

thank you for your replay.

on the browser view i will have the sidebar on the left. on the mobil version i will have the sidebar after the main content area. so far no problem. but my main content area did not use the full space on mobile view.

.site-content{
    float: left;
}

set the sidebar to the right side, and i get a space on the mobile version in the main content area on the right

.site-content{
    float: right;
}

set the sidebar on the left side, and i get a space on the mobile version in the main content area on the left

i would not have any space, equal left or right in my main content area on mobile view. what is the code, that the main content in mobile view uses the width of 100%

You have to check all the media-queries in your style.css, they look something like this:

@media (max-width: 767px) {
...
}

Now look through each of them and check to which weight % your .site-content is set and change accordingly. You will have to look for these:

.sidebar .site-content {
	width: 65%;
}

and change them to 100%. You might have to add “!important” to make it work:

.sidebar .site-content {
	width: 100% !important;
}

The alternative is to copy the media queries from your style.css into your custom css code, remove everything but the parts that starts with

.sidebar .site-content {

and add the 100% width there. Then I guess you wouldn’t have to add the “!important” since your custom css gets imported last so that it overwrites the rules set in style.css.

Regards,

Kim

Hey Kim,

thank you so much. I changed the values already in my css file, and it did not work. the solution was that i copy the changed code in my custom css file.

many thanks