Width of sidebar and content area

First of all, Upfront themes are awesome! And I'm having fun using theme. I need help customizing them though. If you open gmail on your desktop there's very little space between the sidebar and the content area. and the width of the sidebar is pretty small. I want to know
1.How to achieve the same result usIng fixer and other upfront themes.
2.How to change the width in other WP Themes generally, what properties will I likely need to edit and how. I am using localhost, I understand that your answer cannot be that specific. Thank you :smile:

  • Adam Czajczyk

    Hello MWale,

    I hope you're well today and thank you for your question!

    I'm really happy that you like our Upfront but you're right, I'm not able to give you any specific answer or a "step by step" response.

    Upfront is unlike any other theme and non of its currently available child-themes (starter themes) include a "classic sidebar". The "sidebar-like" layout can of course be created but in order to be able to tell you what exactly you should do to make sidebar-content spacing smaller, I would neet to check the site and see particular layout.

    The general answer though would be: experiment with region settings - width and paddings.

    As for WordPress themes in general. For all Upfront themes this works the same (see above). For other themes that's also hard to tell because:

    - some themes include complex settings/options panels that could be used to adjust layouts
    - some have less customization options but e.g. includes multiple page templates with different variants of sidebar-content layouts available
    - some will require custom CSS to be added.

    The bottom line is: I'll be more than happy to help you with this but apart from these general (and, I realize that, very generic) answer I'm not able to assist you better until I see the site(s) in question.

    If you have any further questions on this, let me know please.

    Best regards,
    Adam

  • Mwale

    Hi adam thank you for your reply! I have recently added a site: m52study.tk - when you go to http:m52study.tk/pricing/ you'll see that there is a sidebar on the left hand side and that there is a lot of space between where the page starts and where the sidebar starts. How can I make the sidebar move to the far left of the page, without having any problems on smaller screens (such as tablets)?? - I have already tried saying float left.. If you are not sure what I am talking about, check your Gmail on desktop to see the position of the sidebar on the page. That's where I want my sidebar to be at the far left.
    Thank you

  • Mwale

    Milan thanks for looking at my site. I thought the default page had a sidebar but it didn't. I have now updated the page. Please look again : http://m52study.tk/pricing/ . I dont want to have much space between the edge of the page and the sidebar. And I dont want to have a lot of space between the sidebar and the content. I want to accomplish all of this without running the sidebar out of the screen on smaller devices. Please provide the best time for correspondence. Thank you

  • Dimitris

    Hey there Mwale,

    hope you're having a beautiful day and don't mind skipping in! :slight_smile:

    You can surpass this by hardcoding some CSS

    #content { max-width: 95% !important; }
    #primary { width: 85% !important; }
    #secondary { width: 15% !important; }

    Take notice that this will take effect in all pages. If you want to narrow this down to a specific page, you can use a body class. In this case it's .page-id-34

    so this can be transformed to

    .page-id-34 #content { max-width: 95% !important; }
    .page-id-34 #primary { width: 85% !important; }
    .page-id-34 #secondary { width: 15% !important; }

    Hope that helps,
    Dimitris :slight_smile:

  • Milan

    Hello Mwale ,

    Hope you are well today. :slight_smile:

    In your above screenshot, only 2 changes need to be done on your site which are,

    #1) Primary content area's content should be left aligned. and,
    #2) Secondary sidebar should be touching nav bar.

    I can see now that 1st one has already been handled and for second one you can use this one,

    #secondary { width: 15% !important; margin-top: -1px; }

    Let me know how it goes. :slight_smile:
    Best Regards,
    Milan

  • Adam Czajczyk

    Hello mwale!

    I checked the site in a mobile view and then read the thread again and I just realize that even despite you are using an Upfront theme we focused so far on a minor CSS tweaks but never mentioned Upfront's responsive modes.

    I can see that so far the site just "collapses" when used in mobile mode while it's not a common practice to use sidebar-enabled layout with mobile views for smaller screens. That's mostly because it very difficult to find a nice balance between such a layout and readability :slight_smile:

    That being said, have you at all used the Upfront "Responsive" mode while designing the page? What you design "normally" is the base layout for desktop view and 'high resolution" mobile devices (such as e.g. tablets with a high resolution screens). For smaller devices though its suggested to first:

    - switch to "Responsive" mode of Upfront ("Responsive mode" button at the bottom of Upfront panel)
    - use breakpoints modes to switch between "mobile" and "tablet" views (icons at the top of the screen)
    - then make adjustments/redesign site using Upfront while in one of the responsive modes

    There are tools such as hide/show particular element/region on the page and you can make adjustments to the size/location of elements and these would be applied to the mobile view only while the desktop view should remain intact.

    Have you already tried that? I think this would be solution to layout related issues in mobile view.

    Best regards,
    Adam

  • Mwale

    adam I hope you are well,
    thanks for your reply on this topic, I am actually using "Tesseract" theme. The main reason for this is that I think Upfront themes dont support buddypress, do they?? I say this because when I activate fixer theme and click on my username, it takes me to a blank page with only my username displayed on that page. Seeing as this is the case, could you please have another look at the site.
    Thanks very much,
    Mwale

  • Predrag Dubajic

    Hi Mwale,

    Upfront is currently having some issues with Buddypress but it is something we're looking of taking care of in future updates.

    About the sidebar styling, my suggestion is to use current content-sidebar proportions on large screens only, then for bit smaller sizes, like laptops for example use different proportions by increasing sidebar width and decreasing content, and then for mobile devices moving the sidebar below the content.

    You can remove the previously provided CSS and use below one instead that should do this for you.

    .site-content #primary {
        width: 85%;
    }
    
    .site-content #secondary {
        width: 15%;
    }
    
    @media only screen and (min-device-width : 769) and (max-device-width : 1190) {
        .site-content #primary {
            width: 75%;
        }
    
        .site-content #secondary {
            width: 25%;
        }
    }
    
    @media only screen and (max-device-width : 768) {
        .site-content #primary {
            width: 100%;
        }
    
        .site-content #secondary {
            width: 100%;
        }
    }

    Let us know if you like this solution :slight_smile:

    Best regards,
    Predrag

  • Dimitris

    Hey there,

    Predrag just forgot to include the whole content area which includes primary and secondary (sidebar) regions.
    Simply add this rule in your custom CSS
    #content { max-width: 95%; }
    if the content still remains narrow (980px) just use
    #content { max-width: 95% !important; }
    instead (we usually tend to avoid usage of !important in CSS code but because of the way CSS is being loaded you should be able to override it this way).

    Hope that helps,
    Dimitris :slight_smile:

    EDIT: You also have to use the !important in all rules that are wrapped in media queries in Predrag's snippet :wink:

    • Mwale

      Dimitris thanks for your reply, the desktop now looks good! But the problem is still there on smaller screens, did I make a mistake? Heres how Custom Css looks now

      #content { max-width: 95%; }
      .site-content #primary {
          width: 85%;
      }
      
      .site-content #secondary {
          width: 15%;
      }
      
      @media only screen and (min-device-width : 769) and (max-device-width : 1190) {
          .site-content #primary {
              width: 75% !important;
          }
      
          .site-content #secondary {
              width: 25% !important;
          }
      }
      
      @media only screen and (max-device-width : 768) {
          .site-content #primary {
              width: 100% !important;
          }
      
          .site-content #secondary {
              width: 100% !important;
          }
      }
  • Predrag Dubajic

    Hi Mwale,

    I made small mistake in CSS code, I done some modifications in it on your site directly so it's working now.
    Can you please check it out now?

    This is the current code used:

    .site-content #primary {
        width: 85%;
    }
    
    .site-content #secondary {
        width: 15%;
    }
    
    @media only screen and (min-width: 769px) and (max-width: 1190px) {
        .site-content #primary {
            width: 75% !important;
        }
    
        .site-content #secondary {
            width: 25% !important;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .site-content #primary {
            width: 100% !important;
        }
    
        .site-content #secondary {
            width: 100% !important;
        }
    }

    Best regards,
    Predrag