Title: HTML, CSS Last modified: August 22, 2016 --- # HTML, CSS * [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/) * My question is about html code. Hope this isn’t too long winded and confusing. When I place a header/title after an image, such as

before my text for the headline, and

after…the distance between the image and the headline seems to be too much. When I’m in Visual Editor I can bump the text up closer to the image and it gives me less space after the image before headline. But when I go back to text I see the

is at the beginning of the image code. Like this: * ```

The Metamodern, Economy, Fleecing and Fleeing America by Lora Fraracci FLEECING AND FLEEING AMERICA

``` * Instead of like this: * ``` The Metamodern, Economy, Fleecing and Fleeing America by Lora Fraracci

FLEECING AND FLEEING AMERICA

``` * and moving this line up doesn’t change it. * Whenever the

is ahead of the text the headline always bumps down further from the image than what I want. As in this example: * [http://themetamodern.com/201410-economy-company-store/](http://themetamodern.com/201410-economy-company-store/) * This also affects the distance or margin at the top of the page. The

ahead of the image pulls the image further from the top of the page as well as in this example: * [http://themetamodern.com/012015-perspective-eat-the-rich-but-not-all-of-them/](http://themetamodern.com/012015-perspective-eat-the-rich-but-not-all-of-them/) * My question is: If it works, it’s okay? Or is this bad form and will it have implications down the road? I’m still new at this and don’t know where to go in the style sheet to make a permanent fix if anyone knows a better way. * Thank you. Eric Viewing 10 replies - 1 through 10 (of 10 total) * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694264) * Hi ejwickes. Be glad to try and help you out. How familiar are you with HTML and CSS? I can give you some basic info on how they work together, or just give you the css to move the heading. Let me know how much info you want. * Thread Starter [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694318) * Hey thanks! * So, I shouldn’t be doing what i’m doing with the headers? * It will be hard to find. The Style sheet for X came to me in one big paragraph unspaced. So it will take some slow foraging through, but I’ve been there with other style sheets before, so maybe give it a shot. Once i make the change the guy who’s server it’s on can make the change and update it for me. He has access to the FTP file. Or, I’ll send the code directly to him. * If you’re articulate enough, I may be able to locate the elements that need changing. I’m familiar enough, I think with spacing and padding nomenclature to make adjustments if needed. * Fortune favors the bold. * Thank you, * ejwickes * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694333) * Digging through minimzed css is not much fun. However, it’s fairly easy to find the html elements, and the css currently being applied, using a tool like Firebug for Firefox or Chrome Developer Tools. You can adjust the various styling and see the results in real time on the page you’ve viewing. Highly recommended if you’re planning to make any changes to your theme layout or presentation. Also, since you’re running a commercial theme, you should generally look for assistance on the theme support forum. Here’s a section from the [WordPress.org Forum Welcome](http://codex.wordpress.org/Forum_Welcome) page explaining why: * > **Commercial Products** > If you use a commercial theme or plugin and need support, > please go to their official support channel. In order to be good stewards of > the WordPress community, and encourage innovation and progress, we feel it’s > important to direct people to those official locations. Doing this will provide > the developer with the income they need to make WordPress awesome. > Forum volunteers are also not given access to commercial products, so they > would not know why your commercial theme or plugin is not working properly. > This is one other reason why volunteers forward you to the commercial product’s > vendors. The vendors are responsible for supporting their commercial product. * I didn’t steer you there initially because I thought your question was generic enough that I could probably provide some help. Still be glad to help if you have any other questions. Just let me know. * Thread Starter [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694344) * Thanks for your consideration. * If you wanted to give me the code element to change the distance between image and header that would be great. Unless it’s inappropriate. I can go to the link you recommended if that’s better. But I understand the ‘inspect elements’ in Google and Firebug in FF and use that method all the time. Usually do my editing in Google. But, I was wondering what the answer to my initial question was about the

placement before or after the image. That does shorten the space between them, but not sure if it’s a “sanctioned” method. Does the question make sense? * Thanks again! * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694352) * If you’re already familiar with Firebug and DT then maybe this won’t be very informative but here are my thoughts. In general terms, HTML is used for structure and CSS is used for presentation. [This short article](http://www.johnhaydon.com/whats-difference-between-css-html-php/) gives a pretty good summary. Normally, and I say “normally” since there are always exceptions, you wouldn’t wrap an HTML anchor tag with a heading tag. The anchor tag surrounds the image and creates a link from it, while the heading tag gives structure to the title. When creating the page content it’s good practice to place elements on the page in the general order in which they will be displayed. However, the HTML elements are not primarily used to position things on the page; that’s where CSS comes in. So, in general, you don’t need to try to move the heading tag around to get it closer to the image. * So, your question was regarding too much space between the image and the heading. Since the title h3 doesn’t have an id or class assigned to it you would target the h3 element directly. And, since there may be other h3 elements on the page that you don’t want to change, you target the element within the content. The CSS would look something like this: * ``` .content h3 { margin-top: 0; } ``` * If that’s not close enough you can also use a negative margin to further reduce the spacing: * ``` .content h3 { margin: -20px; } ``` * Hope that helps and let me know if you have any other questions. * Thread Starter [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694391) * That’s great! * The answer to my question makes sense. And I found the elements that affect the headers on the page in the developers (elements) window on Google: * For example this page: [http://themetamodern.com/metamodern-perspective/](http://themetamodern.com/metamodern-perspective/) *

EAT THE RICH, BUT NOT ALL OF THEM

* and then *

_“They_**_ bought Manhattan Island with trinkets and beads, and now Manhattan has bought you with theirs.”_**

* So I just need to find them in the CSS. * Thank you for the very articulate explanation. If you think my solution is correct, go ahead and close the topic. Thanks again and much appreciated! * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694393) * In the Elements window, over on the right side it shows the css that’s being applied to the element. It also provides a link to the actual css. Click the link and you’ll go to the Sources window with the css highlighted. However, I wouldn’t spend too much time looking for the elements in the theme css. You wouldn’t want to change them there anyway since the next time you update the theme it will overwrite that css file. If the theme doesn’t have a custom css option then you could install the [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/) plugin. Just add the css you want to change there and it will override whatever is in the theme. Glad I could help. Actually, since it’s your topic, whenever you’re satisfied with the solution, just mark the topic as resolved. Thanks. * Thread Starter [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694406) * That’s another question I had. I installed Child Theme plugin so I could update, but when I go to test the theme it looks nothing like what I have. When I was using 2014, it tested out perfectly. Now I’m on Renew stack and when I test the Child Theme it’s not even close to what I built. maybe I should change to Simple Custom CSS plugin? Don’t want to get off tangent if this is an issue for another topic. * I’d like to try your advice and get back to you if that’s okay… * Also, some of the CSS elements are controlled by “User Agent Stylesheet”? * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694407) * Plugin compatibility is a question for the theme support forum. As a side note, you don’t need a plugin to create a child theme. It’s pretty straight-forward. [This article](http://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/) is a good description. And [this ](http://codex.wordpress.org/Child_Themes)is the info from the WP Codex. Be glad to answer additional questions regarding your original issue. “User Agent Stylesheet” is the browser default that’s applied if your css doesn’t contain that particular style. * Thread Starter [ejwickes](https://wordpress.org/support/users/ejwickes/) * (@ejwickes) * [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694408) * bdbrown, Thank you very much for your articulate and considerate replies. * I think you’ve given me enough info to help me with the initial question and how to fix it. Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘HTML, CSS’ is closed to new replies. ## Tags * [code](https://wordpress.org/support/topic-tag/code/) * [headers](https://wordpress.org/support/topic-tag/headers/) * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/) * 10 replies * 2 participants * Last reply from: [ejwickes](https://wordpress.org/support/users/ejwickes/) * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/html-css-1/#post-5694408) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics