MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Changing column width different for top and bottom

    Development
    2
    2
    1426
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rak last edited by

      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%;
      }
      
      justjim1220 1 Reply Last reply Reply Quote 0
      • justjim1220
        justjim1220 Module Developer @rak last edited by

        @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.

        "Life's Too Short To Dance With Ugly People"
        Jim Hallock - 1995

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy