Jump to content
hellomoto

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Strange issue, indeed! It seems to be ok in my Chrome though. However, it is such a "strange desing", that it is hard to tell whether what I see is intentional or not. At least the backgoung and the footer look ok.

Share this post


Link to post
Share on other sites

Okay szabesz it's not that strange though. I provided screenshots of right and wrong way if you're uncertain. :)

  • Like 1

Share this post


Link to post
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...

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

eg:

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

 

38 minutes ago, Klenkes said:

 

  • Like 2

Share this post


Link to post
Share on other sites

It's weird if I refresh the page it doesn't seem to do any good unless I reload via clicking the site title.

BUT thank YOU flydev, that seems to be the trick indeed! Good lookin' out.

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

  • Like 1

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

Ok gotcha, I just noticed it screwing up again. It's included now and seems to help the situation. Thank you very much :)

Share this post


Link to post
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 Greg Lumley
      Hi! In busy learning to know PW better I'm looking at existing code.
      I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 
      <link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" /> I hope it's not a stupid question but I've never seen this before...
      main.css?ts=<?= time() ?> I notice the main template is empty but of course renders on the front end.
      Using a timestamp really has me totally confused. Can someone explain it to me please. 
      Thank you! 
      Greg
    • By rushy
      Hi all
      Continuing my first project where I am creating and manipulating stuff from the frontend. Till now I've always added things like images from the backend, but in this project I need to add and move images from a frontend control. This is a photo album where images are stored in albums, each album being a page containing a Pageimages array in the usual way. So what I want to know is how do I move an image from one album (page) to another in the frontend? I just need some guidance on how to approach this.  I suppose I need to do a copy and delete - but how do I copy an image or images from one page to another? What function should I use to create a new image on an existing page? I include a code snippet from the server side of my delete image request and it works fine. I'd like to implement something similar for a move and upload new image request. 
      Many thanks for any help. Paul 
      <?php namespace ProcessWire; // sanitize inputs as 1-line text $action = $sanitizer->text($input->post('action')); $instr = $sanitizer->text($input->post('input')); $sel = $input->post('selected'); // Expect JSON for image selected image list $selected = json_decode($sel); $nosel = count($selected); $response = array(); // for building JSON response switch($action) { // delete selected images case 'delete': $out = "<p>Deleted $nosel image(s)</p>"; foreach($selected as $item){ $album = $pages->get($item->album); $album->of(false); $out .= "<p>Image {$item->file} from album {$album->title}</p>"; $album->images->delete($item->file); $album->of(true); } $out .= saveUpdatedAlbums($pages, $selected); // add the response message for the delete $response['message'] = $out; break; ...... // save any album that had an image deleted function saveUpdatedAlbums($pages, $selected) { $cur = ''; $out = ''; foreach($selected as $item){ $album = $pages->get($item->album); if($album->id != $cur) { $album->of(false); $album->save('images'); $album->of(true); $cur = $album->id; $out .= "<p>Updated album {$pages->get($cur)->title}</p>"; } } return $out; }  
       
       
    • By picarica
      so i just downloaded this template  and i uploaded it to my server made some .php changes so it would work and stuff but all the css-transitions or css-animations don't work. they just stop
      if you checked out the template all those buttons are smooth and really nice, bit when you check out my site all those animations are gone, why is that? is there some option i have to toggle? or is it normal? how do i fix it ?
    • By rushy
      Bit of a newbie type question, even though I've been using PW for quite a while, I've not had to manipulate assets from the front end before.  I now have a need to update image properties from the front end and I'm trying to update an image description and tags when clicking on a link. I get the selected image and for example I can delete it with the code below. But I am missing some basic understanding when updating image description field as nothing happens, no errors but the description field remains empty. Any idea what steps I am missing? Many thanks. 
      // how to update image description? $al = $pages->get($album); $pgfile = $al->images->getFile($file); $al->of(false); $pgfile->description = "Test description"; $al->save(); // to delete an image - this works $al->of(false); $al->images->delete($file); $al->save();  
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
×
×
  • Create New...