Adjusting spacing between screen elements

  • Resolved kb58

    (@kb58)


    8 years, 10 months ago

    Hi everyone, I’m a first-time WordPress user but have run several websites before, back when flailing about with HTML directly was the thing. A lot has changed!

    I’m transferring the old site’s content into WordPress and that’s going fairly well. I used the plugin Instant WordPress to develop the site locally and uploaded it so I can show you want I’m working on. I’ve been using these forums (a lot!) to figure things out for myself, but recently came up against a few issues I can’t resolve. I’m running IE 11 and Windows 7.

    The test site is https://www.kiminipublications.com/wp. The first question is: How can I decrease the space between “Build this car in your own garage” and the main picture above it?

    I have several other questions and issues but will create separate posts.

    Thank you very much!

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hi there, Try this CSS code – 

    .home .panel-grid-cell {margin-top:-60px;}
    Thread Starter kb58

    (@kb58)

    Well that was odd. I cut-and-pasted the CCS and it made all the text in all the boxes full width (strangely, the answer to another question I asked), but it didn’t affect the space above the text. I removed it and put it back in, and the text went back to original, but the spacing hasn’t changed.

    I assume (using Visual Editor) it should go in the widget attributes field so that it affects only this text field. Is that correct?

    I guess the theme is based on responsive CSS frameworks, that’s why Some other element got the css too. Try this CSS snippet and let me know if it works(Perfectly!) on not –

    .home #post-120 {margin-top:-5%;}
    Thread Starter kb58

    (@kb58)

    Still no effect. For what it’s worth, it appears that the margin between the picture and top text box is exactly twice the margin between the top and bottom text boxes.

    You could just add !important to the code he gave you.

    Like this:

    .home #post-120 {margin-top:-5% !important;}

    Try putting !important tag just as @wanderer suggested.

    Thread Starter kb58

    (@kb58)

    I’ll give it a try tonight. I asked before but it got buried: Where does the custom CSS go? I came up with the following:

    1. In the widget attributes CSS field (so that it affects only this text field) when using Visual Editor?
    2. In the Appearance -> Reading -> Custom CSS field?

    I “think” it’s #1, but is it?

    Thanks again!

    Hey @kb58,

    I’m not familiar with Appearance -> Reading -> Custom CSS, but have seen Appearance -> Custom CSS.

    I’d recommend #2 instead of widget in Visual Editor.

    You can try #2. If it doesn’t work, you can just install and activate a Custom CSS plugin such as Simple Custom CSS. Then you’d insert the code in Appearance > Custom CSS and be done with it.

    Thread Starter kb58

    (@kb58)

    I’m stuck at work so can’t confirm, but you’re probably right – I’m going from memory. I’ll try it out tonight and let you guys know.

    This site’s awesome!

    Thread Starter kb58

    (@kb58)

    Worked great! Thank you very much everyone!

    You’re welcome. We’re glad we could help you!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Adjusting spacing between screen elements’ is closed to new replies.