Forum
Membership Area
Joomla Templates
OT Juno
how to solve too much "space" in mobile layout view

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.
Forum
Membership Area
Joomla Templates
OT Juno
how to solve too much "space" in mobile layout view
Time to create page: 0.103 seconds