Images not re-appearing after clicking

Hi there, I have another minor problem. The test page concerned is https://www.willowbrook.net.nz/accommodation2020.htm
The original current page is https://www.willowbrook.net.nz/accommodation.htm When you click on the various styles of accommodation the appropriate images show, then click back to “All” and the lot show. However on the test page https://www.willowbrook.net.nz/accommodation2020.htm when you click on the various styles, they don’t show. When click back to “All” only the first 2 rows of images show, then have to refresh to get all images back.
All I have done between the original page and the 2020 test page is add another row of images as the client has now opened up a new style of lodging and wanted them to show also. I have changed the code from the first row being bandb to the second row being “apart” and changed the appropriate place on the 3 images also. Code up top is:

 <div class="row">
    <div class="col-sm-12">
      <ul class="nav nav-pills" id="filters">
        <li class="active"><a href="#" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".bandb">Apartments</a></li>
        <li><a href="#" data-filter=".apart">2 Bedroom Apartment</a></li>
        <li><a href="#" data-filter=".cottage">Cottage</a></li>
        <li><a href="#" data-filter=".barn">Barn</a></li>
        <li><a href="#" data-filter=".studio">Studios</a></li>
      </ul>
    </div>
  </div>
</div> 

with the appropriate data-filters of .bandb, .apart, .cottage etc.

Try the free HTML w3.org validation utility and clear five errors and a warning:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.willowbrook.net.nz%2Faccommodation2020.htm

Hello John,

Thanks for the reply, but I removed one of the </div> 's not required, but the other </div> and the</section> only interfered with the page layout so it is not that. All other warnings are also part of the original template the owner bought a couple or so years back so can’t be removed. It has got me beat as all I did was add another row of 3 images and now the whole page won’t work, it was previously as the live original is doing now.
Any other suggestions would be appreciated.

Try to decrease your web page to ~750px width and you will see how the responsive layout changes.
Your version

Original

Clearly your HTML is invalid as the layout is completely messed up.

As far as I checked both HTML, you have a nested room-list inside one of section elements:

In the original the section elements are at the same level of each isotope-item and room-list is the container of all these items.

I would suggest starting over from zero with the copying original accommodation.htm file and carefully inserting new elements.

4 Likes

Hello Andris, Thanks for that. I ended up opening both pages side by side and found the extra 3 lines of code which had been carried forward unnecessarily. Removing them got it all working again as it should. I didn’t see that yesterday but it happened in copying the section forward for the extra 3 images. Never mind, all good now. I have now uploaded the accommodation.htm page again.
However, I didn’t find where you suggested decreasing the page size to 750px. Is this in one of the CSS files?

Cheers,

I’m pretty sure he meant “narrow your browser viewport to around 750 pixels wide and you’ll see how the display is undesirable” i.e. it is not a fix that could be done.

It is a type of “poor mans way of testing responsiveness without buying the farm”. Being able to test on real devices is great, but there is a limit. Well, at least for everyone I know.

1 Like

Hi there, Thanks for that. However it looks perfect on desktop, also on i-Pad in both portrait & landscape. However on a phone (Samsung S10) it is perfect in portrait but NOT in landscape.
Don’t know if anyone can put their finger on what might be wrong there. Any help would be much appreciated.

I have a feeling you didn’t understand me. I wasn’t talking about switching between portrait and landscape orientation.

  • open your favorite browser on your desktop, expanded but not full screen
  • put your mouse over a side of the browser viewport chrome (an outside edge of the browser window)
  • you should see the cursor change to some sort of “grippy” indicating you have a “handle” on that edge
  • drag the edge left and right to make the viewport width different
  • with a fluid design you should see page content shift around depending on how much room there is for them to display eg. side-by-side <-> above-below (kind of like word wrap but for page content)
  • with a responsive design you may see not only fluidity but also some content may change dimensional size, move where it is in the layout (eg. sidebar becomes a pre-footer), change in appearance (navigation links put under a hamburger icon), or removed from the page entirely.

I believe, if I’m not mistaken, @andris.vilde was just saying that you can see the html is broken because when you resize the screen smaller everything overlaps. It was just a way of showing you that the html was malformed and not an instruction to change anything in the css :slight_smile:

I only have an iphone and it looked ok in landscape (if I was looking at the right page as you have removed the test page). Maybe if you post a screenshot of what you see it may yield a clue but probably best to wait for someone who has the same phone as you to answer :slight_smile:

