Skip to main content
Gareth_Williams
Gareth_Williams
Inspiring
June 6, 2021
Answered

Why Does Chrome Display My Layout Wrongly?

  • June 6, 2021
  • 2 replies
  • 1253 views

Hii everybody, does anybody know why my website layout displays wrongly in Chrome but correctly on Firefox? It’s a pretty simple layout. The Chrome display narrows the columns at the sides and widens the cells in the middle so there are spaces between the pictures. This does NOT happen in Firefox or Safari.

 

The layout is basically 8 columns equalling 980px width in total. 65,25,200,200,200,200,25,65. As you can see (website link below) Chrome narrows the 65px columns at the edges and widens the 200px columns in the middle for reasons I can’t work out.

 

http://www.maximum-robot.co.uk/

 

Thanks for any help.
Gareth

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Then do yourself and your band a favor and hire an experienced web developer to help you.

     

    Responsive web design is not optional and nothing new.  It has been around since 2012.  And it's NOT about building separate pages for specific devices. It's about building layouts that fit a wide range of device widths from small mobile to big screen TVs, usually with frameworks like Bootstrap. 

     

     

    2 replies

    Nancy OShea
    Nancy OShea
    Adobe Expert
    June 6, 2021

    I'm afraid "browser variation" is the least of your worries. 

     

    The average shelf-life of a site these days is 3-5 years.  Clearly your current site has far exceeded that limit and it shows.  This site needs to be rebuilt to modern web standards.

     

    Among other things, table-based layouts are NOT responsive.  On hi-res displays, 980px looks like a postage stamp floating in the Atlantic ocean. And 980px doesn't fit small devices.  So you're alienating users on both spectrums and all parts in between. Bad enough to be sure but Google is penalizing you for not having a "mobile-friendly" site.  See report below.

    https://search.google.com/test/mobile-friendly?id=rKKJUizzrTovJ2dtGrvYRQ

     

    Misstep #2 is not having HTTPS connections.  There's no excuse for not having a secure server anymore.  GoDaddy offers SSL/TLS certs.  Or you can get FREE low level certs from Let's Encrypt or Cloudflare and install them yourself.   Secure connections are a "must have."

    https://www.whynopadlock.com/results/beaab99a-fdfb-4d96-bdd4-d2b5709478b7

     

     

    Start your responsive site with one of the built-in Bootstrap Starter Templates in DW CC.  File > New > Starter Templates > Bootstrap Templates.  Choose a layout and hit the Create button.

     

    Read chapters, do code exercises and take quizzes at the end.
    - https://www.w3schools.com/html/
    - https://www.w3schools.com/css/
    - https://www.w3schools.com/js/

    - https://www.w3schools.com/bootstrap4/

     

    Nancy O'Shea— Product User, Community Expert & Moderator
    Gareth_Williams
    Gareth_WilliamsAuthor
    Inspiring
    June 8, 2021

    Thanks Ben & Nancy, I didn't see this until now because the reply notifiction went into my spam for some reason. I have (sort of) solved the issue by breaking the text with a paragraph. For some reason Chrome caused the text to push the cell longer. This fix wouldn't work if there was more text but as it's only two lines I can get away with it! As for the other issues I would prefer not to spend any time on these matters. Though I appreciate that it would look better on many devices if I did. Redesigning it for the latest technology would be a never ending task as devices and browsers are forever changing. I think we need to focus on the music! Thanks again for your help.

    Nancy OShea
    Nancy OSheaCorrect answer
    Adobe Expert
    June 8, 2021

    Then do yourself and your band a favor and hire an experienced web developer to help you.

     

    Responsive web design is not optional and nothing new.  It has been around since 2012.  And it's NOT about building separate pages for specific devices. It's about building layouts that fit a wide range of device widths from small mobile to big screen TVs, usually with frameworks like Bootstrap. 

     

     

    Nancy O'Shea— Product User, Community Expert & Moderator
      BenPleysier
      BenPleysier
      Adobe Expert
      June 6, 2021

      Try adding reset.css to your page: https://meyerweb.com/eric/tools/css/reset/

       

      Having said that, tables are for tabular data, not for layouts.

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices