Content Alignment

Team,
I am using the Sydney theme and my content is aligned to left on some of the pages (ex: about page). I have the following custom code yet the alignment isn’t working It was working before not sure what i did wrong. Website is www.saiva.com.au/about. Any assitance is much appreciated.

    .content-area {
      width: 70% !important;
      max-width: 70% !important;
      margin: 0 auto !important;
      float: none !important;
    }

    @media only screen and (max-width: 768px) {
      .content-area {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

Hello there,

Try enabling front page template instead of full width. Or add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      .page-template-page_fullwidth .page-wrap > .container {
        margin-left: auto;
        margin-right: auto;
      }
    }

Regards,
Kharis

Hello Kharis,
Thanks for the quick reply.
I tried both the options with not much luck.

Option one - did not make any difference
Option 2 custom code - made it worse ( it looked like it was left aligned)

Thanks

Hello there,

Try this code:

    @media only screen and (max-width: 991px) {
      .page-template-page_fullwidth .page-wrap > .container {
        margin-left: auto;
        margin-right: auto;
      }
      .page-template-page_fullwidth .content-area {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

If it doesn’t help, probably I didn’t get the objective correctly. Would you please take a screenshot to better help me understand it?

Regards,
Kharis

HI Kharis,
What I meant is; my pages are aligned to left and I want them centered.
This is only with some of the pages. I have attached a screenshot for your reference.

Thank you for sharing the screenshot. What is your screen’s resolution?

http://whatismyscreenresolution.net/

Regards,
Kharis

I am testing on multiple screens

1920x1080

1368x912

Hello there,

I checked your site’s CSS and it contains below:

    .content-area {
        width: 70% !important;
        max-width: 70% !important;
        margin: 0 auto !important;
        float: none !important;
    }

which might present in the additional CSS (Dashboard > Appearance > Additional CSS).

What will happen if you remove it temporarily?

Regards,
Kharis

I just disabled it temporarily and looks even worse.
its completely aligned to left.

This si fine as long as i can center align the content.

Hello there,

Try adding this CSS code:

    @media only screen and (min-width: 992px) {
      .content-wrapper.container {
        margin-left: auto;
        margin-right: auto;
      }
    }

Regards,
Kharis

It works like a charm.
Thank you for your prompt reply as always Kharis.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis