Inspect Element & CSS (Beginner's question I'm afraid)

  • Hi all

    My site is https://elt-argentina.com

    I’m new to the whole WordPress/Web design scene and slowly getting to grips with things. Although I grasp the concept of CSS I’m struggling with putting it into practice.

    For instance on my sidebar I have a ‘Follow Us’ text widget with Twitter/Facebook/RSS icons. So far I’ve managed to align things horizontally but now want to move the text up slightly and the icons down so it is centred vertically too. So far I have added the following Custom CSS which has solved half the problem:

    #text-6 {
    text-align: center;
    font-weight: bold;
    }

    This is the limit of my (newly found) capabilities. I’m using Chrome to try to identify what needs changing but as it involves items inside the widget I don’t know how to word the code(although I assume I will need to change the margins).

    I’d be really grateful if someone could point me in the direction of where to go from here.

    Thanks.

    Matt

    P.S. I hate to ask questions when there is such a wealth of information out there on the forums/Google/Youtube etc but despite all the research I’ve done I seem to have hit a brick all.

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

  • I think you messed up the link to your site…

    Generally, you move elements up or down by messing with the margins or padding. The exception would be of course if you were dealing with an explicitly positioned element (e.g. an absolutely positioned element).

    HTH

    PAE

    Thread Starter eltargentina

    (@eltargentina)

    Hi Peredur and thanks for taking the time to respond.

    Well I did say i’m a beginner ??

    Here’s a test page I have created…

    https://elt-argentina.com/inspect/

    which contains a screenshot of what I have identified and need to move. But how do I start the CSS code as it is identified only as ‘Img’?

    Thanks again.
    Matt

    Thanks.

    Not sure I understand what it is that you want to move up, and with respect to what.

    Probably me being a bit thick.

    Un saludo

    PAE

    Thread Starter eltargentina

    (@eltargentina)

    Hola Peredur

    Or my poor explanation. I’ve added a new screenshot to the page now which I hope makes things clearer. To be honest it’s only a minor change but i’d like to get it right and have a better understanding of how to use custom CSS.

    Gracias.

    I’m sorry but it is beyond the scope of these forums to teach CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead. I’d also recommend using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

    Other useful resources:
    CSS Tutorials
    Learning CSS

    Thread Starter eltargentina

    (@eltargentina)

    Well it seems I’ve figured it out with…

    #text-6, img {
    text-align: center;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 5px;
    padding-top: 4px;
    font-weight: bold;
    }

    Not sure if it’s entirely correct but it seems to have done the trick.

    Thanks both of you. I still have a lot to learn.

    Thread Starter eltargentina

    (@eltargentina)

    On second thoughts that’s completely wrong isn’t it. I shall try a dedicated CSS forum.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Inspect Element & CSS (Beginner's question I'm afraid)’ is closed to new replies.