Tagged: 

Viewing 20 posts - 1 through 20 (of 29 total)
  • Author
    Posts
  • #8786

    Hi,

    How do I make the sidebar area less wide?
    I like the width on this support page, if that helps?

    http://www.beyouloveyou.com

    Thanks much, p

    #8792
    markspend1
    Member

    Hey Guys well i think that’s not much complicated task.You can do it by visit that url:

    ablereach.com/wordpress/wide-sidebar-and-header-for-wordpress-default-theme/

    #8793

    Hmmm, thanks. Searched but did not get that link.
    Appreciate it.

    #8805
    Sakin
    Keymaster

    @paulinepkehoe: Catch Everest Pro theme is responsive design. So, it is not recommended to change the layout. If you change the layout. You need to change all the way down to mobile devices.

    But if you just want to adjust only in the large screen, then add the following css in “Appearance => theme Options => Custom CSS” box.

    
    @media screen and (min-width: 1060px) { 
    #primary {
        width: 60%;
    }
    #secondary {
        float: right;
        width: 35%;
    }
    }
    
    #14124
    rbrt_bene
    Member

    Hy Sakin,

    I want also to reduce the size of the sidebar and tried the above mentioned CSS but nothing happens.

    Can you please advise?

    Thanx in advance
    Robert

    #14133
    Sakin
    Keymaster

    @rbrt_bene: Send me your site URL and then I will check in.

    #14136
    rbrt_bene
    Member
    #14144
    Sakin
    Keymaster

    @rbrt_bene: You can add the following CSS in “Appearance => theme Options => Custom CSS” box.. The following CSS will work for screen size above 960px. Below 960 is mobile devices. So, I advice not to change that. Change

    @media screen and (min-width: 960px) {	
    #primary { width: 70%; }
    #secondary { width: 25%; }
    }
    #14147
    rbrt_bene
    Member

    Dear Sakin

    thank you for your feedback. I implemented the CSS but nothing happens…

    Can you advise?

    Thank you

    #14149
    Sakin
    Keymaster

    @rbrt_bene: I see you have issue in your custom css box. Can you paste all your CSS from custom CSS to http://pastebin.com/ and send me the url.

    #14152
    rbrt_bene
    Member
    #14157
    Sakin
    Keymaster

    @rbrt_bene: There is missing closing } in your css. Please copy as below.

    #hgroup-wrap { padding-bottom: 1rem; }
    #site-logo { padding-top: 0; }
    #secondary ul li { border-bottom: 1px solid #e6e6e6; }
    .page .entry-title { display: none; }
    .page.page-blog .entry-title { display: block; }
    @media screen and (min-width: 960px) {	
    #primary { width: 70%; }
    #secondary { width: 25%; }
    }
    #14158
    rbrt_bene
    Member

    It’s working now :)) Thank you very much for the great support!

    Robert

    #15722
    Sarah
    Member

    Hi Sakin, I also find the sidebar too big. I have resized it according to your instructions above but with a much narrower gap between content and sidebar, see following:


    @media
    screen and (min-width: 960px) {
    #primary { width: 70%; }
    #secondary { width: 29.5%; }
    }

    Now I would like to make the gap between the widgets (above and below) narrow too, can you advise me on the custom CSS please?

    Sarah
    http://thejuiceplanet.com

    #15726
    Sarah
    Member

    Also, can I reduce the padding in the widgets, they are so huge and I really want to tighten everything up a bit.

    Cheers

    Sarah

    #15732
    Sakin
    Keymaster

    @Sarah: If you are talking about the the gap between the widgets then it’s margin button and you can adjust as per you need and add the following CSS in “Appearance => Theme Options => Custom CSS” box.

    .widget {
        margin-bottom: 30px;
    }

    But if you are talking about the padding then it will be as below:

    .widget {
        padding: 30px;
    }
    #15817
    Sarah
    Member

    Thanks Sakin, I used both codes and am happy with the result.

    #18821
    Sarah
    Member

    Hi Sakin,
    Since I changed from two to three columns the padding instructions you gave above no longer work. Can you help me with the custom CSS so that I can have a narrow gap between my three columns and the footer please?

    Here is the custom CSS I currently have which isn’t working:


    @media
    screen and (min-width: 960px) {
    #primary { width: 70%; }
    #secondary { width: 29.5%; }
    }

    .widget {
    margin-bottom: 5px;
    }

    .widget {
    padding: 10px;
    }
    .entry-title, .entry-title a { color: #cc6600; }

    ins.adsbygoogle { padding-bottom: 30px; }

    #18838
    Sakin
    Keymaster

    @Sarah: Can you tell me the spaces that you want. I am bit confused.

    #18841
    Sarah
    Member

    Hi Sakin,
    When I had two columns I had primary at 70% and secondary at 29.5%, so I am guessing that meant I had 0.5% between the two columns. Now I have three columns and so I would like to have a really narrow space between the three columns. If you could give me the code I can play with the numbers to get the layout that looks right to me.

    I also want to make the padding around the widgets narrower. You originally gave me the codes above which were:

    .widget {
    margin-bottom: 30px;
    }

    .widget {
    padding: 30px;
    }

    Do these codes still apply or are the codes different now that there are two sidebars?

    While I have you, is there any way to get rid of the big white space above the header image so that the header image starts immediately below the browser?

    As much as I love the design of this template, overall everything is just too spaced out and I’m trying to tighten it up.

    Hope that is easier to understand. Thanks 🙂
    http://thejuiceplanet.com

Viewing 20 posts - 1 through 20 (of 29 total)
  • The topic ‘Sidebar’ is closed to new replies.