Forum Support

Shape 5
March 28, 2024, 04:55:42 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Top Image Boxes  (Read 698 times)
studeno
Jr. Member
**
Offline Offline

Posts: 45



« on: February 25, 2016, 01:42:01 PM »

Okay, definitely feeling slow today....

Top Image Boxes do not appear as in demo. Each takes full width and they stack on top of each other.  I have a screen shot. I've been trying to go step by step to see where it breaks down.... at the first step!
Tried publishing in a different position, makes no difference. Nothing else is published in top row 1 1 position.
Tried using different editors to post the code in.... nope.
Sigh....

Appreciate any help.

John
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: February 26, 2016, 08:24:26 AM »

Hello,

The code needs to be exactly how it's shown on this page:

http://www.shape5.com/demo/business_line/index.php/tutorials-menu-48/custom-code-for-this-design

Each box is set to 25% width by default, so as long as the code matches that they will show inline.

Also, please post a url to your site.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
studeno
Jr. Member
**
Offline Offline

Posts: 45



« Reply #2 on: February 26, 2016, 01:43:22 PM »

Hi again

Thanks for the reply. I have used the code exactly as shown on that page.
I've published the module again on this page:
http://www.heathercurnew.ca/events/training-workshops

The image in the first box is actually the exact same size in pixils as the real estate taken up by an image in your demo. For some reason it's being stretched out to full width.

I have tried to set up the module using the default non-wysiwyg editor, using code mirror, and it doesn't make any difference. I have posted the exact same code as the demo and changed nothing except the four box titles, but they still stack down the page.
I can't see a place in the code for a width of 25% - it seems like finding that could fix the problem, 'cos it looks like it's set to 100%.

Appreciate the help.

John

Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: February 27, 2016, 08:09:13 AM »

Hello,

The code isn't matching what is on the link I gave above. I think there is an unclosed div either in that module or in another area of the template. If you can private message me super admin access and ftp access I can debug it.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #4 on: February 27, 2016, 08:17:02 AM »

Hello,

Actually, I think I found the problem. Can you try using this code instead?


<div class="image_boxes_wrap">
<div class="image_boxes_wrap_inner">

   <div class="image_boxes_row">
   
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-features/responsive-layout">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top1.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Responsive</h3>
            

            <span>You can easily adapt your site to any screen size or device. Simply resize your screen to see it all in action.</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-features/responsive-layout">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-specific-features">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top2.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Flexible</h3>
            

            <span>This design comes with options like multiple menus, highlight colors, Google Fonts, dozens of positions, and more.</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div style="clear:both:height:0px;"></div>
   </div>

   <div class="image_boxes_row">
   
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/extensions/s5-image-and-content-fader">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top3.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Extensions</h3>
            

            <span>This month we also are launching the new Image and Content Fader V4, now with an article integration method.</span>
            

            <a class="readon" href="index.php/extensions/s5-image-and-content-fader">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-specific-features">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top4.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Technology</h3>
            

            <span>This design is built on the powerful Vertex4 template framework, which makes setting up your site quick and easy!</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div style="clear:both:height:0px;"></div>
   </div>

   <div style="clear:both:height:0px;"></div>
</div>
</div>
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
studeno
Jr. Member
**
Offline Offline

Posts: 45



« Reply #5 on: March 02, 2016, 07:10:52 PM »

Works! Thanks Mike. Was it me?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #6 on: March 03, 2016, 08:20:24 AM »

Hello,

No, some of the code didn't copy right on the custom code page.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.