• Closed
  • Richard Long
    Spectator
    May 18, 2016 at 8:35 pm #27811

    I use Alora+ theme. I changed sidebar size using this custom css code.

    #secondary {
    max-width: 200px !important;
    }

    That worked.

    Now how do I enlarge main contents area. There is a large gap between sidebar menu and products.

    Thanks

    Roman
    Spectator
    Posts: 3147
    May 18, 2016 at 10:10 pm #27814

    I would recommend to set it with a percentage value in Theme Options -> Sidebar

    Richard Long
    Spectator
    Posts: 8
    May 19, 2016 at 12:18 am #27815

    I’m sorry I’m using “evolve +” and I do not have that option in Theme options

    Denzel Chia
    Moderator
    Posts: 2656
    May 19, 2016 at 1:17 am #27818

    Hi,

    The sidebar is #secondary, then contant area is #primary
    Use #primary with the css code that you had posted in this thread.

    Thank you

    Richard Long
    Spectator
    Posts: 8
    May 19, 2016 at 3:46 am #27830

    The pages I’m trying to adjust are the woocommerce product and catagoties pages. The css code #primary does not change how it is displayed? The css code for #secondary changes the sidebar width but the space it takes stays the same. It seems like the column the sidebar resides in does not change just the width of the sidebar.

    Richard Long
    Spectator
    Posts: 8
    May 19, 2016 at 3:49 am #27831

    I can set the #primary to 300px and it makes it small on right side of page. I can increase px and it gets larger. It maxs out at about 900 pix. If I set for 1200px or 1000px it is same size as 900px.

    Thanks again

    Roman
    Spectator
    Posts: 3147
    May 19, 2016 at 7:56 am #27839

    @media (min-width: 992px) {
    .woocommerce #primary {
    width: 66.66666667%;
    }
    .woocommerce #secondary {
    width: 33.33333333%;
    }
    }

    modify per your needs

    Richard Long
    Spectator
    Posts: 8
    May 19, 2016 at 6:41 pm #27865

    The above code did not change position on screen.

    The code below works for me to a certain width

    #primary {
    max-width: 800px !important;
    }

    #secondary {
    max-width: 200px !important;

    The primary content will change to a certain point around 800px. If I set it to 300 it is small. Set it to 500 it gets bigger. Anything after around 800 it stays the same. I can change 800px to 1000px it does not get bigger.

    Thanks for all your hard work.
    }

    Richard Long
    Spectator
    Posts: 8
    May 19, 2016 at 6:52 pm #27866

    OK after some trial and error I found this seems to work.

    #primary {
    width: 80%;
    }
    #secondary {
    width: 20%;
    }

    Thanks again

    Roman
    Spectator
    Posts: 3147
    May 19, 2016 at 7:36 pm #27867

    well, I wrote you to modify per your needs 😛