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.

    Help with CSS to align Sonos Art Work

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    5 Posts 2 Posters 919 Views 1 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.
    • F Offline
      frogywill Project Sponsor
      last edited by frogywill

      Hi All!
      I am trying to figure out to align the art work of the SONOS Module to the left in the custom CSS and I can’t figure it out. Anyone familiar enough with CSS to help me out ?
      0_1571419063790_Screen Shot 2019-10-18 at 10.15.36 AM.png
      I am looking to have the art work on the left of the text.

      Thanks !

      Here is the layout:

      <div class=sonos>
         <ul class="flip">
           <div class="type normal small">Source: Track</div>
           <div class="song">
              <div class="name normal small">
                 <div>Artist: Ozuna</div>
                 <div>Track: Te Soñé de Nuevo</div>
              </div>
         <div class="art">
              <img src="http://192.168.1.227:1400/getaa?v=0&amp;vli=1&amp;u=1471199652">
         </div>
         </div>
      </ul>
      </div>
      

      0_1571423129224_Screen Shot 2019-10-18 at 11.25.07 AM.png

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

        @frogywill

        In the custom.css file add :

        .art img {padding-left: 10px}
        
        1 Reply Last reply Reply Quote 0
        • F Offline
          frogywill Project Sponsor
          last edited by frogywill

          Thanks, wouldn’t that align the art work to the text above? What I am trying to do is have the Art work be on the left of the text instead of below it:

          (ART WORK) (SONG DETAILS)

          Rather than:
          (SONG DETAILS)
          (ART WORK)

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

            @frogywill

            Ahh sorry, didn’t read carefully enough.

            try this then, should shift the text to the right and let the image pop up next to it

            .song {position: relative;}
            .song .name {position: absolute; left: 200px;}
            
            1 Reply Last reply Reply Quote 1
            • F Offline
              frogywill Project Sponsor
              last edited by

              THANKS! You did it! I really appreciate the help! :folded_hands:

              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