Page Content location
-
Hi Kyle —
Quick question. There is a large space at the top of every page, below the header, before the text is rendered. I would like to move the text up higher on the page, closer to the bottom of the header. I commented out the content padding in style.css which moved it up a little but I would like to close that gap. How can I accomplish this?
Thanks,
Susan
-
On a page that has just a single line of text (to be expanded at another time) the text starts down about one inch below the header.
Forgive me if I asked this in a prior thread, but are you running the latest version of WordPress v4.2.2? Also, what browser are you using and its version?
If I had the ability to inspect the page, I could probably find the padding issue. Are you familiar with using the Chrome/Firefox element inspect feature? You can right-click and select inspect element, and you can view and make changes to the css in real-time to see the rendered result.
Yes….WordPress 4.2.2
Firefox 39.0No not aware of the element inspect feature.
I guess I’ll have to live with it for now until the page is ready to go live and you can get at it via its URL (unless there’s some way I can send you the files).
And….on the single posts the text starts in the correct location.
To summarize what I’ve done….
Style.css
content-area padding 0 2 em
site-content removed margin top 40 px
added padding top 3 em to @media screen etcPlus removed edit link from posts and pages
I would recommend trying out the element inspection tool. It’s really handy for anyone who wants to work with web layouts and it can be learned rather quickly (depending on how much css you know, but it’s largely a visual tool). I’m partial to chrome’s element inspector, but firefox’s works the same way. Just right-click on the area you want to inspect and select element inspection. It will open a box at the bottom of your browser with the page HTML segmented to the left and the css code to the right. You can hover over the HTML and it will highlight the section of the rendered page at the top (to show for instance the bounds of a particular element- margins, borders, padding, etc). You can select and unselect specific elements in the css and it will change the rendering of the page automatically. You can also modify the css (like add/change a padding) to see how it affects it.
I’m fairly obsessive about spacing on a page, so I’m going to be incorporating all these changes we discussed into the next version of Atomic, v1.6. Additionally, I’ve made other spacing tweaks and converted all px measurements to em in style.css. I’ll probably submit it for review this weekend and it usually takes 1 to 2 weeks for approval. Just fyi, in case you want to make a child theme before the update so your current layout doesn’t potentially get changed.
As for sending me files to test, you may be able to send me the theme directory and I’ll load it and see if I have the same spacing issue. You can zip the whole folder and email it to me. I don’t want to post my email publicly, but if you send me a message through the contact form on my website, I’ll reply with it.
I will pick it up again tomorrow (although it is rattling around in my brain!). There is something different between the way posts are rendered and how pages are rendered because the posts are fine.
I have a child theme as well as the parent so I’ll zip them both and send them to you as you suggest. The Template Tags file is in the child but not being used — those changes were made in the parent because it’s a tiny change and I haven’t spent the time to play with that yet. If you look at the Articles page and any of the articles (posts) you will see that they render correctly. The Home, Contact and About Me pages are the issue.
Thanks. enjoy your evening.
Susan,
I looked over your child theme and found two things I would change, in style.css and functions.php.the first line of your style.css:
*\ Theme Name: Atomic Child ...
This should be “/*”, not “*\”, but this should be caught by the compiler and not affect anything.
In your functions.php, there are a few changes you should make. You can remove child-style because it’s already loaded elsewhere, and you will want to change parent_style to two unique names, otherwise only one will actually load on the page.
function theme_enqueue_styles() { wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/atomic-editor-style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); }
change to
function theme_enqueue_styles() { wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent_editor_style', get_template_directory_uri() . '/atomic-editor-style.css' ); }
I went though and disabled every css style individually, and I found where the space is created. There may be some unforseen consequences of removing “float: right;”, but I believe this is what we’ve been looking for, and I didn’t see any major difference in page rendering. Give the following change a try and let me know how it looks.
.entry-content,.entry-summary,.page-content { float:right; width:99% }
change to
.entry-content,.entry-summary,.page-content { //float:right; margin-top: 1.5em; // Desired spacing between header and content width:99% }
That definitely fixed it, thanks so much!
I made the changes to the child that you suggested but for some reason the changes, when added to the child style.css, do not seem to work so I have made them all in the parent stylesheet.
One more question….in the email I sent you there was a screen shot of the category page that shows that now there is a lot of white space between excerpts. I’m going over the changes we’ve made over the past few days to see if one of them is the cause.
Found it using the element inspector. Now I just need to move the style.css modifications to the child stylesheet and I’ll be all done.
You’ve been a fantastic help. Thanks so much!
Susan,
Great, and you’re welcome. I’m glad I could be of assistance. If you’re inclined, please consider adding a rating/review for the theme.
Kyle
- The topic ‘Page Content location’ is closed to new replies.