Twenty Fourteen Homepage Content Width

richardachubb · Member · Apr 22, 2014 at 9:50 pm
Copy link

Add topic to favorites
Hi,

After much stumbling around on google and the support forums, I have almost got the twenty fourteen theme as I would like.

Most of my posts will be photography related, so i like the big slider, and I like the featured image posts,

The only thing I would like to change at the moment is the width of the content that accompanies the featured image. I would like to have the summary of the posts, spread almost the same width as the featured image.

Is this possible?

I have the custom CSS upgrade.

Thanks in advance.
Richard

The blog I need help with is: (visible only to logged in users)
joelymil · Member · Apr 22, 2014 at 11:22 pm
Copy link
Are you wanting this change only on the home page, or in the actual posts as well?

This code will apply the change to your homepage as well as to the post themselves:
```
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
     max-width: 100%;
}
```
This also has the effect of widening the images in the content of the posts to the same width as the text. ‘Not sure if this it what you’re going for or not.
richardachubb · Member · Apr 23, 2014 at 7:04 am
Copy link
joelymill, that is perfect, thank you, although i made the width 81% to align the test etc in the middle of the image.

One last tweak at the moment, if you can help, I have managed to reduce slightly the width of the right sidebar. I would now like to increase the size of the content, on both the homepage, and blog / post pages to fill the gap that has been created by reducing the sidebar.

I would still like to keep the alignment of the text centred at the bottom of the image (hope this makes sense :S )

Thanks again
Richard
richardachubb · Member · Apr 23, 2014 at 7:28 am
Copy link
EDIT,

Sorry, what i would LIKE to do is steal some of the sidebar width for the content width.

Thanks
Richard
joelymil · Member · Apr 23, 2014 at 6:13 pm
Copy link
This will have the effect I think you’re going for:
```
@media screen and (min-width: 1008px) {
   .site-content {
      margin-right: 25.04761904%;
   }

  .content-sidebar {
     width: 25.04761904%;
   }

}
```
Note that the two percentages correspond. They don’t need to be exactly the same but you’ll probably want them to be in this case, for spaces purposes.

The percentages are currently at 29.04761904% and 25-ish was the lowest I could go without starting to cut off some of your WordPress follow link in the sidebar.

Just as a note, this will only change the layout when the screen is at least 1008px wide. To adjust what it looks like on smaller screens (phones etc.) you’d have to play with the other “@media screen and (min-width: some-px-value)” media queries currently implemented on your theme.

I really like the look of your site, btw. Good work!
richardachubb · Member · Apr 24, 2014 at 3:48 pm
Copy link
Thanks again, joelymill, I am getting there!!

I think the final thing I need at the moment is to auto slide the homepage slider.

Soz to bug you, if you can help with this, then awesome, if not, I will repost a new thread.

Thanks again, you have been a huge help.

Regards
Rich
joelymil · Member · Apr 25, 2014 at 12:39 am
Copy link
No problem! Happy to help.

From what I can tell, auto-advancing a slider is going to be tricky (if not impossible) using only CSS. This effect is usually achieved with JavaScript/jQuery.

I think, theoretically, there is a way, but I don’t know the answer right off hand. I’d suggest creating a new thread for this specifically to see if anyone else has done it before.

I’m not giving up, though! I’ll keep a look out for the thread, as I’m curious to see if I/anyone else can figure out how to do it :)
richardachubb · Member · Apr 29, 2014 at 3:37 pm
Copy link
Thanks again, I will post at some point when not so busy. thanks for all your help

No items found.