Link to categories not working on mobile devices

[pietruzzo]

Hi. I can't figure out why on mobile devices links to categories don't work. Only the + sign to expand categories is working. I'm using 1.6.5 version of Prestashop - Leo healthycare theme.

link

 

[modprestashop]

Because of this:

 

this section of your code overlap it:

<div class="col-md-6 col-lg-6 ApColumn " style="
    clear: both;
"><div id="slideshow-form_6101715967633435" class="ApSlideShow"><div class="bannercontainer banner-fullwidth" style="padding: 0px;margin: 0px;"><div class="iview iview-group-19" style="height: 163px;"><div class="iviewSlider" style="position: relative; height: 700px; width: 1200px; transform-origin: 0px 0px 0px; transform: scale(0.233333); background-color: rgb(255, 255, 255);"><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="0" data-transition="wipeBottom" style="opacity: 1; top: 0px; left: 0px; width: 1204px; height: 700px;"><div class="caption-contain" style="position: relative; width: 1204px; height: 700px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/MEDICAL2.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="78" data-y="584" data-transition="expandTop" style="font-size: 90px; color: rgb(0, 114, 161); opacity: 1; top: 584px; left: 78px; width: 364px; height: 60px;"><div class="caption-contain" style="position: relative; width: 364px; height: 60px; opacity: 1; top: 0px; left: 0px;"> MEDICALI</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-link="http://shopmediwell.com/10010-fitness" data-target="_self" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px;"><div class="tp-caption " data-x="0" data-y="0" data-transition="fade" style="overflow: hidden; opacity: 0.341762; top: 0px; left: 0px; width: 1203.34px; height: 800px;"><div class="caption-contain" style="position: relative; width: 1204px; height: 800px; opacity: 0.272305; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/Fitness-Girl.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="238" data-y="329" data-transition="wipeTop" style="font-size: 90px; overflow: hidden; opacity: 0.173488; top: 329px; left: 238px; width: 314.173px; height: 60px;"><div class="caption-contain" style="position: relative; width: 315px; height: 60px; opacity: 0.118271; top: 0px; left: 0px;"> FITNESS</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="-100" data-transition="fade" style="opacity: 1; top: -100px; left: 0px; width: 1203px; height: 800px;"><div class="caption-contain" style="position: relative; width: 1203px; height: 800px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/benessere.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="260" data-y="464" data-transition="expandRight" style="font-size: 90px; color: rgb(151, 255, 142); opacity: 1; top: 464px; left: 260px; width: 397px; height: 60px;"><div class="caption-contain" style="position: relative; width: 397px; height: 60px; opacity: 1; top: 0px; left: 0px;"> WELLNESS</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="1" data-transition="fade" style="opacity: 1; top: 1px; left: 0px; width: 1203px; height: 699px;"><div class="caption-contain" style="position: relative; width: 1203px; height: 699px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/beauty4.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="663" data-y="428" data-transition="expandRight" style="font-size: 90px; color: rgb(255, 231, 110); opacity: 1; top: 428px; left: 663px; width: 368px; height: 60px;"><div class="caption-contain" style="position: relative; width: 368px; height: 60px; opacity: 1; top: 0px; left: 0px;"> ESTETICA</div></div></div></div><div class="iview-timer" style="display: block; width: 44px; height: 44px; top: 10px; right: 10px; opacity: 0.5;" title="Pause"><svg height="44" version="1.1" width="44" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#000000" d="M22,7A15,15,0,1,1,21.973820074511526,7.000022846300684" stroke-width="11" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="none" stroke="#eeeeee" d="M22,7A15,15,0,0,1,36.336895221974956,17.58939512151544" stroke-width="3" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linecap: round;"></path><path fill="#eeeeee" stroke="none" d="M0,0" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg><div></div></div></div></div>  </div></div>

So what you need to do is just set clear property of CSS to both like shown in screenshot, and it will be solved.

 

Basically do this in CSS
 

.ApColumn{clear:both}

[pietruzzo]

 

Because of this:

 

this section of your code overlap it:

<div class="col-md-6 col-lg-6 ApColumn " style="
    clear: both;
