: DIV tags show black marks in mobile mode
: tango7 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...

: Re: DIV tags show black marks in mobile mode
: mikenicoll 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:

s5_info_slide.css - line 748

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

: Re: DIV tags show black marks in mobile mode
: tango7 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]

: Re: DIV tags show black marks in mobile mode
: mikenicoll 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.

 <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,

Shape 5

Joomla Templates => No1 Shopping - Club => : tango7 June 01, 2015, 01:17:22 PM