Site not centered

Dear Support Staff,

I have a very big problem with the Astrid theme.

My website, www.tornadeaux.com, is not centered. Is is aligned on the left side.
On big screens is is completely on the left side and there is very much white space on the right side.

Also, on some screens, de sidebars are not at the side anymore. They are underneath the rest of the content.

I already had a programmer look at it, but he could not fix it. Now I am desperate.

Could you please have a look at my website and let me know how I can fix this?

Many thanks in advance!

Kind regards,
Sanne

Hi,

I just checked your site and notice that there is a custom CSS code applied to your site which is caused the problem. Please try to find the following CSS code and remove it:

.container {
    margin-left: 10px;
    margin-right: 10px;
}

or you can also add the CSS code below to fix the issue:

.container {
    margin: 0 auto !important;
}

Regards,
Awan

Hi Awan,

Thank you so much for your reply! It worked, the website is centered now.

However, the problem with the sidebars is still there… Have you any idea how I can fix that?
On some screens they are on the side, but for example at my laptop (Macbook pro retina) in Google Chrome the side bars are underneath the main content.

I hope you are willing to take a look at that problem as well?

Thank you so much in advance! You have been of great help already, thanks again.

Kind regards,
Sanne

Hi,

Please try the following CSS code and let me know how it goes:

@media only screen and (max-width: 991px){
  .blog .site-content > .container {
    width: 100%;
  }
  
  .blog .content-area {
    width: 65%;
  }
  
  .blog .widget-area {
    width: 35%;
  }
}

@media only screen and (max-width: 800px){
  .blog .site-content > .container {
    width: 750px;
  }
  
  .blog .content-area {
    width: 100%;
  }
  
  .blog .widget-area {
    width: 100%;
  }
}

Regards,
Awan

Hi,

I tried the code, however nothing changed. I put it in my css customizer or should I put the code somewhere else?

Is there any other solution to this?
And do you have any idea what the source of the problem is?

I don’t get why on some screens/browsers the site looks fine and on others it looks horrible.

Thanks again for your help. I really hope we could figure this out.

Hope to hear from you soon.

Kind regards,
Sanne

Hi,

Because here is no macbook pro device, which is mean I can’t test it with the real device, so I just play around to test the screen dimension by zomm in-out my browser.

Please try to add the following CSS code:

@media (min-width: 1200px){
  .container {
    width: 1175px;
  }
}

Let me know how it works.

Hi Awan,

I am happy to tell you that code worked!

Thank you so much for your help, I really appreciate it.

I couldn’t be happier that it’s all solved now!

Thanks again.

Kind regards,
Sanne

Great! I am glad to know that the code is worked.

Feel free to create new thread if you have another question.

Regards,
Awan