Reduce content size on one page

Hi!

How can I change the content size on one page? This is the page I’m asking help for:

http://www.artofhosting.fi/kouluttajat/

I’d like the text to be centered on a smaller area under the picture. Sorry tried my best and already searched for the forums but couldn’t find answer for this.

Best Regards,

hr_gr

Hi,

You can limit the width of the content only on that Page / Row with this Custom CSS:

#panel-31-0-0-0 .so-widget-sow-editor {
    max-width: 600px !important;
    margin: 0 auto !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 add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba!

Sorry I was delayed with other tasks.

I tried to make these changes, and it started to work on one page “Kouluttajat”. How can I make the changes to the page “Mikä on Art of Hosting?”?

Thank you very much of your help!

hr_gr

Hi again,

After making those changes the web site’s header stopped working in mobile devices. How do I keep my web page responsive if I want to edit one page only?

hr_gr

Hi,

The Custom CSS which I gave you is limited to one page only, if you want to make the editor widget like that on every page, then use this Custom CSS instead:

.so-widget-sow-editor {
    max-width: 600px !important;
    margin: 0 auto !important;
}

Please let me know how it works.

Can you, please clarify what is the issue on mobile after applying the Custom CSS ( if you can, please post a screenshot, so I can check ).

Best Regards,
Csaba

Hi Csaba!

Now the web site works fine on pages, but I still fail to get the mobile version working. Problem is, that the header area doesn’t fit to screen anymore and the navigation bar disappears. It didn’t start to work even if I removed all the code I wrote earlier.

You can check for yourself: www.artofhosting.fi

Best Regards,

hr_gr

Hi again,

I managed to fix the problem with the header, by replacing the pixel amount from 992px to 292 px.

@media only screen and (min-width: 292px) {
.page-wrap .content-area {
width: 65%;
}

It also started to show the navigation but now it is not showing the sidebars correclty.

BR,

hr_gr

Hi,

That Custom CSS isn’t affecting the menu in any way, so the menu may not be fixed by that, that just can cause width issues on larger devices.

Kind Regards,
Csaba