Почему все в моей боковой панели смещено, как я могу это исправить? - PullRequest
Новая
       68

Почему все в моей боковой панели смещено, как я могу это исправить?

0 голосов
/ 20 апреля 2020

Так что я пытался сделать свою боковую панель меньше, чтобы я мог сделать статью больше, но когда я это сделал, казалось, что все в боковой панели сместилось, но я действительно не понимаю, как. Я относительно новичок в html и css, поэтому я не такой опытный и был бы очень рад, если бы кто-то мог помочь. Вот мой код: 

body {
    margin: 0;
    background: #fff;
    font-family: wayward;
    font-weight: 100;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    padding-top:110px;
    
  max-width: 1600px; margin: auto

}h1 {
    margin: 10px;
}

img {
    max-width: 100%;
}


.review {
    line-height: 29.25px;
    padding-top: 5px;
    text-align: center;
    border-width: 1px;
    margin: 10px;
    padding: 5px;
    word-wrap: break-word;
    flex: 1;


}
.text-wrapper{
  max-width:800px;
  margin:auto;
}
aside .articles{
  list-style-type: none;
  padding: 0px;
  margin-top:0px;
  border-top:3px solid;

  
}

.articles > li.card{
  border-left: 1px solid #55d6aa;
  border-right: 1px solid #55d6aa;
  border-bottom: 1px solid #55d6aa;
}


.articles h3, .articles p {
  margin-top: 0px;
  
}

.articles .content_col{
  margin-left: 10px;
}
.image_col{
  width:180px;
  height:180px;
}
.card{
  height:150px;
}
.card-link{
  /* remove deafult link color + underline */
  color: #55d6aa;
  text-decoration: none;
  /* change a display from deafult inline to block (all card area is clickbale) */
  display: block;
  /* transition */
  transition: background-color 0.5s ease;
  /* flex setting */
  display: flex;
  align-items: center;
  /* extra padding around the card */
  padding: 10px;
}

.card-link:hover{
  background: #f3f3f3;
}

button {
  color: #55d6aa;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #55d6aa;
  position: relative;
  margin: 0px;
  display: inline-block;
  padding: 0.5em 1em;
  transition: all 0.3s ease-in-out;
  text-align: center;
 
  font-weight: bold;
}
button:before,
button:after {
  content: "";
  display: block;
  position: absolute;
  border-color: #55d6aa;
  box-sizing: border-box;
  border-style: solid;
  width: 1em;
  height: 1em;
  transition: all 0.3s ease-in-out;
}
button:before {
  top: -6px;
  left: -6px;
  border-width: 2px 0 0 2px;
  z-index: 5;
}
button:after {
  bottom: -6px;
  right: -6px;
  border-width: 0 2px 2px 0;
}


button {
  color: #55d6aa;
  border-color: #55d6aa;
}
button:before,
button:after {
  border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-color: #55d6aa;
  transform: rotateY(180deg);
}
button:hover {
  color: #55d6aa;
  background-color: transparent;
  border-color: #55d6aa;
}
<aside>
  <h2 style="padding:13px;">Most Popular Posts</h2>
  
  <ul class="articles">
    <!-- card 1 -->
    <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/300" />
        </div>
        <div class="content_col">
          <h3>Features</h3>
          <p>Responsive Buttons!</p>
          <button>Hover me</button>
        </div>
      </a>
    </li>
    <!-- card 2 -->
    <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/301" />
        </div>
        <div class="content_col">
          <h3>Auto NavBar</h3>
          <p>Try scrolling up and down!</p>
          <button>Read more</button>
        </div>
      </a>
    </li>
    <!-- card 3 -->
       <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/302" />
        </div>
        <div class="content_col">
          <h3>Article heading</h3>
          <p>Short description</p>
          <button>Read more</button>
        </div>
      </a>
    </li>
     <!-- card 4 -->
       <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/303" />
        </div>
        <div class="content_col">
          <h3>Article heading</h3>
          <p>Short description</p>
          <button>Read more</button>
        </div>
      </a>
    </li> <!-- card 5 -->
       <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/304" />
        </div>
        <div class="content_col">
          <h3>Article heading</h3>
          <p>Short description</p>
          <button>Read more</button>
        </div>
      </a>
    </li> <!-- card 6 -->
       <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/305" />
        </div>
        <div class="content_col">
          <h3>Article heading</h3>
          <p>Short description</p>
          <button>Read more</button>
        </div>
      </a>
    </li>
   <!-- card 7 -->
       <li class="card">
      <a href="#" class="card-link">
        <div class="image_col">
          <img src="https://picsum.photos/400/306" />
        </div>
        <div class="content_col">
          <h3>Article heading</h3>
          <p>Short description</p>
          <button>Read more</button>
        </div>
      </a>
    </li>
  </ul>
</aside>
<div class="review">
    <h1>Titanic Movie Review 1996</h1>
    <h3>-By Some random guy</h3>
    <div class = "thumbnail">
        <img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose  from behind">
    </div>
    <div class = "text-wrapper">
    <p>
        paragraph here
    </p>
  </div>
</div>

1 Ответ

0 голосов
/ 20 апреля 2020

Привет Просто внесите небольшое изменение в ваш css

 .image_col {
width: 180px;
height: auto;}



.card {
height: auto;}
...