rolling image on mainbody position - visibility problem

Product Name: Gk_simplicity V3.17 - Joomla! 3.4.3
Site url: http://adoptaheliostat.com/

Hi,
I noticed that the image I use at the custom html code on position "mainbody" is not visible through some devices (ie from my ipad) . When I check the demo of gk simplicity from the same devices, the image appears correctly.
What do I do whrong?


I'm attaching the current module's code.

Code: Select all

    <div class="gkHorizontalSlide">
    <div class="gkHorizontalSlideLeftColumn">
    <h2>Become part of the change! Promote renewable energy source awareness!</h2>
    <p>Our environment is threatened by unprecedented destruction due to climate change. The evidence is everywhere: global warming, extreme climatic events such as heat waves and flooding, acidification of the oceans and destruction of biodiversity. Even worse, the production of greenhouse gases such as CO2, which are understood as the very causes of this catastrophe, are continuing to be produced at an accelerated pace. It does not have to be this way. Many measures can be taken to halt this imminent disaster and to ameliorate its impact. The Cyprus Institute (CyI) is conducting research to understand these environmental phenomena and to develop methods for adaptation and mitigation.</p>
    <p><a class="button" href="index.php?option=com_content&amp;view=article&amp;id=20&amp;catid=2&amp;Itemid=374">View Details</a></p>
    </div>
    <div class="gkHorizontalSlideRightColumn"><br /><img src="http:/images/heliostat-diagram.jpg" alt="adopt a Heliostat" /></div>
    </div>

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:580px) {
.gkHorizontalSlideRightColumn {
    display: block;
    float: none;
    padding-bottom: 150px;
    width: 100%;
}
}


many thanks, but it didn't work...

Hi

Probably code is used too late 580px is hardly an iPad, sorry for that. Try maybe:

Code: Select all

@media only screen and (max-width:900px) {
.gkHorizontalSlideRightColumn {
    display: block;
    float: none;
    padding-bottom: 150px;
    width: 100%;
    margin: 0;
}

.gkHorizontalSlideLeftColumn {
    float: none;
    width: 100%;
}
}


The error was the "http:/" on img src and I just noticed that...
Thank you very much for your effort.

Hi

Hehe. I kept thinking image is pushed outside the visible area Good catch.