CSS Customization – Container Width

  • Robert
    Robert
    Newbie 40 points
    August 29, 2013 at 4:46 pm

    I am looking to increase the container width it looks like to span12 1170px, but I am unsure how to make the changes.

    My guess is it is one of the “/wp-content/themes/CP42/framework/css” files. Can someone help me with the correct file and line to change?

    Thanks in advance!

  • Mark Fail
    Mark Fail
    Super Guru 13,013 points
    August 29, 2013 at 6:10 pm

    have u tried using the browser console/css viewer to check for the css code instead, might save you alot of time.

  • Robert
    Robert
    Newbie 40 points
    August 29, 2013 at 9:13 pm

    I have used Firebug, but am no expert on CSS code, so I am unsure what exactly to change.

    I just saw the aussie couponic site & I liked how the container width was wider & how they adjusted the main menu bar. I was trying to look through their css code & compare to my setup using firebug, but I can’t find the changes they made for the customizations.

    I will continue to do some research on CSS, which is likely to help. Although, I may just make a job listing on the jobs board to help get this done quicker by someone that knows what they are doing.

  • Aaron
    Aaron
    Super Guru 920 points
    August 29, 2013 at 11:50 pm

    Hi Robert, on Couponic I used this to adjust the container width, just add/update this in your child themes css:

    #core_header, .navbar, #core_columns_wrapper, #footer, #footer_bottom_inner, #core_main_breadcrumbs_wrapper, #core_header_navigation .navbar, #HomeMainBanner #myCarousel, #core_new_header {
    margin: auto;
    max-width: 1100px;
    min-width: 280px;
    }

    Setting a minimum width is optional though seems to help users with dodgy phones 🙂

  • Robert
    Robert
    Newbie 40 points
    August 30, 2013 at 2:35 pm

    Thanks Aaron.

    It mostly works, but my homepage width is still the default width.

    The new width works on coupon listings and search results pages just not the homepage.

  • Robert
    Robert
    Newbie 40 points
    August 30, 2013 at 2:47 pm

    Update it actually works on the homepage too. I deleted my browser cache and found it to work. Thanks again Aaron!

    Btw, for those reading this that might be new (like myself) at css coding and not sure where to put this code, I placed it in the “custom meta data” header styles section of the “color changes” tab in the admin panel.

  • Mark Fail
    Mark Fail
    Super Guru 13,013 points
    August 30, 2013 at 4:20 pm

    thanks for sharing

Viewing 7 posts - 1 through 7 (of 7 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes