-
Posts
-
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
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.
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. :-)
Kathy, THANK YOU for taking the time to reply. I really appreciate it. Have a great week.
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.
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!
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.
BTW, I went with the stock 940px and not forcing the header FULL width.
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. ;-)
Actually, that issue may be caused by the resizing of the columns you did earlier. If you remove those, is the iPad header OK?
:) 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;
}
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.
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 {}
}
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.
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!
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.
OK I changed just your masthead dimension from 1290 to 940 and that fixed the masthead.
The topic ‘How can I change the fixed width?’ is closed to new replies.
Theme Support 