Public Forums 71,145 posts

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#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;
}

1 user says Thank You to chavan for this useful post

1. Richard A

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#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?

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#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 Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#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 chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#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.

1 user says Thank You to chavan for this useful post

1. Richard A

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#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?

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#532109

Add this code to custom.css

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

}

1 user says Thank You to chavan for this useful post

1. Richard A

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#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. 🙂

[Author]

Posts