Image right-aligned?

zeular · Mar 14, 2018, 6:54 AM

Hello
Maybe a stupid question but how do I get to get the image and the text right-aligned?
I have my module in the region top right, and the text is on the right but the image is left-aligned. I want the text under the picture. (alignment: “bottom”)

j.e.f.f · Mar 14, 2018, 9:21 AM

@zeular This requires a bit of CSS work in the custom.css file. The image is likely being positioned absolutely on the left or floated to the left, as it otherwise would be right-aligned as the text is. You’ll need to start MM in dev mode to open the inspector. Do this with npm start dev from the MagicMirror directory.

Use the inspector to see what CSS is being applied to the image. The best part is that you can play with the CSS right in the inspector to try and see what rule is forcing the image to the left.

If you are completely new to CSS, fear not! Start here: http://www.css-101.org/. This will give you the basics on how CSS works, and should be enough for you to figure out how to get the image right-aligned.