WordPress.org

Ready to get started?Download WordPress

Forums

Need code for exact sidebar width Twenty Twelve (16 posts)

  1. roggershaw
    Member
    Posted 1 year ago #

    I am in dire need of these widths in twenty twelve them.
    Here are my requirements
    Content Width 620px
    Sidebar width 340px

    I am new to css and don't know editing however, i made a child theme of twenty twelve and now i want code to adjust the width according to my needs.

    Any help will be really appreciated.
    Thanks

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'll need to post a link to your site for help with layout issues.

  3. roggershaw
    Member
    Posted 1 year ago #

    Here is my site link

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Twentytwelve was designed with "responsive" CSS -- so the layout resizes according to device/browser width. So the widths are percentages of total window width. If you change those to fixed widths, you will lose all the responsiveness of the theme. Further, changing layout CSS is likely to cause problems in other places in the site. So you might be better off with another theme that has fixed widths.

    That said, this is the CSS that sets the widths on that template:
    main section:

    .site-content {
        width: 65.1042%;
    }

    sidebar:

    .widget-area {
        width: 26.0417%;
    }
  5. roggershaw
    Member
    Posted 1 year ago #

    I don't want to change those with fixed widths. I want only a little wider sidebar for my images to put in there. If it is adjustable then no problem i am happy with it. Please tell me the best way to increase sidebar width without hurting the original functionality of theme. Thanks

  6. roggershaw
    Member
    Posted 1 year ago #

    Also change the status of topic to not resolved. the resolved check box pressed suddenly by mistake. :-)

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, then try adding this to your CSS:

    .site-content {
        width: 75%;
    }
    
    .widget-area {
        width: 22%;
    }

    See if that does what you want -- also check on other pages to see if they've been affected badly.

  8. roggershaw
    Member
    Posted 1 year ago #

    Its not working for me. And i want to increase sidebar width not the content are.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, then change the percentages to what you want -- reduce content and increase widget area.

  10. roggershaw
    Member
    Posted 1 year ago #

    yes i want 340px for widget area. but will this solve my problem?

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try adding this to your child theme CSS:

    #primary {
     width: 55%;
    }
    
    #secondary {
       min-width: 340px;
       width: 45%
    }
  12. roggershaw
    Member
    Posted 1 year ago #

    Thanks Wpyogi... but it can be not the good solution as i want to make it responsive. So tell me that this will not hurt my theme on any size display. Secondly, i read it somewhere that i have to change widths on several places to keep the theme uptodate like on mediascreen and blah blah. please guide

  13. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    a little wider sidebar for my images to put in there

    it might help to make the right suggestions, if you add some images to the sidebar, to illustrate the image bahaviour.

    you are right, the styles belong into a @media query:

    @media screen and (min-width: 600px) {
    .site-content {
    		width: 62.1042%;
    	}
    	.widget-area {
    		width: 33.0417%;
            }
    }
  14. dianabyron
    Member
    Posted 1 year ago #

    I have similar problem in Twenty Twelve (theme I love), but wanting sidebar to be not as wide, and I don't want to mess with flexible widths. When I can work out how to do it, I want to put a second sidebar on the other side of the page.
    See the giant white space between my sidebar and main content - that's what I want to shrink!
    http://diannetrussell.com/

  15. erika.prado
    Member
    Posted 7 months ago #

    Hello everybody, I'm new to wp and am working with the theme cinemabazar, need to change the sidebar width of 272px to 310px and I can not using google chrome was found exactly where this field, and was joined there and then wide.css I made the change but does not activate the change, I believe I need now resize the space of my content, but on entering style.css has many fields related to content, could someone help me! please

    PS within the style.css file has no field for the width of the sidebar where you can change.

    the site is: http://www.vivavidaviaje.com

    Thank you!

  16. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    We don't support themes not released under the GPL license, nor do we really support any theme not distributed on WordPress.org.

    If you cannot retrieve support from your theme's vendors then perhaps it's worth switching to a theme we support: http://wordpress.org/themes/ .

Topic Closed

This topic has been closed to new replies.

About this Topic