Hello! We’re really liking Newspaper as a theme, but I’m having a problem with the way the grid thumbnails are responding to being made “phone narrow” as seen here:
The gray bars appear on any resolution narrower than 480 px or so, at least on my 1920×1080 monitor’s mobile simulation.
I know I’ve seen this problem described on this forum many times, and the answer is usually to regenerate one’s thumbnails, which I have done (with careful attention to the grids and modules that we are using). In this case, the problem shows up when the page is viewed on a narrow mobile device (or in Chrome or Firefox mobile preview with the simulated device made very narrow). The images shrink properly until the aspect ratio matches the ratio present in the thumbnail, and from then on as the page gets narrower, they shrink to match the x-direction, leaving them too short to fill the box in the y-direction. I wouldn’t complain, but this isn’t some extreme, unrealistic aspect ratio, it’s what’s actually present on my Pixel 2 or my wife’s Pixel 2 XL.
(In a related behavior, if you use Chrome or FF to simulate mobile and then drag the device to be more than about 750px wide, the thumbnails snap back to the wrong aspect ratio once they stop filling to 100%, not to the correct aspect ratio thumbnails that get served to the real desktop site. That means that even if a mobile user clicks “request desktop site” the thumbnails will still come with gray bars! I’ve seen this behavior in Safari on iPad. It’s probably not a coincidence that this is the pixel width at which the “large tablet” CSS is supposed to come into effect.)
Is there some way to get the images to stop shrinking to match x and start cropping the y-axis once they get too narrow to resize correctly? And why are the thumbnails for the “large mobile” the wrong aspect ratio?
Thanks for your help! The theme is working great otherwise!
Hi,
There are indeed gray bars in your case, something is wrong. Does the same happen if you check the same grid type in the live theme demo, with the same phones?
– https://demo.tagdiv.com/newspaper/big-grid-7/
Could be something specific to your case. I inspected the grid, can’t find anything out of the ordinary with it at a first glance.
Plugins could cause image problems, the first test would be to deactivate all non-theme plugins and clear the cache (if you use any caching).
Also a CDN image delivery service could affect the images, the Cloudflare rocker loader is known to cause various problems with the theme when active. We recommend to disable it
– https://forum.tagdiv.com/cloudflare-cdn/
Let me know what you find.
Thanks
Tried disabling RocketLoader, no effect.
I actually CAN get the gray bar effect on your live demo, but only by making the mobile preview unrealistically narrow, so it’s just an effect that’s kicking in at a larger width for us (theme loading too-wide thumbnails?)
One more clue: the featured image and the two images that are visible in the slider on first load have gray bars, but the three images that are NOT visible on first load have correct thumbnails. Does that help at all? Is there a difference between initial load thumbs and those that are hidden initially?
Found a workaround: it’s possible to set min-width to 480 in td_big_grid_7 and keep the thumbnails from shrinking beyond their proper aspect ratio. But this does make the second row of slider thumbs abnormally wide.
It can indeed by fixed with some CSS, but this should not happen. Something is affecting the height of the images, I can’t seem to figure out what exactly. Do you use any custom CSS code for the grid, or maybe used the CSS tab in the composer for it or the containing row?
Your code seems to work. I could give you another fix, remove the min-width and enter this one instead
– https://www.screencast.com/t/jWySjjUst
.td_block_big_grid_7 .td-module-thumb .entry-thumb {
height: 100%;
}
This code produces better results.
