sjehuda / Newspaper

  1. Newspaper
  2. Issues
  3. Improve CSS
Open Close
sjehuda Author

We want to have three columns instead of one.

We curently have a single column because text an images get misplaced with some feeds.

Three columns code:

#articles {
 display: flex;
 justify-content:space-between;
 flex-wrap: wrap;
 /* flex-direction: row; */
 max-width: 90%;
 margin: 0 auto;
 padding: 10px 0;
}

#articles > * {
 max-height: 29%;
 max-width: 29%;
 min-height: 29%;
 min-width: 29%;
 display: -webkit-box;
 -webkit-line-clamp: 11; /* number of lines to show */
         line-clamp: 11;
 -webkit-box-orient: vertical;
 margin: 0.5em;
 white-space: normal;
 vertical-align: top;
 margin-bottom: 50px;
 /* center entiries
 margin: auto;
 width: 50%;
 text-align: center; */
}

.entry {
 max-height: 230px;
 max-width: 29%;
 min-height: 230px;
 min-width: 29%;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 line-height: 1.6;
 font-size: 85%;
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
 /*
 animation effect to be used with transform upon hover
 transition: all .2s ease-in-out;
 -webkit-animation-name: none;
 */
}

/* TODO expand entry from center of screen upon hover */
.entry:hover {
 background: azure;
 /* transform: scale(1.8);
 height: 50em;
 width: 50vw; */
  
}

.entry * {
 max-width: 98%;
}