TOPIC: how to solve too much "space" in mobile layout view

how to solve too much "space" in mobile layout view 9 years 3 months ago #6449

  • jarod159
  • jarod159's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
  • Thank you received: 1
  • Karma: 0
Hi!
I would modify - in mobile layout (ex: iphone) - the space between image and imagenav.
Looking at the attached image (product detail page) u can see what i'm referring.

I found in template.css (ot_Juno) the section " @media (max-width: 480px) "
could be a right direction?

thanks a lot.




This image is hidden for guests. Please log in or register to see it.
Last Edit: 9 years 3 months ago by jarod159.
The administrator has disabled public write access.
The following user(s) said Thank You: minhnv

Re: how to solve too much "space" in mobile layout view 9 years 3 months ago #6454

  • trungdt
  • trungdt's Avatar
  • OFFLINE
  • Administrator
  • Posts: 2284
  • Thank you received: 998
  • Karma: 121
It's getting height from js script :)
The administrator has disabled public write access.

Re: how to solve too much "space" in mobile layout view 9 years 3 months ago #6457

  • jarod159
  • jarod159's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
  • Thank you received: 1
  • Karma: 0
thanks!
could u give me more information to solve this problem?

thanks a lot.
The administrator has disabled public write access.

Re: how to solve too much "space" in mobile layout view 9 years 3 months ago #6491

  • minhnv
  • minhnv's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 28
  • Thank you received: 10
  • Karma: 2
Hi,
Plz go to folder directory of ot_juno template and open templates.css file and add more css code below to bottom.
templates.css file directory is templates/ot_juno/css/templates.css
@media (max-width: 979px) {
    div.productdetails-view .product-images .image{
        height: 250px;
    }
}
@media (max-width: 767px) {
	/* fixed the modal popup width in small screen */
    .sidebar .component{
        padding: 0 5px;
    }
    .productdetails-view .spacer-buy-area{
        padding: 0;
    }
    div.productdetails-view .product-images .image{
        height: 282px;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .sidebar .component{
        padding: 0 5px;
    }
    div.productdetails-view .product-images .image{
        height: 222px;
        margin-bottom: 10px;
    }
    .productdetails-view .spacer-buy-area{
        padding: 10px 0 0 0;
    }
}

and open default_images.php file of directory templates/ot_juno/html/com_virtuemart/productdetails/ and replace
<!--
	//var j = jQuery.noConflict();
	jQuery(document).ready(function(){
		var slideshow = jQuery('.images').after('<div id="imagesNav">')
		.cycle({ 
			fx:     'fade', 
			speed:  '300', 
			timeout: 400000,
			height:	'380px',
			pager:  '#imagesNav' 
		});
		// add styles
		var wslide = jQuery(".product-images").width();
		jQuery(".image").css({
			width: wslide + 'px'
		});
	});
-->

by
<!--
	//var j = jQuery.noConflict();
	jQuery(document).ready(function(){
		var slideshow = jQuery('.images').after('<div id="imagesNav">')
		.cycle({ 
			fx:     'fade', 
			speed:  '300', 
			timeout: 400000,
			pager:  '#imagesNav' 
		});
	});
-->
Last Edit: 9 years 3 months ago by minhnv.
The administrator has disabled public write access.
Time to create page: 0.103 seconds