Line 1,489: | Line 1,489: | ||
} | } | ||
+ | .container1{background:#eee;} | ||
+ | .articles{ | ||
+ | display:flex; | ||
+ | overflow:hidden; | ||
+ | flex-wrap:wrap; | ||
+ | align-items:stretch; | ||
+ | } | ||
+ | .articleShort{ | ||
+ | display:flex; | ||
+ | //flex: 0 1 50%; //controll the width, default 1 1 0% | ||
+ | flex:1 1 0%; //really buggy in safari IOS | ||
+ | |||
+ | } | ||
+ | .articleMain{ | ||
+ | display:flex; | ||
+ | flex: 1 1 100%; //controll the width, default 1 1 0% | ||
+ | } | ||
+ | .card1{ | ||
+ | display:flex; | ||
+ | align-items: center; | ||
+ | overflow:hidden; | ||
+ | background-color:white; | ||
+ | //padding:15px; | ||
+ | margin: 15px; | ||
+ | |||
+ | .card-content1{ | ||
+ | display:flex; | ||
+ | flex-direction:column; | ||
+ | align-items:flex-start; | ||
+ | flex: 1 1 auto; | ||
+ | |||
+ | h3,p{ | ||
+ | max-width: calc(100% - 30px); | ||
+ | padding-left:30px; | ||
+ | } | ||
+ | } | ||
+ | .card-image1{ | ||
+ | min-width:262px; | ||
+ | a{ | ||
+ | img{ | ||
+ | //min-width:162px; | ||
+ | display: block; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | |||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 992px) { | ||
+ | .articleShort{ | ||
+ | flex:1 1 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 480px) { | ||
+ | .card1{flex-direction:column; | ||
+ | .card-content1{ | ||
+ | h3,p{text-align:center; | ||
+ | } | ||
+ | } | ||
+ | .card-image{ | ||
+ | |||
+ | img{ | ||
+ | |||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 12:17, 17 October 2018