Image/banner not showing in phones - css

Question

My coding knowledge is next to none but I have been getting by ok with the use of Joomla and preset templates etc. But now I've hit the brick wall head first. While the two banners (right and bottom) are displayed correctly on desktops and tablets, only bottom one is displayed on phones.
Here's the site: http://www.chokladsajten.com
How do I get both to be displayed on smaller screens? (A bonus would of course be if they also were responsive.) Any help or ideas are appreciated!
Custom.css:
#font-face {
font-family: 'DroidSerifBoldItalic';
src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/* Logo */
.custom-logo {
width: 104px;
height: 70px;
background-image: url(../../../images/yootheme/logo.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
/* Only Phones */
#media (max-width: 767px) {
#header-responsive .logo { margin-bottom: 10px; }
}
/* Parallax Effect */
.box-parallax { background-image:
url(../../../images/yootheme/demo/teaser/home_teaser_default.jpg); }
.box-parallax h1 { font-family: "DroidSerifBoldItalic", "TimesNewRoman",
"serif"; }
/* Frontpage Title */
.bigger-title {
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
line-height: 24px;
}
/* Frontpage List Line */
ul.line.frontpage > li {
margin-top: 30px;
padding-top: 30px;
}
ul.line.frontpage > li:first-child {
margin-top: 0;
padding-top: 0;
}
/* Only Tablets (Portrait) */
#media (min-width: 768px) and (max-width: 959px) {
.frontpage-teaser { height: 280px; }
.frontpage-teaser h2 {
margin-bottom: 0;
line-height: 75px;
font-size: 68px;
}
.frontpage-teaser h4 {
line-height: 28px;
font-size: 23px;
}
}
/* only phones */
#media (max-width: 767px) {
.frontpage-teaser { height: 150px; }
.frontpage-teaser h2 {
margin-top: 10px;
margin-bottom: 0;
line-height: 50px;
font-size: 40px;
}
.frontpage-teaser h4 {
margin-top: 0;
font-size: 12px;
line-height: 16px;
}
}
#banner {
position: absolute;
top: 0;
right: -230px;
}
#footer {
position: center;
bottom: 30px;
}
}

Answer 1

You can specify custom styles for the 1220px breakpoint like this:
#media (max-width: 1220px) {
#banner {
display: block;
position: static;
margin-top: 1.5em;
text-align: center;
}
.bannerItem img {
width: 100%;
height: 150px;
}
}
In your current version, for this breakpoint #banner have a property display: none;, therefore it fades away once the window's width exceeds 1220px