MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Changing column width different for top and bottom



  • Hey guys,

    I wanted to have the top colums split 40/40/20 and the bottom 50/50 (no center).

    I am new to CSS, so please be patient.

    I tried in custom.css the following (without success). The bottom works out fine, but the upper part the left and middle column are overlapping.

    Any help is much appreciated. Thanks.

    body {
    	margin: 30px; /* Less margin */
     	height: calc(100% - 60px);
     	width: calc(100% - 60px);
    }
    
    header {
    	text-transform: none; /* No Capitals in the Header */
    }
    
    .region.top.left {
    	width: 37%;
    }
    
    .region.top.center {
    	width: 37%;
    	left: 0%;
    	-moz-transform: translateX(0%);
    	-o-transform: translateX(0%);
    	-webkit-transform: translateX(0%);
    	-ms-transform: translateX(0%);
    	transform: translateX(0%);
    }
    
    .region.top.right {
    	width: 13%;
    }
    
    .region.bottom.left {
    	width: 47%;
    }
    
    .region.bottom.right {
    	width: 47%;
    }
    

  • Module Developer

    @rak

    Put something like this…

    .region.top.left {
        width: 768px;
    }
    
    .region.top.center {
        width: 768px;
    }
    
    .region.top.right {
        width: 384px;
    }
    
    .region.bottom.left {
        width: 960px;
    }
    
    .region.bottom.right {
        width: 960px;
    }
    

    in your custom.css file. I would venture to think it should work, tested it out on my laptop, and it seemed to be what you might be wanting,

    to get the number of pixels needed, I multiplied my screen resolution by .40 (40%) and .20 (20%). Then I divided my screen res width by 2 to get the 50% in pixels.

    IE: my screen res for total width is 1920px. Thus 1920 X .40 = 768, giving me the top_left and top_center amounts.
    then I multiplied 1920 X .20 to get the top_right amount. then to get the 2 bottom amounts, I divided 1920 /2 = 960.