Hello Mitteneague, Yes, I understand about dragging the page inwards to test. I had done that but figured it was possibly only breaking between regular page sizes as the further in you dragged, it came good again. (It appeared to be only at one point) However it wasn’t till I checked it on i-Pad and Android phone where it broke only on Landscape on the phone.

Hence why I thought someone may be able to put their finger on the actual problem.

1 Like

Hi Paul, The test page is now the live page https://www.willowbrook.net.nz/accommodation.htm As I found the problem of the images not appearing after adding an extra row, all seemed well, so it is live.

However if you can spot the area at fault, that would be good.

Thanks,

I don’t know if this will help or not but there is a stray close </div> tag on line 716 of
https://www.willowbrook.net.nz/accommodation.htm

I’m sure you are aware that trying to target specific devices is an exercise is futility.

Hello Ron, Thanks for that, but still no go. (I removed the </div>) It appears to be just at the time (when dragging the page in) where the images reduce down ok from still 3 wide, but much smaller and then keeping dragging you would think it would drop to two images wide before going down to one, but it goes very erratically size wise straight from 3 wide to single images with a variety of sizes, not consistent as can be seen in the screenshot. Even though the actual images are all the same actual pixel sizes in the image files.
Interesting point though, several years ago when I bought the templates, (I bought 3). They have been used on 3 accommodation type sites, 2 in New Zealand and one here in Australia. I note the problem is on all 3 sites on this particular accommodation image page in every case, so I believe it could be an original template fault. However would still like to get to the bottom of it though.

The image “wrapping” is nothing out of ordinary. Basically if there isn’t enough space in one line it will move the item automatically to next line. For example, flex-wrap.
image

Usually you write breakpoints (media queries) in CSS to target specific device widths or heights. When your screen size meets the criteria the behavior of layout will change. For mobile devices the usual way is to make it as large as necessary for readability and accessibility of your web page.

What @ronpat mentions is paramount for good website and weeding out any unexpected behaviors. Stray tags can easily mess up layout

Hello, Yes, I have removed that stray tag. However I think I did mention CSS a few posts back thinking it may well be in the media queries. However I have no idea where to find which one is causing it. If anyone can put their finger on it, that would be great.
Thanks.

You can use some good tools to find this out, for example any Chromium engine based browser like Google Chrome.

  • Open Dev Console (F12 on windows)
  • Toggle device emulator (Ctrl + Shift + M)
  • Under settings you will see all media queries (blue, green, orange colors)
  • Click on them and the size will auto-change to match it
  • On right side in Elements tab you will see all the related rule sets and some of them will have exact links to CSS files when you click on them.
  • Or right click on the media query bar and it will show you this context menu:
    image

Hi there,

Thanks for this so far, however in the Developer Console in Chrome, I couldn’t get past the • Toggle device emulator (Ctrl + Shift + M) instruction. It simply went to another page entirely so couldn’t get any further. (I then closed the page which I had open and was keeping popping up) I think after that it did open up to a single list of images (not twin) but I could not see anywhere a “Settings” button to go any further. I found the line 167 in the responsive.css file showing max-width 767px as you have screen shoted but with no “Settings” showing I couldn’t continue on with the instructions.

It’s better to make some screenshots, it is difficult to imagine your problem.

The problem is that the elements have no defined width and therefore are as wide as its largest content. You can see that the images that are smaller are the ones where the description does not push the width to the end of the available space.

e.g.

Relax and refresh yourselves in the spacious lounge with Sky TV.

That line of text does not wrap and is not long enough to reach the end of the available space and thus sets the width for the whole thing.

If you define the absolute parents width then the child width:100% will take effect.

Add this:

.isotope .isotope-item{right:0;}

Check this has no detrimental effects but it seems to be a problem in the logic of that isotope code and as you say will probably be in all your sites that use it.

The fix above does sort out the problem but its hard to do a full test from here so test thoroughly after you have added the code.

Here’s a screenshot with my fix dynamically added.

1 Like

Hello Paul,
Thanks for that, it certainly had an effect. I applied it to all 3 sites which use this same template with same results. At least the images are full size matching the text and not images of varying sizes now. However it still doesn’t go from 3 images, down to 2, then down to 1 which would be a perfect situation. As it is when you drag the screen inwards, it goes straight from 3 images wide to 1 and images are a bit blurry as they are over stretched but continuing the drag, obviously they come right.
Interesting in my phone if I look at the page in portrait everything is perfect. Turn the phone landscape and is still good until I refresh - then it turns to custard, images overlapping text etc. Turn back portrait, all good, turn back landscape, all good. Just don’t refresh. Bit weird.