Minimal Mistakes Utility - Image Size Modification

less than 1 minute read

Minimal-Mistakes Style Sheet Structure

scss
Got a hint from:
https://github.com/mmistakes/minimal-mistakes/issues/1583

![](/images/image.jpg){: .align-right .width-half}

Go to _utilities.scss
Add


.img-20 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: 20%;
}

.img-30 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 25%;
}

...

.img-70 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 70%;
}

.img-80 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 80%;
}
![GGU](/assets/images/GGU.jpg){: .align-center .img-20}  

GGU

![GGU](/assets/images/GGU.jpg){: .align-center .img-50}  

GGU

![GGU](/assets/images/GGU.jpg){: .align-center .img-70}  

GGU

References

Minimal-Mistakes: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/

Leave a comment