How to increase the slideshow position space to the end

infocubic

Hi,

aman204

1) You can disable the specific module assigned to features-banner position. To get a visual indication of all module positions used on a page along with modules being assigned, you can follow the procedure outlined here

2) After disabling the module named Banner 1 and Banner 2 in module manager, You can upload images of larger width as given in screenshot for module titled [Features] Slideshow

You may also refer to documentation which would help you build default Joomla pages the same as JA Megastore demo site along with giving clear insights as to how specific modules have been configured for the demo site 🙂

pavit

Hi infocubic

Edit this file /templates/ja_megastore/tpls/blocks/t3-features-intro.php and find in it

if($this->countModules('navbar-category')) {
	$colFeatures = "col-lg-offset-3 col-md-12 col-lg-9";

Change it to

if($this->countModules('navbar-category')) {
	$colFeatures = "col-lg-offset-3 col-md-12 col-lg-12";

Regards

infocubic

pavit
I have updated as you suggested, but still not expended. Pls check and let me know the steps how to do.

saguaros

infocubic
Hi,

You don't need to change in code, you can access backend of your site > Extensions > Modules > filter module called '[Spotlight] Features Intro' in t3-features-intro position.

Then remove the row which renders the banner and keep the slideshow only.

Finally, set width for all screens to 12 grids: http://prntscr.com/jnx149

Regards

infocubic

saguaros

Thank you for your guidence. I have done as you suggested, it is working fine but in tablet view and mobile view the image is not coming properly. Pls see attached screenshot and suggest me.

aman204

infocubic Try add this to custom.css file and adjust height value accordingly :

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {.t3-features-intro .acm-slideshow img{height: 580px !important;}} /* for tablets */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {.t3-features-intro .acm-slideshow img{height: 280px !important;}} /* for phones */

infocubic

aman204

I have updated the code in to custom.css as you suggested but still the same problem.

aman204

infocubic I have updated the code in to custom.css as you suggested but still the same problem.

Appears fine now for me. Ref: Screenshot taken for varied screen-sizes (Phone and Tablet)

Kindly ensure to clear your browser cache if changes dont reflect

Or, If you are wishing to have the specific module seen some other way in responsive mode, Please provide screenshot marked with annotations as to how you wish to have it seen?

infocubic

aman204

I have checked in the mobile device vertically it is coming correctly, when i rotate the display horizontal mode is not coming properly. Pls see the screen shot taken on mobile.

aman204

infocubic I have checked in the mobile device vertically it is coming correctly, when i rotate the display horizontal mode is not coming properly.

Try change this :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {.t3-features-intro .acm-slideshow img{height: 280px !important;}} /* for phones */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {.t3-features-intro .acm-slideshow img{height: 280px !important;}} /* for phones in both landscape and portrait mode */

or add this specifically for landscape mode :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {.t3-features-intro .acm-slideshow img{height: 280px !important;}}

However, From my point of view, There are hardly mobile users who view in landscape mode (with the phone held horizontally). Primarily, The elements should appear fine for varied screen sizes in responsive mode in portrait orientation which is commonly used at certain breakpoints and that should be the key 🙂