How can I change the fixed width?

Home Forums Automattic Bon Vivant How can I change the fixed width?

Tagged: ,

Viewing 20 posts - 1 through 20 (of 21 total)
  • Author
    Posts
  • #108260 Resolve

    – – –
    Member

    How can I please:

    1) Make the main column wider so it will show my images and video at 900px? (The center column would have to be slightly wider than 900px to accommodate the the nice template frame around the picture. I’m guessing total with of 950?

    2) Since I want to keep the existing side column, how can I expand the total width of the template to accommodate the 950px main column, the 225px side column and the spacing between them?

    3) If you have the time, it would be great to have the css language to adjust the width of the small column, too. I’m not sure if I want to go 225 or 250pm. I’ll have to experiment.

    Thank you in advance for the beautiful template! I realize that I must change the width of the entire template to accommodate the larger column widths.

    The blog I need help with is jimcutlerblog.com
    #139740

    – – –
    Member

    Forgot to mention I bought the CSS upgrade but don’t have the CSS code to do what I’m asking above. Thank you in advance.

    #139814

    Kathryn P.
    Happiness Engineer

    Hi there, the CSS elements you’ll need to tweak are these ones:

    #main – this is the whole page width

    #primary – this is for the main column

    #secondary – sidebar

    One of our Happiness Engineers recently wrote a handy post on how to locate your CSS selectors:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Roughly, here is some CSS that may work – you can fine-tune it as you like:

    #main {
    width: 1300px !important;
    }
    #primary {
    width: 900px !important;
    }
    #secondary {
    width: 250px !important;
    }

    Bear in mind that not all viewers will have screens that can display your site at this wide a width, so those folks may be forced to scroll horizontally, which isn’t the greatest user experience. :-)

    #139815

    – – –
    Member

    Kathy, THANK YOU for taking the time to reply. I really appreciate it. Have a great week.

    #139817

    Kathryn P.
    Happiness Engineer

    My pleasure. Happy tweaking. :-)

    #139864

    – – –
    Member

    Kathy, one more question please. Now that that the width of the site is 1300px I want to upload a jpg Header the same width. When I try, the Dashboard>Header>Upload section says the original header width is still 940px and wants to crop at that length. Can I change this somehow so I am permitted to upload a 1300px wide header to match the site width? Thanks in advance.

    #139884

    Kathryn P.
    Happiness Engineer

    Hi there, while it’s not possible to upload a larger header through the Appearance > Header area, there is a workaround you could try with CSS.

    First, make sure you delete any previously uploaded custom header from Appearance > Header.

    Then, upload a new image you’d like to use as your header through your media library, under Media > Add New.

    Then, add something like this to your CSS:

    .hgroup {
    background-image: url("http://jimcutler.files.wordpress.com/path-to-your-image.xxx");
    border: 3px solid #FFFFFF;
    height: 300px;
    margin: 10px -200px;
    width: 1300px;
    z-index: 0;
    }

    Be sure to adjust the file name to match yours, and change the height and width to match the dimensions of your image. You can also tweak the margin until it looks as you’d like. Let me know how it goes!

    #140098

    Kathryn P.
    Happiness Engineer

    Just checking in to find out if you’re all set with this?

    #140099

    – – –
    Member

    Kathy, yes. You so rock. Thank you for perfect instructions both times. The header shows up perfectly on computers. On an ipad browser the header moves from the middle to left aligned. Is there a “center” command I can put in the header CSS? I know it might be the fault of the Safari iPad version, but a center command would at least be a good idea.

    #140100

    – – –
    Member

    BTW, I went with the stock 940px and not forcing the header FULL width.

    #140109

    Kathryn P.
    Happiness Engineer

    Hi there! Thanks for letting me know about the header alignment on iPad. I’m going to let our theme developers know and I’ll keep you posted.

    p.s. my name is actually Kathryn. ;-)

    #140110

    Kathryn P.
    Happiness Engineer

    Actually, that issue may be caused by the resizing of the columns you did earlier. If you remove those, is the iPad header OK?

    #140111

    – – –
    Member

    :) Kathryn, thank you for being awesome.

    Im not using any CSS on the header. I’m just using the default dimensions for the template. However, I am using your CSS for the column widths:

    #main {

    width: 1300px !important;

    }

    #primary {

    width: 900px !important;

    }

    #secondary {

    width: 250px !important;

    }

    #140112

    Kathryn P.
    Happiness Engineer

    Right. If you remove those temporarily as a test, does the iPad header look better?

    #140114

    – – –
    Member

    When the custom CSS is removed (for column width and total site width), the header is exactly in the middle. But this might be so because the header is then the exact width of the entire site template.

    #140126

    Kathryn P.
    Happiness Engineer

    Could you please try adding this and let me know how it goes?

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #masthead{}
    .header-image {}
    }

    #140127

    – – –
    Member

    No change. I cleared cache to make sure I was seeing the new code. I can live with the way it is if this is a bother.

    #140238

    Kathryn P.
    Happiness Engineer

    Could you please try the following instead of the code I gave you earlier for #main, #primary and #secondary. So remove the current custom CSS and add this instead:

    @media only screen and (min-width: 1290px) {
    .page-template-nosidebar-page-php #primary,
    .error404 #primary,
    .single-attachment #primary {
    width: 1290px;
    }
    #masthead {
    width: 1290px;
    }
    #main {
    width: 1290px;
    }
    #primary {
    width: 950px;
    }
    #secondary {
    margin-top: 0;
    margin-bottom: 0;
    width: 250px;
    }
    #secondary:before,
    #secondary:after {
    display: none;
    }
    }

    Let me know how it goes!

    #140267

    – – –
    Member

    Hi, it makes the 940px header move to the left on a Mac computer screen (instead of centering it) , and moves the graphics of the piece of tape to the right. I left it there so you could see it.

    http://www.jimcutlerblog.com

    #140274

    – – –
    Member

    OK I changed just your masthead dimension from 1290 to 940 and that fixed the masthead.

Viewing 20 posts - 1 through 20 (of 21 total)

The topic ‘How can I change the fixed width?’ is closed to new replies.