San Kloud- Shift all content inside text box
-
My photos, text, headlines, quote boxes, and everything else inside my main text box is slightly off center. Changing the relative position of .text-wrapper and body shifts a few additional things I don’t want shifted (like the header).
What do I need to hit with position: relative to shift only the elements inside my text box?
Thank you in advance.
The blog I need help with is: (visible only to logged in users)
-
Hi there, add the following and see what you think. There had been a 10px difference between the left and right padding. It seems to need to be 5px difference (75 and 80px).
.post-top, .post-middle { padding: 10px 80px 0 75px; } -
Well, I’ll start by saying that I screwed up. (Sorry!) In short, I forgot to mention that this is for a redesign. I have no clue why the redesign’s alignment would look so different; I only switched out identically-sized PNG’s, tweaked a min-height, and changed a couple of color settings. A screenshot for the redesign can be found here: http://bumblepuppies.files.wordpress.com/2014/04/screenshot.jpg
However, I did try your code on the redesign. I played with the numbers a little and managed to get the alignment correct. But that code left a gap between my middle and bottom text box pieces that I was not able to fix.
Long story short: that code would have worked if I had given you all of the relevant information.
-
Is that on testtable that you are trying things out?
Without looking at it in the wild – so to speak – I couldn’t say for sure what the issue is. It might be the background image alignment, or possibly the elements in the image itself are shifted slightly right.
If you want to put the code into your test site, I can take a look and see what is causing the problem. Or post what you added here and I can work on for you.
-
Unfortunately, it’s not on testable. What you see on testable is the theme’s default text box design. Since I can’t use Custom Design on my test blogs, I’ll enter the code I changed to get from my current design to the redesign (and I’m leaving out the comment boxes and sidebar stuff because I assume that’s not relevant.)
And I think I see the problem but I don’t know how to fix it. You’ll find that padding code was written into some of these entries at one point. Would the new code be interfering with this?
.content .page, .archive .post, .search .post { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide1tall-e1398093466606.png') 10px top no-repeat; padding-top: 148px; } .post-top, .format-aside .post-top, .format-standard .post-top, .sticky .post-top { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide1tall-e1398093466606.png') 46px bottom no-repeat; min-height: 163px; } .post-middle { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide2mm-e1398091600699.png') 35px top repeat-y; position: relative; left: 11px; } .page-content { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide2mm-e1398091600699.png') 0 top repeat-y; padding: 0 50px 20px; position: relative; left: 10px; } .post-bottom { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide3bb-e1398091576442.png') 45px -3px no-repeat; min-height: 86px; } .page-bottom { background: url('http://bumblepuppies.files.wordpress.com/2014/04/slide3bb-e1398091576442.png') 10px -3px no-repeat; min-height: 86px; }And this is the code that fixes the alignment on individual posts’ pages and on the homepage:
.post-top, .post-middle { padding: 10px 105px 0 65px; }Archives and pages remain unaligned after this. Also, I noticed that the text box gap only appears on the pages for individual posts when I do this. The text boxes look fine on the homepage.
And the gap is vertical, as though the middle section just isn’t scrolling down far enough. I tried replacing the bottom background image with something taller (and modifying the min-height) but that didn’t improve things.
Again, thanks for the help.
-
Ok, I’m working in the customizer on your site, but not saving.
For static pages such as about, I broke the left/right padding our separately so I could adjust them independently. This seems to look pretty good on the about page. I’ve included just the padding change. Make your padding look like what I have to see what you think.
.page-content { padding: 0 80px 20px 50px; }The above code also seems to fix the categories pages, but not on images with captions. Add the following to correct image alignment with captions. The following gets the captions and image more centered.
.wp-caption { max-width: 500px !important; }See if the above gets things any closer for you.
I would suggest perhaps setting left and right paddings separately so that you can use that to fine tune the placement of things.
-
That is excellent. Thanks.
Its now at the point where there’s just one detail remaining. Here’s a screen shot from the page of an individual blog post:
That gap appears on individual posts only… not on posts in the archives, on the home page, on pages, or anywhere else. I inspected element to check the margin and padding for .post-bottom and .post-middle but I saw nothing that would cause this. I also double-checked the bottom PNG and I hadn’t left any transparent space on the top. Changing the min-height didn’t work and trying a taller PNG image for .post-bottom didn’t either. I have no clue what else to try.
-
I think I got it. Thanks for all the help and I’ll unclick “resolved” if I have any other problems.
-
Hi, I looked at your site and see you have the code now in there. I’m not seeing the gap at the bottom on single post pages. Have you gotten this taken care of?
-
Oops, I should have refreshed the page. :)
Glad you got it sorted and let us know if you have any further questions or problems.
- The topic ‘San Kloud- Shift all content inside text box’ is closed to new replies.
WordPress.com Forums 
