sheia sheia - 5 months ago 7
CSS Question

How to change only one property and leave others in the same value?

Here is the footer:



.smartFooter {
width: 100%;
margin: auto;
background-color: #2C2C2C;
color: white;
}
.footerContainer {
width: 90%;
margin: auto;
display: table;
}
.footerLogo {
margin-top: 20%;
}
.footerAbout {
display: table-cell;
}
.footerProducts {
display: table-cell
}

<footer class="smartFooter">
<div class="footerContainer">

<div class="footerLogo">
<img src="img/smart_logo.png" alt="logo" width="200">
</div>

<div class="footerAbout">
<h3>About</h3>
<ul>
<li><a href="#"><i></i>Like us on Facebook</a>
</li>
<li><a href="#"><i></i>Follow us on Twitter</a>
</li>
<li><a href="#"><i></i>Add us on Google Plus</a>
</li>
<li><a href="#"><i></i>Follow us on Dribbble</a>
</li>
<li><a href="#"><i></i>Follow us on Pinterest</a>
</li>
</ul>
</div>

<div class="footerProducts">
<h3>Products</h3>
<ul>
<li><a href="#"><i></i>Like us on Facebook</a>
</li>
<li><a href="#"><i></i>Follow us on Twitter</a>
</li>
<li><a href="#"><i></i>Add us on Google Plus</a>
</li>
<li><a href="#"><i></i>Follow us on Dribbble</a>
</li>
<li><a href="#"><i></i>Follow us on Pinterest</a>
</li>
</ul>
</div>
</div>
</footer>





But when I try to change a property of class="footerLogo" every sell takes the same value. For example - if I try to write for class="footerLogo" value "margin-top" then all the footer content begins to change.

How can I change the value ONLY of a red lined classes?
enter image description here

Answer

Without something more solid, can't help you much there.

.smartFooter {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin: 0;
  background-color: #2C2C2C;
  color: white;
}

.footerLogo, .footerAbout, .footerProducts {
  display: inline-block;
  width: 30%;
}

.footerLogo {
  margin-top: 20px;
}
<footer class="smartFooter">
    <div class="footerLogo">
      <img src="http://lorempixel.com/100/100" alt="logo">
    </div>

    <div class="footerAbout">
      <h3>About</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div>

    <div class="footerProducts">
      <h3>Products</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div
</footer>

Note the image is only 100px high/wide. If the margin is too high then they'd all have a weird space at the top anyways.

It's also usually not what you meant by margin-top:20px The 20% is relation to the width, not the viewport height. It's best to use px values instead of %.

Comments