What's wrong?

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



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



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?

 

I don't see what you're seeing. It shows fine on my cellphone. Maybe you need to clear cookies.

The problem I saw is this:

https://www.furniturefinder.biz/furniture/brand/ - this link will show

https://www.furniturefinder.biz/furniture/brand - this will show "page not found" just because the last slash forward is missing. You probably want to fix that.

 

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 friendlyhttps://www.furniturefinder.biz/furniture/merchant/)


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

Same CSS and html.

 

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

 

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%