“Above Fold” design

Word Count: 122

Above Fold for home page:

  • Remove all empty space elements above and below the text column.
  • Targeted width for above fold behaviour: min-width: 1025px AND min-height: 890px
  • Content height in row 1 = 478px
  • Row 2 height = 125px
  • Using curve fitting in Excel, total adjustable height = (0.9826 * 100vh – 795.22px) + 95px
  • Add Class .cu-es-hi-fold to ES above the first text line and ES below the button.
  • Add CSS:
@media (min-width: 1025px) and (min-height: 890px) {
	
    .home .cu-home-r01_1c2 { /* top:bot = 6:4 */
	margin-top: calc(0.7861 * 100vh - 560.176px) !important;
	margin-bottom: calc(0.1965 * 100vh - 140.044px) !important;		
    }

    .cu-es-hi-fold {
 	display: none;	
    }
	
} /* @ W>=1025 & H>=890 */

@media (min-width: 1025px) and (min-height: 1080px) {
	
    .home .cu-home-r01_1c2 { /* top:bot = 5.5:4.5 */
	margin-top: calc(0.5404 * 100vh - 385.121px) !important;
	margin-bottom: calc(0.4422 * 100vh - 315.099px) !important;		
    }

    .cu-es-hi-fold {
	display: none;	
    }
	
} /* @ W>=1025 & H>=1080 */
Tags: ,