• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Changing column width different for top and bottom

Scheduled Pinned Locked Moved Development
2 Posts 2 Posters 1.9k Views 2 Watching
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 Offline
    rak
    last edited by May 29, 2018, 7:27 AM

    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%;
    }
    
    J 1 Reply Last reply May 30, 2018, 2:02 AM Reply Quote 0
    • J Offline
      justjim1220 Module Developer @rak
      last edited by May 30, 2018, 2:02 AM

      @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
      1 / 1
      • First post
        1/2
        Last post
      Enjoying MagicMirror? Please consider a donation!
      MagicMirror created by Michael Teeuw.
      Forum managed by Sam, technical setup by Karsten.
      This forum is using NodeBB as its core | Contributors
      Contact | Privacy Policy