Remove top and bottom padding in Slideshow Lite module - JoomlArt
30% OFF for JA Developer. Coupon: JADEV30 Buy Now
League Bundle $1335 $599 Read More
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • chavan Friend
    #531779

    Go to this File: templatespurity_iiicsslayoutscorporate.css

    Replace this code

    .corporate .slideshow {
    background: #f7f7f7 ;
    border-bottom: 1px solid #eeeeee ;
    padding: 40px 0;
    }

    With

    .corporate .slideshow {
    background: #f7f7f7 ;
    border-bottom: 1px solid #eeeeee ;
    padding: 0;
    }

    Richard A JATCJAEC
    #531797

    Perfect Chavan, thank you for the quick response and fixing the problem, much appreciated. 🙂

    I also changed the border-bottom px value from 1 to 0 to make it blend into the masthead section (see image below):

    .corporate .slideshow {
    background: #f7f7f7
    border-bottom: 0 solid #eeeeee
    padding: 0;
    }

    I am not using thumbnails so not an issue for me but I noticed if the thumbnails are switched on (60px square per thumbnail) a padding gap appears below the slideshow, how would that be removed if others reading this thread wanted to use thumbnails?


    1. afterchanges
    chavan Friend
    #531839

    All slideshow is not good at mobile Layout. so we suggest not to use that. If you still need it, let me know. will post a css suggestion.

    Richard A JATCJAEC
    #531939

    If you could post a css suggestion please, that would be very helpful, thank you.

    As requested in the ‘Text Box on Slideshow image’ thread, I checked the Slideshow position in the Corporate layout in Purity 3 template administration and it is set to ‘Visible’, but as the Slideshow block code hides the slideshow on mobile by default, it can be changed to visible by removing the word ‘hidden-xs’ on line 13 of templates/purity_iii/tpls/blocks/slideshow.php:

    <div class="slideshow hidden-xs <?php $this->_c('slideshow') ?>">

    I made the change to show you how the slideshow currently appears on mobile but will cancel it if required when you post the css suggestion.

    chavan Friend
    #532018

    Create a custom.css file using this documentation http://t3-framework.org/documentation/bs3-customization#custom-css

    Add this code to custom.css


    .ja-ss-item{
    min-height:140px !important;
    }

    Also we need to do further more customization. but what i suggest is to hide the connect heading and the text in the slideshow description. so we will leave the signup left to click on it. This would be good on all tablets and mobile.

    Richard A JATCJAEC
    #532098

    Thank you Chavan, I added the code to the Purity 3 custom.css file and it removes the white space between the slideshow and the masthead section below it.

    I accept your advice to remove the Connect heading and text is very good for mobile display, so looked for an alternative option to maintain the message on all devices and found one that works as follows:

    Step 1 = Remove the background for the text/button area.
    Step 2 = Remove the heading and text from the Slideshow Lite module, leaving only the button code
    Step 3 = Change the content of the button from ‘Sign Up’ to a short version of the message in the text that has been removed
    Step 4 = Align the button to left or centre (‘center’ for coding) as required
    Step 5 = Make the button adjust size correctly for mobile (portrait and horizontal screen display)

    The text/button position is set to ‘absolute’ in the modules/mod_jaslideshowlite/assets/css/mod_jaslideshowlite.css file so I changed top to 60% (from 48%), keeping the adjusted width at 25% (from 60%) to find a place on the slideshow that the button worked on portrait and horizontal screen display for mobiles. I also set the background to ‘none’ to complete step 1.

    .ja-ss-desc {
    position: absolute;
    left: 20px;
    top: 48%; (change to 60% to get correct position for mobile portrait view)
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 60%; (change to 25% to reduce box size)
    padding: 10px;
    color: #000
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    -webkit-border-radius: 2px; /* Android = 1.6, iOS 1-3.2, Safari 3-4 */
    border-radius: 2px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    background-clip: padding-box;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);/* For IE 5.5 - 7*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";/* For IE 8*/
    background: rgba(255,255,255,.7);/* Modern browser */ (change background to 'none')
    }

    (The adjustments probably should be made in Purity 3 template custom.css but I have left them in this file in the meantime).

    However the button runs off the side of the screen in portrait mobile mode if text is too long, as the text does not auto adjust to a new line within the button and/or the button is not reacting 100% responsively.

    Is there a way to correct this?


    1. mobileportraitdisplay
    2. mainslideshow
    chavan Friend
    #532109

    Add this code to custom.css

    @media screen and (max-width: 480px) {
    .btn-actions .btn-lg{
    font-size:12px !important;
    }

    }

    Richard A JATCJAEC
    #532114

    Perfect Chavan, thank you for all your help, really appreciated!

    It looks good on all devices and is very clean on mobile, I will add the other slides to finish off the slideshow.

    Super support. 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

This topic contains 8 replies, has 2 voices, and was last updated by  s.freimanis 3 years, 2 months ago.

The topic ‘Remove top and bottom padding in Slideshow Lite module’ is closed to new replies.