How do I increase the size of circle type gallery image in Twenty Fourteen?
-
My circle type gallery images are so small, I want to increase it to a size where it’ll fit the page better.
I increased the original margins in the Twenty Fourteen theme, but it seems to be staying within the margins that the theme originally mandated. I found a way to center it without CSS, but I’m willing to use CSS to increase my image sizes.
The blog I need help with is: (visible only to logged in users)
-
Hi Petra! Could you send me a link to a page that contains one of these Galleries? I’ve been looking around your site, but haven’t yet found one. Thanks very much!
-
Yes, thank you for the quick response:
Here’s the page link:
http://thinkwellinkwell.wordpress.com/2014/05/05/the-amazing-spider-man-2/#more-6667
-
Hello! Thanks for the link!
Try this solution:
Click Appearance → Customize. Then click CSS in the right-hand menu.
In the Content Width box (below content revisions box), enter: 978
Then, to make the circles larger, you can paste the following into your Custom Revisions Box:
div.tiled-gallery-item img {
width: 165px !important;
height: 165px !important;
}I used 165px arbitrarily. You can adjust as you like.
Let me know how that works out for you. Thanks so much!
-
Okay, I did try that, and it worked, but they won’t all stay on the same line and they ARE small enough to go.
Is there a code to make that happen? I tried several things including making the Content Width Box larger, no go.
It just keeps going on different lines. When I DO make it small enough for all three to go on the same line, they’re way smaller than they can be.
-
Hi there!
One more thing we can try:
- Go to Posts → All Posts. Click to Edit your “The Amazing Spider-Man 2” Post.
- At the top of the box where you can see all your text and images, click the Text tab (as opposed to Visual which is the default).
- In the box, you’ll see the following code:
<div class=”aligncenter” style=”width: 60%;”>Change 60% to 100%.
- Click the Visual Tab.
- Click once on the Gallery of three images inside your text editor. Then hit the Align Center button.
- Save your changes.
Now you can return to the CSS Revisions box to adjust the circle size as you like.
Let me know if that works any better for you. Thanks so much!
-
I feel like an idiot now, that totally worked. Thank you very much.
One more thing: How do I make my posts full sized with the side bar on? I know that’s not my initial post, sorry about that. But I’m great at HTML, totally suck at CSS.
CSS might as well be Martian to me.
And thank you so much for your help so far. You’ve been great. =]
-
Awesome about your HTML skills. You’ll have some fun with the Text tab in your Post/Page editor!
I am actually seeing your posts appear as full sized. Here’s my view:
https://cloudup.com/cCEcnQ8-uVmAre you seeing something different? If so, send me a screenshot, so I can better understand the issue. Upload the screenshot to your Media Library, like any other image, and I’ll be able to access it from there. Just let me know when there’s something I should look at.
The page at the following link has some helpful tips for taking screenshots:
Thanks again! Looking forward to hearing from you.
-
Haha, thank you. I do have mad HTML skills, lol.
The reason my posts are full-width is because I don’t have any widgets in my content bar, but as soon as I do so, my posts shrink accordingly. I want them to remain full-width even though I have widgets in the content bar.
If you look at it now, you’ll see what I mean. And here’s the screenshots too.
-
Hey Petra, Thanks for the screenshots :) I’m not entirely certain how your Posts can possibly be full-width if the content bar is used. The simple act of utilizing that bar will shrink the space that your post takes up on your page. That can’t be adjusted. You’ll have to stick with the main sidebar if you want your posts to remain the same width. Sorry I cannot help on this request! If there’s anything else you need, please let me know! Thanks much and continued good luck on your great site.
-
After looking at it again, I kind of figured that.
But thanks for checking it out.
There is one more thing I want to ask. If you look at my front page, you’ll notice that some of my posts show tags and others don’t. The first post has a line underneath, but the others done.
It just looks unorganized and random. Can I do anything about that? I know I’m nitpicking now, but it’s driving me crazy.
-
Hi Petra! I took a look at the three Posts stuck to the top of your main page, and the first three Posts published on your front page, and don’t see a Post without Tags. Could you give me a hand and send me links to a couple Posts that aren’t displaying your Tags? Many thanks!
-
I’m so sorry it’s taken so long to respond! I’ve been very busy.
Here are a few links to the posts not showing tags. You’ll see the randomness on my homepage when you look at the post showing and not showing tags:
http://thinkwellinkwell.wordpress.com/2014/04/26/rebecca-ferguson-freedom/
http://thinkwellinkwell.wordpress.com/2014/04/16/captain-america-the-winter-solider/ (This link is actually not showing all of them and they’re not aligned properly on the front page.)
-
Hey Petra, I see what you’re speaking of, now. Thanks for those links!
I think, because you’re using such big, beautiful images on your blog pages, we’ll need to adjust the margins above each entry. That should make space for your tags in the previous posts.
Let’s add a bit more code. Click on Appearance → Customize in your site’s Dashboard. Then, click CSS in your right-hand menu. In the CSS Revisions box, please paste the following underneath all existing text:
.full-width.home .site-content .hentry.has-post-thumbnail {
margin-top: -5px;
}Then Save your changes.
That will create the space you need for your tags to display. Let me know how that works out for you! Thanks again :)
-
That worked great. Now, if there is some code to prevent the excess space between the featured posts and the first regular post, that would be great.
God, I feel like I’m nitpicking now, I’m sorry! XP
But I love that my tags are showing properly now, but the extra space at the top is driving me nuts.
-
Petra, Try this out:
.full-width.home .site-content .hentry.has-post-thumbnail {
margin-bottom: 9%;}
Do you like those aesthetics better? You can play with the 9% to create more/less space around the footer tags as you like. Let me know if that works better for you. Cheers!
-
That’s oodles better. Thank you so much for all your help.
I think I’ve taken up enough of your time. This ended on a completely different note than it started and I thank you for your patience.
That’s all I need. You are released, lol.
:)
- The topic ‘How do I increase the size of circle type gallery image in Twenty Fourteen?’ is closed to new replies.
WordPress.com Forums 
