I'm still a fairly new blogger and I use the Aroma blog theme. I love it except for one thing. I'm having troubles with getting the footer to work with me as well as other themes. I figured out how to change the color for the whole footer on the desktop view, but I can't get it to work for the mobile view. And just so I don't mess anything up, I left it alone after fighting with it for too long. I also would like to get rid of the excessive space at the bottom of my desktop footer. Am I doing something wrong?

Some people around said it can be turned off in the settings when I edit my website but I don't have that option. And I have a business account.

Here's where I could find it in the main_style.css:

#footer {
  width: 100%;
  height: 100%;
  background-color: #a9f8dd;
  border-color: #a9f8dd;
  bottom: auto;
  position: absolute;
  display: inline;
  clear: both;
}

.container,
.wsite-footer {
  margin: 0 auto;
  max-width: 1100px;
  padding: 1em 1em;
  box-sizing: inherit;
  flex: none;
}

/* Misc. */

#footer hr.styled-hr {
  background: #555;
}

There's not a footer option in the all of the codes for this media section:

@media (max-width: 992px) {

  body {
    height: 100%;
  }

But for this one there is:

@media (max-width: 767px) {


  /* General Structure
  ---------------------------------------*/

  body {
    font-size: 14px;
  }

  .wsite-multicol-col {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 1em !important;
  }

  .container,
  .wsite-footer {
    padding: 2.5em 1.5em;
	display: block;
  }

I'm at my wits end. What am I doing wrong? Any help is appreciated. Thank you!

Mobile ViewDesktop View 1Desktop View 2