Forum Support

Shape 5
March 28, 2024, 02:23:31 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: DIV tags show black marks in mobile mode  (Read 408 times)
tango7
Jr. Member
**
Offline Offline

Posts: 50



« on: June 01, 2015, 01:17:22 PM »

I have grabbed some code from the template and used it align some items instead of using Tables.

In desktop mode everything looks fine but in mobile mode, the tops of the items have a bold black mark similar to those used when using the <h2> tag.

If you look at: http://www.worktopscheltenham.co.uk/index.php

Then look at the text headers that begin with Expert Advice and Family Run Business, the two columns look fine but on a mobile, they have big black header marks and I don't know what is generating them based upon the <div> attributes I've used.

I know I've grabbed code from another section of the template, and used it most probably incorrectly, but as I don't know how to use the DIV tags to create the responsive version of what tables did, I have had to use what I can...
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: June 01, 2015, 04:13:38 PM »

Hello,

You can either remove the coding that applies the S5 Info Slide overlay effect to them or modify the background call here:

Code:
s5_info_slide.css - line 748

.s5_is_css_wrap_5 {
    background: #000000 none repeat scroll 0 0;
    padding-bottom: 1%;
    position: relative;
}
Logged

Mike Nicoll
------------
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
tango7
Jr. Member
**
Offline Offline

Posts: 50



« Reply #2 on: June 02, 2015, 10:51:45 AM »

I edited the css file as suggested but the black boxes still appear in mobile view or when I shrink the browser window.

The code I have at the beginning of the section is shown below but which bit do I remove to get rid of the black boxes ?:

<div id="s5_top_row2_area1">
   <div id="s5_top_row2_area2">
      <div id="s5_top_row2_area_inner" class="s5_wrap">
         <div id="s5_top_row2_wrap">
            <div id="s5_top_row2">
               <div id="s5_top_row2_inner">
                  <div id="s5_pos_top_row2_1" class="s5_float_left" style="width: 50%;">
                     <div class="module_round_box_outer">
                        <div class="module_round_box">
                           <div class="s5_module_box_1">
                              <div class="s5_module_box_2">
                                 <div class="s5_outer">
                                    <div class="custom" style="text-align: justify;">
                                       <div class="s5_is_css_wrap_5">
                                          <div class="s5_is_css_hidden"><a href="#">[/url]
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: June 03, 2015, 05:24:13 PM »

Hello,

The black boxes appear because your image is proportionately scaling width wise so it doesn't appear stretched or distorted. Removing the background code from the area I mentioned above would only remove the "black" part but still have a blank space in it's place. Removing this part below should remove the entire info slide script though.

Code:
<div class="s5_is_css_wrap_5">
<div class="s5_is_css_hidden"><a href="#">[/url]

The black boxes are appearing due to the default styling of the Info Slides but you do not have any pictures on content inside of them so they just appear as small boxes.

Regards,
Logged

Mike Nicoll
------------
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.