Jump to content


Photo
- - - - -

iboxes 5 on a single row, Not Responsive Anymore

iboxes single row responsive

  • Please log in to reply
24 replies to this topic

#1 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 10 January 2014 - 10:50 PM

http://forum.pagelin...n-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.



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 January 2014 - 12:53 AM

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


#3 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 13 January 2014 - 05:36 PM

@James B Hey James, I've tried changing the max-width from 300px to 1200px with no change. Once it's mobile size, the icons get all strangely formatted like so.. http://freshjuiceglo...-9.35.15-AM.png



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 January 2014 - 11:22 PM

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.



#5 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 13 January 2014 - 11:55 PM

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 


#6 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 14 January 2014 - 12:21 AM

@James B



#7 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 January 2014 - 08:28 AM

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



#8 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 14 January 2014 - 05:15 PM

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



#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 January 2014 - 01:18 AM

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



#10 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 15 January 2014 - 05:35 PM

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



#11 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 15 January 2014 - 05:54 PM

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?



#12 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 15 January 2014 - 06:34 PM

@James B



#13 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 January 2014 - 01:43 AM

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 {....;}



#14 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 16 January 2014 - 05:11 PM

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



#15 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 January 2014 - 10:46 PM

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.



#16 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 16 January 2014 - 11:02 PM

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');
?>


#17 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 20 January 2014 - 05:30 PM

@James B



#18 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 23 January 2014 - 05:16 PM

@James B Do you have any ideas?



#19 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 January 2014 - 08:11 AM

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 :-(



#20 BentleyD

BentleyD

    Super Member

  • Members

  • 137 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 24 January 2014 - 05:24 PM

@James B What I don't understand is why http://edwardstechnologies.com it's fully responsive and works great and its set up exactly the same as http://freshjuiceglobal.com. Same pagelines, same plugin?







Also tagged with one or more of these keywords: iboxes, single row, responsive