Need help? Check out our Support site, then

How to change page width in Fantawood Light theme

  1. This is my first post here and also English isn't my language, sorry for the mistakes.

    I use Fantawood Light theme and got Custom CSS. The theme uses responsive width, but it looks too much narrow for me, and I haven't got to change it, don't find the code to apply.

    The blog I need help with is

  2. Are you trying to change the width when responsive or at full size?

  3. At full size, I have not much knowledge about this stuff, I'm a novice, but wanted at least to increase the width for pc screen.

  4. You can experiment with this css to edit the main width. It is currently set to 920px.

    #page {
    max-width: 920px;
  5. This will widen it. The original max-width was 920px. You can make it any size you want it. You will have to create a new header image that is the same width as your chosen width below (height is up to you) and upload that header image and then click the "use as is" button instead of cropping it.

    #page, #main-navigation, #masthead {
    max-width: 1200px;
  6. Thanks to both

  7. You are welcome.

    @mrdirby, I should have refreshed before posting. :)

  8. @thesacredpath I'm glad you updated. I didn't know the main-navigation and masthead should be included.

  9. NP @mrdirby, and thanks a lot for the help in the CSS forum. Glad you are here. :)

  10. @thesacredpath, you're welcome. I'm actually interested in becoming a happiness engineer. So trying to get some experience under the belt.

  11. @mrdirby, that was how I got started. :)

  12. It worked, but I would try another thing, if it's possible.

    How can I change the ratio sidebar-main content? I mean to narrow sidebar to widen main content.

  13. It looks like this theme uses a right margin to set the width of the main content and a width for the sidebar. Both use percentages so you can play around with what you like best.

    This should give you an idea.

    .site-content {
    margin: 0 18% 0 0;
    .site-main .widget-area {
    width: 15%;
  14. This takes the sidebar from 25% width down to 20% and widens the content by reducing the right margin by 5% from 33 to 28%.

    .site-main .widget-area {
        width: 20%;
    .site-content {
        margin-right: 28%;
  15. Yes, it works perfect! Again, thanks to both for your help.

    I hope to learn something and not have to ask each step :-)

Topic Closed

This topic has been closed to new replies.

About this Topic