Problem with Alert Module

[broberg]

I would add this to your custom.css-file and play with the width and color settings.

.alert .ns-box {
  background: #fff;
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 1;
  color: black;
  font-size: 70%;
  position: relative;
  display: table;
  word-wrap: break-word;
  max-width: 100%;
  border-radius: 5px;
}

.alert .ns-alert {
  border-style: solid;
  border-color: #fff;
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 3;
  color: white;
  font-size: 70%;
  position: fixed;
  text-align: center;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  top: 40%;
  width: 40%;
  height: auto;
  word-wrap: break-word;
  border-radius: 20px;
}

.alert .black_overlay {
  position: fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.93); // the last 0.93 is the transparency of the black background
  width: 100%;
  height: 100%;
}

[yours.mukul]

@broberg I added following code to my custom css

body {
   margin-top: 20px;
   margin-left: 8px;
   margin-right: 8px;	
 }

[broberg]

@yours.mukul okey

when changing the body margins you should also adress the body height and width

body {
   margin-top: 20px;
   margin-left: 8px;
   margin-right: 8px;	
  height: calc(100% - 80px);
  width: calc(100% - 16px);
 }

[yours.mukul]

@broberg Actually the problem is something else. Because when I decrease the light intensity from MMM-Remote Module, the left portion remains untouched

[broberg]

@yours.mukul

The Alert modules black overlay background is set to 93% transparency, the overlay takes it’s dimensions from the body height and width (i.e 100% of the bodys width and height, ) if you don’t change the height and width together with the margin changes you did, the alert module will not fill the entire screen.

[yours.mukul]

See the inspecting of elements, can anyone help me ??