Support » Theme: Storefront » Increase width of sidebar

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi @strictlyonlinebiz,

    It is definitely possible to tweak the widths between the main column and sidebar. There is a general container div with the class .col-full. This gets a calculated property (based on the number of columns and their width), but to make things simpler the max width it allows is max-width: 66.4989378333em;. If you wanted to make that wider you’ll want to first change that width, try something like 80em.

    Beyond that the .col-full div has the primary content area and the secondary widget area within it. You can then adjust your width of each of these divs in a percentage based calculation that eventually adds up to 100% in the end.

    These are again calculated with some fun SCSS formulas, but they are currently as follows if your sidebar is on the right side of the site.

    @media (min-width: 768px) {
    
      .right-sidebar .content-area {
          width: 73.9130434783%;
          margin-right: 4.347826087%;
      }
    
      .right-sidebar .widget-area {
          width: 21.7391304348%;
          margin-right: 0;
      }
    
    }

    Just to confirm that does all add up, 73.9130434783% + 4.347826087% + 21.7391304348% = 100%

    So for what you are after you’ll want to make the .right-sidebar .content-area width a little smaller. Then increase your .right-sidebar .widget-area appropriately. For example, this would make the sidebar wider and main content a little thinner and add up to 100%.

    @media (min-width: 768px) {
    
      .right-sidebar .content-area {
            width: 70%;
            margin-right: 3%;
      }
    
      .right-sidebar .widget-area {
          width: 27%;
          margin-right: 0;
      }
    
    }

    Here is a before & after for how that looks.

    BEFORE:
    Before width change
    Link to image: https://cld.wthms.co/hJUNjM

    AFTER:
    After width change
    Link to image: https://cld.wthms.co/RTlKTK

    • This reply was modified 1 year, 5 months ago by ryanr14.
    • This reply was modified 1 year, 5 months ago by ryanr14.
    • This reply was modified 1 year, 5 months ago by ryanr14.
    • This reply was modified 1 year, 5 months ago by ryanr14.

    @ryanr14 Thanks a lot man. It worked

    Hi @strictlyonlinebiz,

    Happy to help! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Increase width of sidebar’ is closed to new replies.