Adjusting position-5 to maintain the standard

Tomáz Martins
1 parent be51ee4b
Showing 1 changed file with 31 additions and 46 deletions Show diff stats
news.css
 .action-content_viewer-view_page #content .main-block #article p {
-  text-align: left;
   max-height: 65px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
 }
 /******************** New layout of blog. ********************/
@@ -14,35 +14,35 @@
 }
 .action-content_viewer-view_page.blog-post h1.title {
-  padding-left: 25px;
   margin-bottom: 0px;
+  padding-left: 25px;
 }
 .action-content_viewer-view_page .blog-post .title a {
-  font-size: 16px;
   font-family: arial;
+  font-size: 16px;
 }
 .action-content_viewer-view_page .blog-post .post-pic {
+  background-size: 100% 100%;
   border-radius: 4px;
-  width: 150px;
-  height: 100px;
   float: left;
-  margin-right: 10px;
+  height: 100px;
   margin-bottom: 5px;
-  background-size: 100% 100%;
+  margin-right: 10px;
+  width: 150px;
 }
 .action-content_viewer-view_page .blog-post .short-post {
-  text-align: justify;
   max-height: 25px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-align: justify;
+  text-overflow: ellipsis;
 }
 .action-content_viewer-view_page .blog-post .short-post p {
-  margin-bottom: -5px;
   color: #172738;
+  margin-bottom: -5px;
 }
 /***** Behavior to special posts *****/
@@ -50,14 +50,14 @@
 /* Featured post */
 .action-content_viewer-view_page .page-1 .position-1 .post-pic {
-  width: 100%;
   height: 315px;
   max-height: 315px;
+  width: 100%;
 }
 .action-content_viewer-view_page .page-1 .position-1 .title a {
-  font-size: 34px;
   color: #172738 !important;
+  font-size: 34px;
   line-height: 37px;
 }
@@ -67,56 +67,30 @@
 .action-content_viewer-view_page .page-1 .position-2 .short-post,
 .action-content_viewer-view_page .page-1 .position-3 .short-post,
 .action-content_viewer-view_page .page-1 .position-4 .short-post {
-  text-align: justify;
+  color: #172738;
   max-height: 45px;
-  text-overflow: ellipsis;
   overflow: hidden;
-  color: #172738;
+  text-align: justify;
+  text-overflow: ellipsis;
 }
 .action-content_viewer-view_page .page-1 .position-2,
 .action-content_viewer-view_page .page-1 .position-3,
 .action-content_viewer-view_page .page-1 .position-4 {
-  width: 150px;
   display: block;
   float:left;
   height: 235px;
   padding:30px;
-
+  width: 150px;
 }
 .action-content_viewer-view_page .page-1 .position-2 .post-pic,
 .action-content_viewer-view_page .page-1 .position-3 .post-pic,
 .action-content_viewer-view_page .page-1 .position-4 .post-pic {
-  width: 100%;
-  top: 10px;
   margin-top: 5px;
-  /*display: table-cell;*/
-}
-
-/*.action-content_viewer-view_page .page-1 .position-2 {
-  display: block;
-  float:left;
-  width: 222px;
-  padding-left: 0px;
-  padding-right: 20px;
-}
-
-.action-content_viewer-view_page .page-1 .position-3 {
-  display: block;
-  float:left;
-  width: 232px;
-  padding-left: 10px;
-  padding-right: 10px;
+  top: 10px;
+  width: 100%;
 }
-.action-content_viewer-view_page .page-1 .position-4 {
-  display: block;
-  float:left;
-  width: 222px;
-  padding-left: 20px;
-  padding-right: 0px;
-}
-*/
 .action-content_viewer-view_page #content .blog-post {
   background: none;
   border-bottom: 1px solid #ccc;
@@ -130,6 +104,18 @@
   border-top: none !important;
 }
+/* Other Positions */
+
+/* This rule serves to maintain the element in position-5 clear the
+ *   configurations of float.
+ *
+ *   TODO: the ideal would be edit HTML of position-2, position-3 and
+ *   position-4 to a list and don't use float. 
+ */
+.action-content_viewer-view_page #content .blog-post.position-5 {
+  clear: both;
+}
+
 .action-content_viewer-view_page #content .blog-post .position-5 h1.title,
 .action-content_viewer-view_page #content .blog-post .position-6 h1.title, 
 .action-content_viewer-view_page #content .blog-post .position-7 h1.title, 
@@ -158,4 +144,3 @@
   font-family: arial;
   line-height: 21px;
 }
-