My CSS Code Customizations are not being applied no matter where I put them

  • Resolved johanlossius

    (@johanlossius)


    7 years, 7 months ago

    Hello fellow WordPresser!

    I have recently become very enthusiastic about this great tool WordPress, and even though I am a newbeginner (I have only been using it for about 2 weeks) I am far on my way to finish my new web page for my company.

    I have learnt a lot from these couple of weeks and I have set up my web page from scratch with the Twenty Seventeen Theme. I have implemented several plugins and also a child theme to be able to modify my page and still have the opportunity to update my theme.

    Right now I have, with my very superficial understanding of HTML, CSS and WordPress, run into a problem.

    The problem is this:
    None of my CSS code actually get applied to my web page.

    Here you can see the web page:
    https://www.norway-consulting.no

    I have tried the following:
    – Adding CSS code to my child theme style.css-file.
    – Adding CSS code to my parent theme style.css-file
    – Adding CSS code to my Theme customizer (both in “Additional CSS” section, but also in the “Advanced CSS Edtior section (that I got from a plugin that I installed). I have done this both for the parent theme and for the child theme, but none made a difference.
    – I have tried looking at my page with both Google Chrome and Internet Explorer (no difference, and none of them register any of my changes to the CSS)

    One of the things that I would like to modify on my page is the following:
    To make the headers of the front page sections come closer to the text. Like this:

    Now it says:
    Norway Consulting
    (huge space)

    A whole world of Norwegian senior IT consultants!

    I would liked it to say:
    Norway Consulting
    A whole world of Norwegian senior IT consultants!

    Here is a code snippet for CSS that I have tried to use:
    .site-content .entry-content h2 {
    margin-top: 40px;
    }

    I took this code from the following link (from the last comment in the thread):
    https://en.forums.wordpress.com/topic/themes-and-how-do-i-reduce-space-between-header-and-text

    But still, this code snippet, nor any other CSS Code Snippet, has any effect on my page.

    First of all, I dont know the proper code to create this change, but it will not be a problem for me to figure out this code, once I have sorted out how to actually make my CSS customizations work/get applied.

    Other random info:
    – I have successfully made modifications to my Editor in for example footer.php and these changes were successfully implemented on my page (also while using the child theme editor).

    To sum it all up:
    I’m a newbeginner in WordPress, and I possess very limited coding experience, but I have tried making many modifications to my CSS so Im sure that the problem is not just that I have written incorrect code, it must be something with my setup that is wrong, and I have no idea what. It seems my CSS is not being loaded or applied to my page for some reason.

    It would be awesome if someone could help me sort this out, and I look forward to hearing from you!

    • This topic was modified 7 years, 7 months ago by johanlossius.
    • This topic was modified 7 years, 7 months ago by johanlossius.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter johanlossius

    (@johanlossius)

    Update: Im currently browsing through guides on the topic to see if I can figure it out.

    • This reply was modified 7 years, 7 months ago by johanlossius.

    You can not just copy css from other places and paste it into your document unless the selectors are the same.

    The CSS you are trying to use is targeting .site-content .entry-content h2

    Those divs do not exist in your page.

    If you right click on the element in question and select inspect element a window full of tools will open called Developer Tools. Here you will see the code and styles. Take a look at the screen shot:
    https://prntscr.com/f1vkb7

    You can see by the yellow that the margin in question is actually on the .header selector.

    You can remove the margin by targeting the correct element’s selector

    .entry-header {
    margin: 0 !important;
    }

    margin:0 tells the browser to display the element with the class “entry-header” to have zero margin for top, right, left and bottom. The !important tells the browser to make sure this rule overrides any other rule that is targeted to this selector.

    Hope this helps!

    Thread Starter johanlossius

    (@johanlossius)

    Okey. That was a great answer. If you look at my page again now, you can see that it worked.

    So I guess that’s a good thing, though, because then there’s nothing wrong with my setup, there’s just something wrong with my knowledge and skill in CSS, haha.

    But at least I know my setup works, and thats great.

    I have seriously never ever coded in CSS, and I dont even know all the basic terms. I understand that I would have to learn about these things in order to be able to modify my page correctly. Ill research where I can find guides on this, how to learn basic CSS etc.

    Thanks a lot for the help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘My CSS Code Customizations are not being applied no matter where I put them’ is closed to new replies.