• 0
Sign in to follow this  
Followers 0

iboxes 5 on a single row, Not Responsive Anymore


Question

Posted · Report post

http://forum.pagelines.com/topic/32275-iboxes-5-on-a-single-row/ I am having an issue that came from a previous solution on this post. I am working on http://freshjuiceglobal.com . @JamesB helped me figure out how to get them all on one row, which worked out perfectly. The only issue is the iboxes are no longer responsive. How can I fix this?

 

I apologize If i shouldn't have started a new thread. I just didn't know if you'd see it if the question had already been answered.

Share this post


Link to post
Share on other sites

24 answers to this question

  • 0

Posted · Report post

Hi Bentley, 

 

If they're not acting responsively you'll need to set them to full width in the mobile version like in the standard DMS. Change the pixel figure to suit etc.

 

@media (max-width:930px) {
#iboxuny8mv .row .span2, .row-fluid .span2, .editor-row .span2 {
    width: 100%;
}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try changing it to 100% in the mobile view, this is usually how the mobile code displays in the core theme. Make sure you clear the mobile cache/cookies before viewing the page again to see the changes.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still no luck. This is the code im using:

 

@media (max-width: 100%) {
#iboxuny8mv .row .span2, .row-fluid .span2, .editor-row .span2 {
    width: 100%;
}
}
#iboxuny8mv .row .span2, .row-fluid .span2, .editor-row .span2 {
    width: 18%;
}
 
the 2nd code being the one you originally gave me to make it 5 columns 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah i see what you mean now you adjusted the figure in the @max-width, sorry I thought you had adjusted the figure in the bottom of the css. 

 

Leave that @max-width set to the mobile width you want the change to take affect at in px, but make sure max-width is set in the css for the row. For example I've just tested the below on my site and its showing the 5 columns in normal view, in mobile each goes full width.

 

Normal - http://screencast.com/t/ie5s7JoZay

Mobile - http://screencast.com/t/RvSifq2h

 

Css used

 

.row .span2, .row-fluid .span2, .editor-row .span2 {
    width: 18%;
}

