Jump to content

Layout wonky in Chrome upon migrating to production server


Recommended Posts

I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd

What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.

Thanks a lot.

Link to comment
Share on other sites

Looks normal  on Safari and Chrome on a Mac (10.11.6).  There seems to be a slight problem with the display on Firefox with the copyright showing under some content.

Can you please provide at least a screenshot of what you think is wrong, so we have an idea of what problem you are seeing?

Any other information that you can provide would be helpful for someone to help you.


  • Like 1
Link to comment
Share on other sites

3 hours ago, hellomoto said:

I just reloaded the page (although I had a number of times just before that last update above, but minutes ago) and now it looks fine. Gosh =\

I'm asking out of curiosity; did you also try Chrome's "Empty Cache and Hard Reload" feature? e.g.: http://www.thewindowsclub.com/empty-cache-hard-reload-chrome

I found that Chrome often needs it in similar situations to yours.

Link to comment
Share on other sites

That's the thing though, it keeps flip flopping, at least for me. Has anybody gotten this result: http://imgur.com/BmLrfP3 ? This doesn't happen on my development instance. 

Szabesz, I tried the hard reload but couldn't find the option on Mac; I hit cmd+shift+R and thought that does it. Just can't be sure.

Interesting addendum: lays out legit upon resizing the window...

Link to comment
Share on other sites

30 minutes ago, hellomoto said:

Has anybody gotten this result: http://imgur.com/BmLrfP3 ?

I have just checked in Safari 9.1.1 and it is like your screenshot. It might be a CSS/JS compatibility issue, some sort of edge-case situation that might be hard to track down, I suppose. Anyway, after I update the viewport by resizing it, the background pops into place.

Link to comment
Share on other sites

29 minutes ago, szabesz said:

I have just checked in Safari 9.1.1 and it is like your screenshot. It might be a CSS/JS compatibility issue, some sort of edge-case situation that might be hard to track down, I suppose. Anyway, after I update the viewport by resizing it, the background pops into place.


6 hours ago, hellomoto said:

Edit: Now it's not, again. Haven't made any changes since the original upload. Here's a screen capture of what's really going wrong: http://imgur.com/BmLrfP3

Any clue or idea? 

That's the same result I got originally with Firefox.  When I refreshed, it then displayed correctly.

  • Like 1
Link to comment
Share on other sites

As a hint...

Masonry calculates the height for the div#portfolio wrong with height:40px;(inspect it in Chrome) and that's probably because the height of the images are not given or not known at the time of rendering.
IIRC there is a workaround somewhere in the masonry docs to counteract that.

The moment masonry rearranges the elements it calculates and refreshes all the dimensions, and all looks fine.

Edit: http://masonry.desandro.com/layout.html#imagesloaded


  • Like 3
Link to comment
Share on other sites

The same behavior described by @Klenkes happen to isotope too and for sure this is your issue. As exemple, isotope in his version 3 is not bundled with imagesLoaded; so we have to link imagesLoaded and initialize it as parent of isotope elements.


var $parent = $('#grid-parent');
var $grid = $('#grid');
$parent.imagesLoaded( function() {


38 minutes ago, Klenkes said:


  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...
5 hours ago, hellomoto said:

(If anyone does observe my layout still misbehaving please do inform me.)

mhh... still doesn't work in Chrome.
In fact Chrome says: $grid.imagesLoaded is not a function, and I couldn't find the imagesLoaded javascript anywhere...

I once dealt with Masonry and the trick was to specify image dimensions with the img tag.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
    • By Zendex
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
      <!doctype html>
      <meta charset="UTF-8">
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
          <div class="main"></div>
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      body {
          line-height: 1;
          background-color: #6A6969;
      ol, ul {
          list-style: none;
      blockquote, q {
          quotes: none;
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      table {
          border-collapse: collapse;
          border-spacing: 0;
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
          color: white;
          height: 125px;
          background-color: #6A6969;
          color: white;

    • By milo695
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By longtom
      I'm creating this site where a 'motherpage' renders all subpages.  I switched on frontend editing to make editing as easy as possible to end-users. 
      I'm stuck on adding images to the subpages.  The frontend editor suggests to add images to the motherpage (that has no images field on it, nor should it), so it asks for another page to add the images to/from. 
      Is there a way to make the frontend-editor context aware so that it looks for images in the correct subpage? 
      I already tried the 'type C' approach and added <edit field="body" page="id">, but that doesn't seem to do the trick. 
  • Create New...