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

Newsfeed Wrap with CSS

Scheduled Pinned Locked Moved Troubleshooting
13 Posts 3 Posters 2.5k Views 3 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.
  • S Offline
    schlittrix
    last edited by Mar 22, 2021, 3:48 PM

    Hey,
    I’ve got a problem with the newsfeed-module.
    It works fine except the width, its too wide, so the text overwrites other modules. (newsfeed is centered).
    So .wrap doesn’t work.
    I tried it with CSS to fix the width, but than the “wrapped” text is still on the left side and not centered.
    Is there a possibility to center the “wrapped” text in the CSS-File or is there another option for me?

    M 1 Reply Last reply Mar 23, 2021, 12:50 AM Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @schlittrix
      last edited by Mar 23, 2021, 12:50 AM

      @schlittrix

      From stackoverflow. I have not tested it.

      This should center the wrapped text as well. In custom.css file, add :

      text-align: center;

      Create a working config
      How to add modules

      S 1 Reply Last reply Mar 24, 2021, 7:00 AM Reply Quote 1
      • S Offline
        schlittrix @Mykle1
        last edited by Mar 24, 2021, 7:00 AM

        @mykle1
        Thank you. I tried this css-setup. The lengh is fine, but the center-function doesn’t work.

        newsfeed-desc { width: 700px; }
        text-align: center;

        S 1 Reply Last reply Mar 24, 2021, 11:34 AM Reply Quote 0
        • S Away
          sdetweil @schlittrix
          last edited by Mar 24, 2021, 11:34 AM

          @schlittrix the text align has to be inside the bracesof the newsfeed class

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          S 1 Reply Last reply Mar 24, 2021, 11:42 AM Reply Quote 2
          • S Offline
            schlittrix @sdetweil
            last edited by sdetweil Mar 24, 2021, 12:23 PM Mar 24, 2021, 11:42 AM

            @sdetweil ouh. I’m a beginner :D
            so this way?

            newsfeed-desc { width: 700px; text-align: center; }
            
            S 1 Reply Last reply Mar 24, 2021, 12:15 PM Reply Quote 1
            • S Away
              sdetweil @schlittrix
              last edited by sdetweil Mar 24, 2021, 12:24 PM Mar 24, 2021, 12:15 PM

              @schlittrix yes

              u can specify lots of style elements in a single class like that

              for readability you should put the contents on separate lines inside the braces
              like this

              newsfeed-desc { 
                   width: 700px; 
                   text-align: center; 
              }
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              S 2 Replies Last reply Mar 24, 2021, 12:40 PM Reply Quote 2
              • S Offline
                schlittrix @sdetweil
                last edited by Mar 24, 2021, 12:40 PM

                @sdetweil said in Newsfeed Wrap with CSS:

                @schlittrix yes

                u can specify lots of style elements in a single class like that

                for readability you should put the contents on separate lines inside the braces
                like this

                newsfeed-desc { 
                     width: 700px; 
                     text-align: center; 
                }
                

                thank you so much :)
                I will try this today in the evening

                1 Reply Last reply Reply Quote 0
                • S Offline
                  schlittrix @sdetweil
                  last edited by Mar 24, 2021, 5:30 PM

                  @sdetweil said in Newsfeed Wrap with CSS:

                  @schlittrix yes

                  u can specify lots of style elements in a single class like that

                  for readability you should put the contents on separate lines inside the braces
                  like this

                  newsfeed-desc { 
                       width: 700px; 
                       text-align: center; 
                  }
                  

                  so i tried this step without success…
                  When I just have the “width”-line, the text is wrapped, but not centered.
                  But when I put in these code with text-align, nothing happend and the text is no more wrapped…

                  any ideas? :(

                  S 1 Reply Last reply Mar 24, 2021, 6:00 PM Reply Quote 0
                  • S Away
                    sdetweil @schlittrix
                    last edited by sdetweil Mar 24, 2021, 6:01 PM Mar 24, 2021, 6:00 PM

                    @schlittrix

                    try this

                    newsfeed-desc { 
                        width: 700px;
                        display: flex;
                        justify-content: center;
                    }
                    

                    from here https://stackoverflow.com/questions/6618648/can-overflow-text-be-centered

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    S 1 Reply Last reply Mar 24, 2021, 7:16 PM Reply Quote 0
                    • S Offline
                      schlittrix @sdetweil
                      last edited by Mar 24, 2021, 7:16 PM

                      @sdetweil said in Newsfeed Wrap with CSS:

                      newsfeed-desc {
                      width: 700px;
                      display: flex;
                      justify-content: center;
                      }

                      Don’t know, maybe I’m stupid…
                      but it still doesn’t work…
                      this is my config-setup:

                       {
                                              module: "newsfeed",
                                              position: "bottom_bar",
                                              config: {
                                                      feeds: [
                                                              {
                                                                      title: "Tagesschau",
                                                                      url: "https://www.tagesschau.de/xml/rss2/"
                                                              }
                                                      ],
                                                      showSourceTitle: true,
                                                      showPublishDate: true,
                                                      broadcastNewsFeeds: true,
                                                      broadcastNewsUpdates: true,
                                                      showDescription: true,
                                                      wrapDescription: true
                                              }
                                      },
                      

                      and this is the css-file:

                      newsfeed-desc {
                          width: 500px;
                          display: flex;
                          justify-content: center;
                      }
                      
                      S 1 Reply Last reply Mar 24, 2021, 7:40 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        1/13
                        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