@media (max-width:760px) { .row .span2, .row-fluid .span2, .editor-row .span2 {
    width: 100%;
}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B That worked perfectly! Thank you! I just have one more responsive question. On the home page i have a horizontal scroller with logos.. I designed EdwardsTechnologies.com the same exact way and the horizontal scroller on that website is responsive, but on FreshJuiceGlobal.com the scroller stays full width on mobile (you can scroll to the right for quite sometime and the scroller is the only part not responding). What is the problem?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bentley,

 

In your widget, the script/code added seems to have a set px width which is making it stay at that size when the screen resizes, change that 100% and it acts responsively. The div doesn't have a name so I'm assuming its something added manually inside the widget. I've made a screen cast to show you where it is it. Looks like the div with the inline styling is inside the table.

 

http://screencast.com/t/xTsrc9iKn

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I can't seem to find where you would add a div name.. Is there a way i can use a selector?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I found this on the plugin website in the comments

 

"I’ve made it responsive by including it in a DIV and then overiting the CSS with !important tags to width:100% etc. Hope it helps, it worked for me." 

 

Do you know how I can achieve this through pagelines?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bentley, in the code within that widget, you'll see the start of that inline css beginning with <div style' etc. You can assign a name to that div by adding a class name eg 'class="myclassname" in front of the rest of the code.

 

<div class="myclassname" place that at the beginning and leave the rest of the div as it is.

 

Then in the css you can use the class in the css/less panel to overrule using the !important command.

 

.myclassname {....;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B Would this need to be done in my FTP?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bentley, no you can edit this directly in the code for the scroller, it looks like this is code placed directly inside a widget? If it's a premade plugin, you'd need to look into the plugin code which you could access from the plugin editor.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where would I place it in the code?:
 
<?php
/*
Plugin Name: Image horizontal reel scroll slideshow
Description: Image horizontal reel scroll slideshow lets showcase images in a horizontal move style. This slideshow will pause on mouse over. The speed of the plugin gallery is customizable.
Author: Gopi.R
Version: 11.0
Tags: Horizontal, Image, Reel, Scroll, Slideshow, Gallery
License: GPLv2 or later
*/
 
global $wpdb, $wp_version;
define("WP_Ihrss_TABLE", $wpdb->prefix . "Ihrss_plugin");
define("WP_Ihrss_UNIQUE_NAME", "Ihrss");
 
if ( ! defined( 'WP_IHRSS_BASENAME' ) )
define( 'WP_IHRSS_BASENAME', plugin_basename( __FILE__ ) );
 
if ( ! defined( 'WP_IHRSS_PLUGIN_NAME' ) )
define( 'WP_IHRSS_PLUGIN_NAME', trim( dirname( WP_IHRSS_BASENAME ), '/' ) );
 
if ( ! defined( 'WP_IHRSS_PLUGIN_URL' ) )
define( 'WP_IHRSS_PLUGIN_URL', WP_PLUGIN_URL . '/' . WP_IHRSS_PLUGIN_NAME );
 
if ( ! defined( 'WP_IHRSS_ADMIN_URL' ) )
define( 'WP_IHRSS_ADMIN_URL', get_option('siteurl') . '/wp-admin/options-general.php?page=image-horizontal-reel-scroll-slideshow' );
 
function Ihrss() 
{
global $wpdb;
$Ihrss_package = "";
$Ihrss_title = get_option('Ihrss_title');
$Ihrss_sliderwidth = get_option('Ihrss_sliderwidth');
$Ihrss_sliderheight = get_option('Ihrss_sliderheight');
$Ihrss_slidespeed = get_option('Ihrss_slidespeed');
$Ihrss_slidebgcolor = get_option('Ihrss_slidebgcolor');
$Ihrss_slideshowgap = get_option('Ihrss_slideshowgap');
$Ihrss_random = get_option('Ihrss_random');
$Ihrss_type = get_option('Ihrss_type');
 
if(!is_numeric($Ihrss_sliderwidth)) { $Ihrss_sliderwidth = 500; }
if(!is_numeric($Ihrss_sliderheight)) { $Ihrss_sliderheight = 170; }
if(!is_numeric($Ihrss_slidespeed)) { $Ihrss_slidespeed = 1; }
if(!is_numeric($Ihrss_slideshowgap)) { $Ihrss_slideshowgap = 5; }
 
$sSql = "select Ihrss_path,Ihrss_link,Ihrss_target,Ihrss_title from ".WP_Ihrss_TABLE." where 1=1";
if($Ihrss_type <> ""){ $sSql = $sSql . " and Ihrss_type='".$Ihrss_type."'"; }
if($Ihrss_random == "YES"){ $sSql = $sSql . " ORDER BY RAND()"; }else{ $sSql = $sSql . " ORDER BY Ihrss_order"; }
 
$data = $wpdb->get_results($sSql);
 
$cnt = 0;
if ( ! empty($data) ) 
{
foreach ( $data as $data ) 
{
$Ihrss_path = trim($data->Ihrss_path);
$Ihrss_link = trim($data->Ihrss_link);
$Ihrss_target = trim($data->Ihrss_target);
$Ihrss_title = trim($data->Ihrss_title);
$Ihrss_package = $Ihrss_package ."IHRSS_SLIDESRARRAY[$cnt]='<a title=\"$Ihrss_title\"  target=\"$Ihrss_target\" href=\"$Ihrss_link\"><img alt=\"$Ihrss_title\" src=\"$Ihrss_path\" /></a>'; ";
$cnt++;
}
?>
<script language="JavaScript1.2">
var IHRSS_WIDTH = "<?php echo $Ihrss_sliderwidth."px"; ?>";
var IHRSS_HEIGHT = "<?php echo $Ihrss_sliderheight."px"; ?>";
var IHRSS_SPEED = <?php echo $Ihrss_slidespeed; ?>;
IHRSS_BGCOLOR = "<?php echo $Ihrss_slidebgcolor; ?>";
var IHRSS_SLIDESRARRAY=new Array();
var IHRSS_FINALSLIDE ='';
<?php echo $Ihrss_package; ?>
var IHRSS_IMGGAP = " ";
var IHRSS_PIXELGAP = <?php echo $Ihrss_slideshowgap; ?>;
</script>
<script language="JavaScript1.2" src="<?php echo WP_IHRSS_PLUGIN_URL; ?>/image-horizontal-reel-scroll-slideshow.js"></script>
<?php
}
else
{
_e('No images available in this Gallery Type. Please check admin setting.', 'ihrss');;
}
}
 
function Ihrss_install() 
{
global $wpdb;
 
if($wpdb->get_var("show tables like '". WP_Ihrss_TABLE . "'") != WP_Ihrss_TABLE) 
{
$sSql = "CREATE TABLE IF NOT EXISTS ". WP_Ihrss_TABLE . " (";
$sSql = $sSql . "Ihrss_id INT NOT NULL AUTO_INCREMENT ,";
$sSql = $sSql . "Ihrss_path TEXT CHARACTER SET utf8 COLLATE utf8_bin NOT NULL ,";
$sSql = $sSql . "Ihrss_link TEXT CHARACTER SET utf8 COLLATE utf8_bin NOT NULL ,";
$sSql = $sSql . "Ihrss_target VARCHAR( 50 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_title VARCHAR( 500 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_order INT NOT NULL ,";
$sSql = $sSql . "Ihrss_status VARCHAR( 10 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_type VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_extra1 VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_extra2 VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_date datetime NOT NULL default '0000-00-00 00:00:00' ,";
$sSql = $sSql . "PRIMARY KEY ( Ihrss_id )";
$sSql = $sSql . ") ENGINE=MyISAM  DEFAULT CHARSET=utf8;";
$wpdb->query($sSql);
 
$IsSql = "INSERT INTO `". WP_Ihrss_TABLE . "` (`Ihrss_path`, `Ihrss_link`, `Ihrss_target` , `Ihrss_title` , `Ihrss_order` , `Ihrss_status` , `Ihrss_type` , `Ihrss_date`)"; 
 
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/250x167_1.jpg', '#', '_blank', 'Image 1', '1', 'YES', 'GROUP1', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
 
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/250x167_2.jpg' ,'#', '_blank', 'Image 2', '2', 'YES', 'GROUP1', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
 
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/250x167_3.jpg', '#', '_blank', 'Image 3', '1', 'YES', 'Widget', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
 
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/250x167_4.jpg', '#', '_blank', 'Image 4', '2', 'YES', 'Widget', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
}
add_option('Ihrss_title', "Horizontal Slideshow");
add_option('Ihrss_sliderwidth', "600");
add_option('Ihrss_sliderheight', "170");
add_option('Ihrss_slidespeed', "1");
add_option('Ihrss_slidebgcolor', "#ffffff");
add_option('Ihrss_slideshowgap', "5");
add_option('Ihrss_random', "YES");
add_option('Ihrss_type', "Widget");
}
 
function Ihrss_control() 
{
echo '<p><b>';
_e('Image horizontal reel scroll slideshow', 'ihrss');
echo '.</b> ';
_e('Check official website for more information', 'ihrss');
?> <a target="_blank" href="<?php echo WP_Ihrss_FAV; ?>"><?php _e('click here', 'ihrss'); ?></a></p><?php
}
 
function Ihrss_widget($args) 
{
extract($args);
echo $before_widget . $before_title;
echo get_option('Ihrss_Title');
echo $after_title;
Ihrss();
echo $after_widget;
}
 
function Ihrss_admin_options() 
{
global $wpdb;
$current_page = isset($_GET['ac']) ? $_GET['ac'] : '';
switch($current_page)
{
case 'edit':
include('pages/image-management-edit.php');
break;
case 'add':
include('pages/image-management-add.php');
break;
case 'set':
include('pages/image-setting.php');
break;
default:
include('pages/image-management-show.php');
break;
}
}
 
add_shortcode( 'ihrss-gallery', 'Ihrss_shortcode' );
 
function Ihrss_shortcode( $atts ) 
{
global $wpdb;
 
$Ihrss = "";
$Ihrss_package = "";
 
// New code
//[ihrss-gallery type="GROUP1" w="600" h="170" speed="1" bgcolor="#FFFFFF" gap="5" random="YES"]
if ( ! is_array( $atts ) ) { return ''; }
$Ihrss_type = $atts['type'];
$Ihrss_sliderwidth = $atts['w'];
$Ihrss_sliderheight = $atts['h'];
$Ihrss_slidespeed = $atts['speed'];
$Ihrss_slidebgcolor = $atts['bgcolor'];
$Ihrss_slideshowgap = $atts['gap'];
$Ihrss_random = $atts['random'];
 
if(!is_numeric($Ihrss_sliderwidth)) { $Ihrss_sliderwidth = 250 ;}
if(!is_numeric($Ihrss_sliderheight)) { $Ihrss_sliderheight = 200; }
if(!is_numeric($Ihrss_slidespeed)) { $Ihrss_slidespeed = 1; }
if(!is_numeric($Ihrss_slideshowgap)) { $Ihrss_slideshowgap = 5; }
 
$sSql = "select Ihrss_path,Ihrss_link,Ihrss_target,Ihrss_title from ".WP_Ihrss_TABLE." where 1=1";
if($Ihrss_type <> ""){ $sSql = $sSql . " and Ihrss_type='".$Ihrss_type."'"; }
if($Ihrss_random == "YES"){ $sSql = $sSql . " ORDER BY RAND()"; }else{ $sSql = $sSql . " ORDER BY Ihrss_order"; }
 
$data = $wpdb->get_results($sSql);
 
$cnt = 0;
if ( ! empty($data) ) 
{
foreach ( $data as $data ) 
{
$Ihrss_path = trim($data->Ihrss_path);
$Ihrss_link = trim($data->Ihrss_link);
$Ihrss_target = trim($data->Ihrss_target);
$Ihrss_title = trim($data->Ihrss_title);
$Ihrss_package = $Ihrss_package ."IHRSS_SLIDESRARRAY[$cnt]='<a title=\"$Ihrss_title\" target=\"$Ihrss_target\" href=\"$Ihrss_link\"><img alt=\"$Ihrss_title\" src=\"$Ihrss_path\" /></a>'; ";
$cnt++;
}
 
$Ihrss_pluginurl = get_option('siteurl') . "/wp-content/plugins/image-horizontal-reel-scroll-slideshow/";
 
$Ihrss = $Ihrss .'<script language="JavaScript1.2">';
$Ihrss = $Ihrss .'var IHRSS_WIDTH = "'.$Ihrss_sliderwidth.'px"; ';
$Ihrss = $Ihrss .'var IHRSS_HEIGHT = "'.$Ihrss_sliderheight.'px"; ';
$Ihrss = $Ihrss .'var IHRSS_SPEED = '. $Ihrss_slidespeed.'; ';
$Ihrss = $Ihrss .'var IHRSS_BGCOLOR = "'.$Ihrss_slidebgcolor.'"; ';
$Ihrss = $Ihrss .'var IHRSS_SLIDESRARRAY=new Array(); ';
$Ihrss = $Ihrss .'var IHRSS_FINALSLIDE =" "; ';
$Ihrss = $Ihrss .$Ihrss_package;
$Ihrss = $Ihrss .'var IHRSS_IMGGAP = " "; ';
$Ihrss = $Ihrss .'var IHRSS_PIXELGAP = '.$Ihrss_slideshowgap.'; ';
$Ihrss = $Ihrss .'</script>';
$Ihrss = $Ihrss .'<script language="JavaScript1.2" src="'.$Ihrss_pluginurl.'/image-horizontal-reel-scroll-slideshow.js"></script>';
}
else
{
$Ihrss = $Ihrss . __('No images available in this Gallery Type. Please check admin setting.', 'ihrss');
}
return $Ihrss;
}
 
function Ihrss_add_to_menu() 
{
if (is_admin()) 
{
add_options_page(__('Image horizontal reel scroll slideshow', 'ihrss'), 
__('Image horizontal reel scroll slideshow', 'ihrss'), 'manage_options', "image-horizontal-reel-scroll-slideshow", 'Ihrss_admin_options' );
}
}
 
function Ihrss_init()
{
if(function_exists('wp_register_sidebar_widget')) 
{
wp_register_sidebar_widget('Image-horizontal-reel-scroll-slideshow', __('Image horizontal reel scroll slideshow', 'ihrss'), 'Ihrss_widget');
}
 
if(function_exists('wp_register_widget_control')) 
{
wp_register_widget_control('Image-horizontal-reel-scroll-slideshow', array(__('Image horizontal reel scroll slideshow', 'ihrss'), 'widgets'), 'Ihrss_control');
}
 
function Ihrss_deactivation() 
{
// No action required.
}
 
function Ihrss_textdomain() 
{
 load_plugin_textdomain( 'ihrss', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
 
add_action('plugins_loaded', 'Ihrss_textdomain');
add_action('admin_menu', 'Ihrss_add_to_menu');
add_action("plugins_loaded", "Ihrss_init");
register_activation_hook(__FILE__, 'Ihrss_install');
register_deactivation_hook(__FILE__, 'Ihrss_deactivation');
?>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B Do you have any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bentley, sorry i never got a notification for the first post so just seen this.

 

Unfortunately I don't know enough php wise to be able to advise on that, I can't even see the div/code that's currently present on the site in there.

 

I would say the best option there would be to drop the plugin author an email and say you want to add a class name to that div and see if they can tell you exactly which line edit.

 

Sorry :-(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've looked through the html as best possible as that plugin is providing a lot of markup, the only differences I can see if that the site which works is showing additional code for that section. It looks like there are additional classes being provide inside a list within the widget. Have you set both of these up exactly the same on the both sites?

 

Screenshot http://screencast.com/t/CFHl8VtFj

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B I just went through everything again and there is absolutely nothing different with the setup...

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

James B What is the section used on the http://www.pagelines.com/ homepage that allows the images to scroll? I could just use whatever that is and it would solve all my problems.

Edited by BentleyD

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bentley 

 

I've just checked with the dev team, that section was a custom section created for Pl.com, its not available as part of the core. I've left a message to see if this is something they've planned a release for, as soon as I hear back from them I'll update.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0