"><div id="slideshow-form_6101715967633435" class="ApSlideShow"><div class="bannercontainer banner-fullwidth" style="padding: 0px;margin: 0px;"><div class="iview iview-group-19" style="height: 163px;"><div class="iviewSlider" style="position: relative; height: 700px; width: 1200px; transform-origin: 0px 0px 0px; transform: scale(0.233333); background-color: rgb(255, 255, 255);"><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="0" data-transition="wipeBottom" style="opacity: 1; top: 0px; left: 0px; width: 1204px; height: 700px;"><div class="caption-contain" style="position: relative; width: 1204px; height: 700px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/MEDICAL2.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="78" data-y="584" data-transition="expandTop" style="font-size: 90px; color: rgb(0, 114, 161); opacity: 1; top: 584px; left: 78px; width: 364px; height: 60px;"><div class="caption-contain" style="position: relative; width: 364px; height: 60px; opacity: 1; top: 0px; left: 0px;"> MEDICALI</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-link="http://shopmediwell.com/10010-fitness" data-target="_self" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px;"><div class="tp-caption " data-x="0" data-y="0" data-transition="fade" style="overflow: hidden; opacity: 0.341762; top: 0px; left: 0px; width: 1203.34px; height: 800px;"><div class="caption-contain" style="position: relative; width: 1204px; height: 800px; opacity: 0.272305; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/Fitness-Girl.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="238" data-y="329" data-transition="wipeTop" style="font-size: 90px; overflow: hidden; opacity: 0.173488; top: 329px; left: 238px; width: 314.173px; height: 60px;"><div class="caption-contain" style="position: relative; width: 315px; height: 60px; opacity: 0.118271; top: 0px; left: 0px;"> FITNESS</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="-100" data-transition="fade" style="opacity: 1; top: -100px; left: 0px; width: 1203px; height: 800px;"><div class="caption-contain" style="position: relative; width: 1203px; height: 800px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/benessere.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="260" data-y="464" data-transition="expandRight" style="font-size: 90px; color: rgb(151, 255, 142); opacity: 1; top: 464px; left: 260px; width: 397px; height: 60px;"><div class="caption-contain" style="position: relative; width: 397px; height: 60px; opacity: 1; top: 0px; left: 0px;"> WELLNESS</div></div></div><div class="slide_config" data-leo_image="/modules/leoslideshow/views/img/blank.gif" data-leo_background_color="#ffffff" data-leo_pausetime="4000" data-leo_thumbnail="/modules/leoslideshow/views/img/white50.png" data-leo_background="color" style="width: 575px; height: 700px; display: none;"><div class="tp-caption " data-x="0" data-y="1" data-transition="fade" style="opacity: 1; top: 1px; left: 0px; width: 1203px; height: 699px;"><div class="caption-contain" style="position: relative; width: 1203px; height: 699px; opacity: 1; top: 0px; left: 0px;"> <img src="/themes/leo_healthycare/img/modules/leoslideshow/beauty4.jpg" alt="" class="img_disable_drag"></div></div><div class="tp-caption very_large_text" data-x="663" data-y="428" data-transition="expandRight" style="font-size: 90px; color: rgb(255, 231, 110); opacity: 1; top: 428px; left: 663px; width: 368px; height: 60px;"><div class="caption-contain" style="position: relative; width: 368px; height: 60px; opacity: 1; top: 0px; left: 0px;"> ESTETICA</div></div></div></div><div class="iview-timer" style="display: block; width: 44px; height: 44px; top: 10px; right: 10px; opacity: 0.5;" title="Pause"><svg height="44" version="1.1" width="44" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#000000" d="M22,7A15,15,0,1,1,21.973820074511526,7.000022846300684" stroke-width="11" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="none" stroke="#eeeeee" d="M22,7A15,15,0,0,1,36.336895221974956,17.58939512151544" stroke-width="3" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linecap: round;"></path><path fill="#eeeeee" stroke="none" d="M0,0" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg><div></div></div></div></div>  </div></div>

So what you need to do is just set clear property of CSS to both like shown in screenshot, and it will be solved.

 

Basically do this in CSS

 

.ApColumn{clear:both}

Thanks for the quick reply. This solves the problem with links to categories on mobile but messes up my desktop home page.(slide show disappears and the pictures on the right column are thrown below the category block) I tried to add the property you suggested in global.css and responsive.css. Did I put it in the wrong file?

Thanks again for your time.

[modprestashop]

No, then your theme need CSS refinement. If it happened then your theme have not specific CSS. You need to go trough all issues to solve them.