• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Eleven40Pro – Making Secondary Sidebar Smaller & Content Area Bigger

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Eleven40Pro – Making Secondary Sidebar Smaller & Content Area Bigger

This topic is: resolved

Tagged: content, elven40pro, resize, Sidebar

  • This topic has 5 replies, 3 voices, and was last updated 6 years, 3 months ago by Nero.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 10, 2017 at 9:23 am #207561
    Nero
    Member

    Hi all!

    I'm trying to customize the sidebar-content-sidebar layout in Eleven40Pro Child Theme.

    My problem: The content area’s width cannot expand to the LEFT side when I reduce secondary sidebar’s width. It only expands to the RIGHT. There’s a big unused space between left sidebar & content area. I want to use this space to make content area bigger.

    How do I make the content use the extra space on the LEFT?

    What I've done so far:

    Left Sidebar (Secondary) reduced from 150px to 120px (already changed in style.css)

    .sidebar-secondary {.sidebar-secondary { float: left; width: 120px;}

    Content resized from 660px to 640px to fit primary sidebar (I want it to expand left to make use of the 30px I get from making left sidebar smaller)

    .sidebar-content-sidebar .content,.sidebar-content-sidebar .content,.sidebar-sidebar-content .content,.content-sidebar-sidebar .content { width: 640px;}

    Right Sidebar (Primary) increased from 250px to 300px (to fit in advertisements)

    /* Primary Sidebar */
    .sidebar-primary { float: right; width: 300px;}

    Any tips are much appreciated. I've looked through the style.css for hours, tried to adjust margins & paddings, but no luck.

    https://i.gyazo.com/c9b260fd9d1362347f4b8121f84d1c21.jpg
    June 11, 2017 at 4:16 am #207591
    Victor Font
    Moderator

    Please post a link to your site. Images help to clarify the problem, but we need to see the code in situ to solve the problem.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    June 11, 2017 at 12:39 pm #207621
    Nero
    Member

    My apologies Victor - here is the test URL: http://neroclaudius.byethost7.com/test-page/

    Hope this makes it easier.

    June 14, 2017 at 12:14 pm #207737
    Nero
    Member

    Does anybody have a tip? I still haven't figured it out.

    June 19, 2017 at 12:21 am #207912
    WisdmLabs
    Member

    Hello Nero,

    The outer container '.wrap' takes max-width of "1140px" on medium and large devices and for devices with width below "1140px", the width given is "960px". so we will have to manage the width of side bar and content section accordingly for both cases.

    case1: for big devices above 1140px, modify the following css

    /* style.css - line no 499 */
    .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap{
      width:1020px;
    }
    
    /* style.css - line no 524 */
    .sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .content-sidebar-sidebar .content {
        width: 720px;
    }

    case2: for small laptops width range 768px to 1140px, modify the following css

    @media only screen and (max-width: 1140px){
     /* style.css - line no 1617 */
     .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar 
     .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap {
        width: 840px;
     }
    
     /* style.css - line no 1628 */
     .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-
     sidebar-content .content {
        width: 540px;
     }
    }

    check if this works for you and let me know.

    - Vishnuprasad from Wisdmlabs


    http://wisdmlabs.com/

    June 19, 2017 at 4:55 pm #207956
    Nero
    Member

    It worked!!!
    Thank you so so much Vishnuprasad from Wisdmlabs 🙂

    Would never have thought of that. Many thanks, I bow to you \(^o^)/

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble