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.

    MMM-HASS & css nightmare (slight exaggeration)

    Scheduled Pinned Locked Moved Custom CSS
    4 Posts 3 Posters 1.2k 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.
    • J Offline
      jaraeez
      last edited by

      Trying to get my list of entities to be aligned for both columns & for hours now (I have no idea about css) I have been googling, reading up on css etc with no luck.

      I have the below

      0_1571091118383_vnchass.png

      & am trying to get it to be aligned similar to the below:

      0_1571091164693_vnchass1.png

      After playing around with the css I have the two below css files as it stands & would really appreciate someone putting me in the right direction.

      MMM-HASS.css

      .MMM-HASS .row {
        position: relative;
        padding: 1px;
        min-width: 300px;
        justify-content: center;
        line-height: 30px;
        text-align: right;
      }
      
      .MMM-HASS .module-content .flex-item {
        /*margin: auto;*/
      }
      
      .region.left .MMM-HASS .row,
      .region.center .MMM-HASS .row,
      .region.right .MMM-HASS .row {
        position: relative;
        padding: 1px;
        justify-content: left;
      }
      
      .region.left .MMM-HASS .row .flex-item > div,
      .region.center .MMM-HASS .row .flex-item > div,
      .region.right .MMM-HASS .row .flex-item > div {
        display: inline-block;
        min-width: 70px;
      }
      
      .MMM-HASS .device {
      /*  display: block; */
        font-size: 40px;
        white-space: nowrap;
        margin-right: 40px;
        line-height: 40px;
        position: relative;
        left: 0px;
      }
      
      .region.left .MMM-HASS .flex-item .title,
      .region.center .MMM-HASS .flex-item .title,
      .region.right .MMM-HASS .flex-item .title{
        border-bottom: none;
      }
      
      .region.left .MMM-HASS .value {
      	  width: 100%;
      	    max-width: 400px;
      	      min-width: 10vw;
            }
      
      .MMM-HASS table {
      	    border-spacing: 10px 0;
      	        border-collapse: separate;
      	}
      
      
      .MMM-HASS .value {
        font-size: 40px;
        display: inline-block;
        margin-right: 5px;
        line-height: 40px;
      }
      
      .region.left .MMM-HASS .flex-item .value,
      .region.center .MMM-HASS .flex-item .value,
      .region.right .MMM-HASS .flex-item .value{
        margin: 5px;
        font-size: 1em;
      }
      
      .MMM-HASS .value i {
        margin-right: 8px;
        font-size: 0.75em;
      
      }
      

      My custom css (I have removed what I had for the MMM-HASS enteries & edit the above as a last resort)

      /*****************************************************
       * Magic Mirror                                      *
       * Custom CSS                                        *
       *                                                   *
       * By Michael Teeuw http://michaelteeuw.nl           *
       * MIT Licensed.                                     *
       *                                                   *
       * Add any custom CSS below.                         *
       * Changes to this files will be ignored by GIT. *
       *****************************************************/
      .xsmall {
      	  font-size: 35px;
      	    line-height: 40px;
          }
      
          .small {
      	      font-size: 40px;
      	        line-height: 45px;
      	}
      
      	.medium {
      		  font-size: 50px;
      		    line-height: 55px;
      	    }
      
      	    .large {
      		      font-size: 85px;
      		        line-height: 85px;
      		}
      
      		.xlarge {
      			  font-size: 95px;
      			    line-height: 95px;
      			      letter-spacing: -3px;
      		      }
      		      .normal,
      		      .dimmed,
      		      header,
      		      body {
      			          color: #fff;
      			  }
      
      
      
      			  .MMM-MovieListings .header {
      				    color: #FFFFFF;               /* Header color. Default is white. */
      			    }
      
      			    .MMM-MovieListings .dimmed {
      				      font-size: 18px;
      				        color: #FFFFFF;   /* white */
      				}
      
      			    .MMM-MovieListings .small.dimmed {
      				      font-size: 18px;
      				        color: #FFFFFF;   /* white */
      				}
      
      				.MMM-MovieListings .xsmall {
      					  font-size: 18px;
      					    color: #FFFFFF;   /* white */
      				    }
      
      				    .MMM-MovieListings .xsmall.dimmed {
      					      font-size: 18px;
      					        color: #FFFFFF;   /* white */
      					}
      
      					.MMM-MovieListings .marginTop.xsmall {
      						  font-size: 18px;
      						    color: #FFFFFF;   /* white */
      					    }
      
      
      

      Thanks in advance

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by broberg

        Remove all changes made in the hass css file

        Add

        .MMM-Hass .device {text-align: right}
        .MMM-Hass .value {display: inline-block; text-align: right; width:80px;}
        
        1 Reply Last reply Reply Quote 0
        • J Offline
          jaraeez
          last edited by

          Tried both adding your snippet to the end of the original hass css which didn’t make any changes. Then removed all & just added your code & got the below

          0_1571178380660_vnc2.png

          Original hass css

          .MMM-HASS .row {
            position: relative;
            padding: 1px;
            min-width: 300px;
            justify-content: left;
            line-height: 20px;
            text-align: right;
          }
          
          .MMM-HASS .module-content .flex-item {
            /*margin: auto;*/
          }
          
          .region.left .MMM-HASS .row,
          .region.center .MMM-HASS .row,
          .region.right .MMM-HASS .row {
            position: relative;
            padding: 1px;
            justify-content: left;
          }
          
          .region.left .MMM-HASS .row .flex-item > div,
          .region.center .MMM-HASS .row .flex-item > div,
          .region.right .MMM-HASS .row .flex-item > div {
            display: inline-block;
            min-width: 70px;
          }
          
          .MMM-HASS .device {
          /*  display: block; */
            font-size: 20px;
            white-space: nowrap;
            margin-right: 40px;
            line-height: 25px;
            position: absolute;
            left: 0px;
          }
          
          .region.left .MMM-HASS .flex-item .title,
          .region.center .MMM-HASS .flex-item .title,
          .region.right .MMM-HASS .flex-item .title{
            border-bottom: none;
          }
          
          .MMM-HASS .value {
            font-size: 20px;
            display: inline-block;
            margin-right: 5px;
            line-height: 25px;
          }
          
          .region.left .MMM-HASS .flex-item .value,
          .region.center .MMM-HASS .flex-item .value,
          .region.right .MMM-HASS .flex-item .value{
            margin: 5px;
            font-size: 1em;
          }
          
          .MMM-HASS .value i {
            margin-right: 8px;
            font-size: 0.75em;
          
          }
          

          Cheers for looking

          1 Reply Last reply Reply Quote 0
          • R Offline
            retroflex Project Sponsor Module Developer
            last edited by

            Use the developer toos in Chrome to see the whole html & css. You can also edit that to try out things quickly.

            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 Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy