How can i align the page content?

Now, I am developing the website using ‘Sydney theme’.

this is very nice theme.

but, I can’t align the content to center.

I want to align the content to center. (all pages)

this is my sample website.(http://godsfingers.kr/?page_id=71, http://godsfingers.kr/?page_id=69 … )

how can i do?

I am a wordpress beginner, please help me!

thank you for your nice theme.

Hi,

You can make the content full-width ( and center it ) with this Custom CSS:

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

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

First, thank you for your help.

I have applied your Custom CSS using ‘Simple-custom-css’ plug-in.

so I have aligned the contents to center!!!

thank you so very much!!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba

Hi there,

I was trying to use the CSS you mentioned and it worked fine for me as well, but the text is actually too wide then, if it’s set at 100%.

There is an alternative CSS I used that worked much better for the desktop version:

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

However, this posed problems for the mobile version, as the text column became too narrow, especially on the phone.

Is there any possibility to center align the text for the desktop version and not for other devices? Or to make the desktop version 70% and the iPad and iPhone versions 100%, if using the code above?

If I keep the text as its, unmodified, it is actually left aligned and leaves a lot of white space on the right side when visiting it through desktop.

I hope my question is somehow clear.

Thank you & with best wishes,
Jennifer

Hi Jennifer,

You can have the CSS you’ve added for desktop and have a 100% width version for mobile with this Custom CSS:

.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;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Wow, that worked perfectly! Thank you very much!

Best,
Jennifer

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba