• Hey everyone, I’m having some trouble with my site and could use some help. I’m messing around with the code in the style.css file but changes don’t seem to be occurring (like I think they would) on my site when I update the file.
    First of all, I’m trying to add more space between the title and description of my site. In the style.css, the code is

    .site-description {
      margin: 0;
      font-size: 14px;
      line-height: 1;
    }

    so I added a margin-top: 40; under the margin:0; to no avail. It stayed exactly how it looked before, reference: images. Along with the issue of my sites’ title and description being too close together, I also want to make the header image a lot smaller.

    This was the code I tried to alter:

    .header-img {
      width: 100%;
      display: block;
    }

    I made the width 75%, saved and updated and my site remained imperfect. Same link above for what the header part of my site looks like.

    I would think this would be the chunk of code in the stylesheet to edit, but im not getting any results

    /* =Header
    -------------------------------------------------------------- */
    #header,
    .header-meta {
      position: relative;
    }
    
    #site-meta {
      text-align: center;
      margin: 40px 0 60px;
    }
    @media (max-width: 768px) {
      #site-meta {
        margin-bottom: 0;
      }
    }
    
    #site-logo {
      margin: 30px 0 0 0;
    }
    
    .site-title {
      font-size: 60px;
      margin: 0;
    }
    .site-title a {
      text-decoration: none;
    }
    
    .site-description {
      margin: 0;
      font-size: 14px;
      line-height: 1;
    }
    
    .header-img {
      width: 100%;
      display: block;
    }
    
    #home-carousel .carousel-caption {
      bottom: auto;
      top: 10%;
    }
    @media (max-width: 480px) {
      #home-carousel .carousel-caption {
        display: none;
      }
    }
    #home-carousel h3,
    #home-carousel p {
      color: #282828;
      text-shadow: none;
    }
    #home-carousel h3 {
      padding: 10px 60px;
      border: 2px solid #282828;
      display: inline-block;
      font-size: 40px;
    }
    #home-carousel p {
      font-size: 20px;
    }
    #home-carousel .item {
      max-height: 600px;
      overflow: hidden;
    }
    #home-carousel img {
      width: 100%;
    }

    Here is a link to the full stylesheet: pastebin

Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Theme: Matheson] CSS margins and image size’ is closed to new replies.