1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What's wrong?

Discussion in 'HTML & Website Design' started by Karolwf, May 7, 2018.

  1. #1
    This page is not mobile friendly: Content wider than screen
    https://www.furniturefinder.biz/furniture/brand/

    brands.PNG

    And this page is mobile friendly:
    https://www.furniturefinder.biz/furniture/merchant/
    SEMrush
    merchant.PNG

    They have the same CSS and html code.

    Here is code for the table:
    <div id='atoz'>
    <?php
      $columns = 3;
    
      $columnWidth = intval(100/$columns);
    
      $currentLetter = "";
    
      $currentColumn = 0;
    
      print "<table id='atozTable'>";
    
      print "<tr>";
    
      foreach($atoz["items"] as $item)
      {
        $firstLetter = strtoupper(substr($item["name"],0,1));
    
        if ($firstLetter <> $currentLetter)
        {
          if ($currentLetter)
          {
            print "</ul></td>";
    
            if ($currentColumn == $columns)
            {
              print "</tr>";
    
              print "<tr>";
    
              $currentColumn = 0;
            }
          }
    
          print "<td>";
    
          $currentColumn++;
    
          print "<h4>".$firstLetter."</h4><ul>";
    
          $currentLetter = $firstLetter;
        }
            if (strlen($item["name"])>150)
            {
            print "<li><a href='".$item["href"]."' title='".ucwords(strtolower($item["name"]))."'>".ucwords(strtolower(substr($item["name"],0,100)))."...</a></li>";
            } else {
            print "<li><a href='".$item["href"]."' title='".ucwords(strtolower($item["name"]))."'>".ucwords(strtolower($item["name"]))."</a></li>";
            }
      }
    
      print "</ul></td>";
    
      print "</tr>";
    
      print "</table>";
    
      print "</div>";
    ?>
    
    </div>
    
    Code (markup):
    What's wrong?
     

    Attached Files:

    Last edited: May 7, 2018
    Karolwf, May 7, 2018 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,459
    Likes Received:
    1,017
    Best Answers:
    19
    Trophy Points:
    400
    #2
    qwikad.com, May 7, 2018 IP
  3. Karolwf

    Karolwf Active Member

    Messages:
    106
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    70
    #3
    Yes, link was incorrect:
    Correct is (with slash):
    https://www.furniturefinder.biz/furniture/brand/

    These images are screenshots from Google Developer Tools for iPhone6/7/8 Plus.

    Also Google Mobile Friendly Test says: Page is not mobile friendly
    https://search.google.com/test/mobi...x&utm_campaign=suit&id=MggdVBoaHv_LjCAgmnAmmg

    and Mobile friendly:(https://www.furniturefinder.biz/furniture/merchant/)


    https://search.google.com/test/mobi...x&utm_campaign=suit&id=7Sb2K5YvIvDu8RNJEQXH-A

    Same CSS and html.
     
    Karolwf, May 7, 2018 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,399
    Likes Received:
    347
    Best Answers:
    26
    Trophy Points:
    335
    #4
    Instead of posting the php code, post the html outputs. Easier for us to parse. You don't want to make things difficult for those wanting to help.

    These are not table data. It is an ordered list plus sublists and should be coded as such. Use css to not show the default ordering. Write css for each sublist as inline-block, and it will automagically cause new lines once the breakpoint is reached. Tables must maintain their internal integrity; if a row is too long, tough.

    gary
     
    kk5st, May 7, 2018 IP
  5. Karolwf

    Karolwf Active Member

    Messages:
    106
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    70
    #5
    Thanks.
    I see where is the problem.
    I have to add to CSS:
    #table td{display:inline-block; text-align-left; width:45%}
    And I have just 2 columns for mobile screen or just 1 column with width: 100%
     
    Karolwf, May 7, 2018 IP