Support » Fixing WordPress » Code works but not in WP page

  • Resolved bananaman777

    (@bananaman777)


    Hi,

    This code works fine when run in the w3 editor. But for some reason it doesn’t work when I put it into a WP page. It just displays the text without the boxes.

    What am I missing? Is the style tag incorrect?

    
    <style>
    
    .wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    
    div[class^="box-"] {
      border: 4px solid black;
      height: 100px;
      margin-bottom: 20px;
    }
    
    .box-a {
      width: 70%;
      margin-left: auto;
      margin-right: auto !important;
    }
    
    .box-b {
      -webkit-box-flex: 0.7;
      -ms-flex: 0.7;
      flex: 0.7;
      margin-right: 20px;
    }
    
    .box-c {
      -webkit-box-flex: 0.3;
      -ms-flex: 0.3;
      flex: 0.3;
    }
    
    @media screen and (max-width: 767px) {
      .wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
      }
      .box-a {
        width: 100%;
      }
      .box-b {
        margin-right: 0;
      }
    }
    
    </style>
    
    <div class="box-a">
      Box A
    </div>
    <div class="wrapper">
      <div class="box-b">Box B</div>
      <div class="box-c">Box C</div>
    </div>
    <div class="box-d">Box D</div>
    
Viewing 7 replies - 1 through 7 (of 7 total)
  • Nothing wrong with the code. But without seeing this live, it’s almost impossible to say. Please post a link.

    If you can’t post a link (localhost, e.g.) try using your browser’s inspection tools. Right-click on the box and you will be able to see what css rules are being applied.

    But for some reason it doesn’t work when I put it into a WP page

    Ummm…are you adding this entire snippet to a WordPress page? Because while you can add HTML there, the CSS needs to go in a child theme or in WordPress’s custom css function.

    There’s a quirk of WordPress that catches a lot of people, and that is WordPress will insert paragraph tags (i.e., <p> and </p> when it sees a blank line. If you do a view source on your page, you’ll see the paragraph tags in the middle of your style sheet. So to fix it, just remove all of the blank lines in the style sheet part so it looks like this:

    
    <style>
    .wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    div[class^="box-"] {
      border: 4px solid black;
      height: 100px;
      margin-bottom: 20px;
    }
    .box-a {
      width: 70%;
      margin-left: auto;
      margin-right: auto !important;
    }
    .box-b {
      -webkit-box-flex: 0.7;
      -ms-flex: 0.7;
      flex: 0.7;
      margin-right: 20px;
    }
    .box-c {
      -webkit-box-flex: 0.3;
      -ms-flex: 0.3;
      flex: 0.3;
    }
    @media screen and (max-width: 767px) {
      .wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
      }
      .box-a {
        width: 100%;
      }
      .box-b {
        margin-right: 0;
      }
    }
    </style>
    

    The boxes should now appear, because the paragraph tags will no longer appear and make the style sheet invalid.

    Yes, you can add a stylesheet, or even Javascript to a particular page using the <script> … </script> tags. You just have to avoid having any blank lines so that WordPress doesn’t add the paragraph tags. I will sometimes add a stylesheet that I want to work for just a particular page.

    that is WordPress will insert paragraph tags (i.e., <p> and </p> when it sees a blank line

    That is true, but only in the visual editor. Again, this is not inline styles, and doesn’t belong in the post itself. The html can go in the post (use the text editor) and the css, as written needs to go in the “Custom CSS” feature or in a child theme stylesheet.

    Actually the addition of the paragraph tags happens in the Text editor. If you try it in the Text editor, you’ll see it happen there. If you use the Visual editor, then all of the special characters in the HTML get converted to their escape characters and none of the code works, you’ll just see the HTML displayed as it was entered.

    In general, yes you would put your CSS in either the child theme’s style.css file or in the custom CSS option, but for CSS that’s only going to be used for a specific page or post (like to customize the look of a table that only appears on that page), it’s quite alright to add the style sheet to that page.

    it’s quite alright to add the style sheet to that page.

    If you are using inline styles. The code OP posted is not inline styles. It belongs in the <header> Media queries and <style> tags do not go in the <body> of any webpage.

    HTML 5 allows the <style> element to be place in the body. You can read the specifications here. If you scroll down, there is a note which reads:

    A <style> element should preferably be used in the <head> of the document. The use of <style> in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

    So while putting CSS in the <head> section is preferred, as long as you are aware that you might inadvertently override an existing rule (which is one of the reasons why you might want to put a stylesheet in the body), it’s OK.

    Thanks for the help, guys.

    @crouchingbruin was correct in that line spaces needed to be removed.

    Yay!

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.