shaik Jilani shaik Jilani - 3 months ago 14
CSS Question

Editing Prestashop themes and modules 4

I am trying to change the tpl file in the module,they have some problem i am changing the image size depending on the screen resolution,I have written the code but cannot display perfectly,when they refresh the page it displays perfect

Code is given below

<script type="text/javascript" src="../../img/jquery.min.js"></script>
<script type="text/javascript" src="img/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
$('.slideshow1').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
$('.slideshow2').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>


CSS

<style type="text/css">
.slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px; padding:0px;}
.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left;}


/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/
.slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; }
.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; }


/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
.slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; }
.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; }

{literal}
@media only screen and (min-width: 1218px) {

.slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px; padding:0px;}
.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left;}


/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/
.slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; }
.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; }


/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
.slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; }
.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; }
}

@media only screen and (min-width: 998px) and (max-width: 1217px) {
.slideshow { height:100%; width: 238px; float:left; margin:20px 8px 0px 0px; padding:0px;}

.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px;}

.slideshow1 { height:100%; width: 238px; padding:0px; float:left;margin:20px 0px 0px 0px; }

/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/

.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; }

.slideshow2 { height:100%; width: 238px; float:right; margin:20px 0px 0px 0px; }

/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; }
}

@media only screen and (min-width: 768px) and (max-width: 997px) {
.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; float:left; padding:0px; width:225px; margin:auto;}


/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/
.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:225px; float:left; margin:auto; }


/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/
.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:225px; float:left; margin:auto; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px;}


/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/

.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px; }


/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px; }
}


@media only screen and (max-width: 479px) {

.slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:100%; text-align:center;}


/*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/

.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:100%; text-align:center; }


/*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/

.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;margin-left:-8px; padding:0px; width:100%; text-align:center; }
}

{/literal}
</style>


HTML

<div class="slideshow">
<a href="#"><img src="img/earrings_011.jpg" ></a>
<a href="#"><img src="img/earrings_044.jpg"/></a>
<a href="#"><img src="img/earrings_033.jpg"></a>

</div>

<div class="slideshow1" >
<a href="#"><img src="img/bracelets_011.jpg" /></a>
<a href="#"><img src="img/bracelets_022.jpg" /></a>
<a href="#"> <img src="img/bracelets_033.jpg" /></a>
</div>

<div class="slideshow2">
<a href="#"><img src="img/necklaces_01.jpg" /></a>
<a href="#"><img src="img/necklaces_02.jpg"/></a>
<a href="#"><img src="img/necklaces_03.jpg"/></a>
</div>

Answer

If you use any CSS or JavaScript inline, enclose it in {literal} {/literal} tags. This differentiates it from when Smarty uses the brackets { }.