Support » Fixing WordPress » Beaver builder custom CSS for footer html.

  • dandorro94

    (@dandorro94)


    Hello,
    CSS newbie –

    I found a template on codepen for a footer that i liked and amended html links ok – but i want to add the CSS style sheet as it just appears as plain HTML currently.

    I am using beaver builder and have tried setting a custom class selector and amending the CSS in the layout settings of the beaver page builder. however it does not display any where remotely as it looks on codepen and it also affects the rest of the page.

    Any help is appreciated, thanks. (below is the css i copied)

    * {
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
    }
    
    body {
      font: 11px "Open Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      margin: auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: column nowrap;
          -ms-flex-flow: column nowrap;
              flex-flow: column nowrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
    
    ul {
      list-style: none;
    }
    
    a {
      text-decoration: none;
    }
    
    .generic-anchor {
      color: #8DB9ED;
    }
    .generic-anchor:visited {
      color: #8DB9ED;
    }
    .generic-anchor:hover {
      color: #ccc;
    }
    
    .flex-rw {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
    }
    
    main {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      font: 10em "Oswald", sans-serif;
      color: #9b9b9b;
      line-height: 1;
    }
    
    footer {
      background: #373737;
      margin-top: auto;
      width: 100%;
    }
    
    .footer-list-top {
      width: 33.333%;
    }
    
    .footer-list-top > li {
      text-align: center;
      padding-bottom: 10px;
    }
    
    .footer-list-header {
      padding: 10px 0 5px 0;
      color: #fff;
      font: 2.3vw "Oswald", sans-serif;
    }
    
    .footer-list-anchor {
      font: 1.3em "Open Sans", sans-serif;
    }
    
    .footer-social-section {
      width: 100%;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
              justify-content: space-around;
      position: relative;
      margin-top: 5px;
    }
    
    .footer-social-section::after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 10px;
      border-top: 1px solid #ccc;
      width: calc(100% - 20px);
    }
    
    .footer-social-overlap {
      position: relative;
      z-index: 2;
      background: #373737;
      padding: 0 20px;
    }
    
    .footer-social-connect {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      font: 3.5em "Oswald", sans-serif;
      color: #fff;
    }
    
    .footer-social-small {
      font-size: 0.6em;
      padding: 0px 20px;
    }
    
    .footer-social-overlap > a {
      font-size: 3em;
    }
    
    .footer-social-overlap > a:not(:first-child) {
      margin-left: 0.38em;
    }
    
    .footer-bottom-section {
      width: 100%;
      padding: 10px;
      border-top: 1px solid #ccc;
      margin-top: 10px;
    }
    
    .footer-bottom-section > div:first-child {
      margin-right: auto;
    }
    
    .footer-bottom-wrapper {
      font-size: 1.5em;
      color: #fff;
    }
    
    .footer-address {
      display: inline;
      font-style: normal;
    }
    
    @media only screen and (max-width: 768px) {
      .footer-list-header {
        font-size: 2em;
      }
    
      .footer-list-anchor {
        font-size: 1.1em;
      }
    
      .footer-social-connect {
        font-size: 2.5em;
      }
    
      .footer-social-overlap > a {
        font-size: 2.24em;
      }
    
      .footer-bottom-wrapper {
        font-size: 1.3em;
      }
    }
    @media only screen and (max-width: 568px) {
      main {
        font-size: 5em;
      }
    
      .footer-list-top {
        width: 100%;
      }
    
      .footer-list-header {
        font-size: 3em;
      }
    
      .footer-list-anchor {
        font-size: 1.5em;
      }
    
      .footer-social-section {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
    
      .footer-social-section::after {
        top: 25%;
      }
    
      .footer-social-connect {
        margin-bottom: 10px;
        padding: 0 10px;
      }
    
      .footer-social-overlap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
    
      .footer-social-icons-wrapper {
        width: 100%;
        padding: 0;
      }
    
      .footer-social-overlap > a:not(:first-child) {
        margin-left: 20px;
      }
    
      .footer-bottom-section {
        padding: 0 5px 10px 5px;
      }
    
      .footer-bottom-wrapper {
        text-align: center;
        width: 100%;
        margin-top: 10px;
      }
    }
    @media only screen and (max-width: 480px) {
      .footer-social-overlap > a {
        margin: auto;
      }
    
      .footer-social-overlap > a:not(:first-child) {
        margin-left: 0;
      }
    
      .footer-bottom-rights {
        display: block;
      }
    }
    @media only screen and (max-width: 320px) {
      .footer-list-header {
        font-size: 2.2em;
      }
    
      .footer-list-anchor {
        font-size: 1.2em;
      }
    
      .footer-social-connect {
        font-size: 2.4em;
      }
    
      .footer-social-overlap > a {
        font-size: 2.24em;
      }
    
      .footer-bottom-wrapper {
        font-size: 1.3em;
      }
    }
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Beaver builder custom CSS for footer html.’ is closed to new replies.