|
Marshall Laing Music School
|
November 27, 2014 at 1:47 pm
Hi, I’m having a problem with the Grid View Template (EE4.3+) plugin. The grid images are fine in IE and Firefox but are distorted (width is narrowed) in Chrome and Safari. What’s happening here and how can I fix this?
Here’s the page: http://www.mlmusic.school.nz/music-classes
Thanks, Mark
|
|
Tony
|
November 27, 2014 at 2:45 pm
Hi Mark,
This is being caused by these styles:
.ee_grid_box img {
width: 395px !important;
height: 240px !important;
margin-left: -50px !important;
}
Which have been added to your themes styles.css file.
If you remove those styles the images will no longer be distorted.
|
|
Marshall Laing Music School
|
November 27, 2014 at 5:09 pm
Thanks for your reply.
What I’m trying to achieve with that piece of CSS is to use the rectangular featured image in the grid by hiding the overflow in the ee_grid_box div and centering it with some minus margin. The designer wanted square images in the grid. Works great in FF and IE but was doing some weird stuff in Chrome and Safari. Removing this CSS gives consistency cross-browser but squashes the image. I’ll have to work on some CSS that will achieve what I want cross-browser unless you any other insights into this? Cheers, Mark
|
|
Josh
|
December 1, 2014 at 9:56 am
Hi Mark,
Before you try a CSS solution, I recommend trying a built-in WordPress solution where it will served up a cropped, centered thumbnail image. This will make for much faster page load speeds, and cross-browser hacking won’t be necessary.
Here’s how to use the built in WordPress thumbnail solution:
1) You go to Settings > Media. Please make a note of what’s set there for thumbnail sizes, then change the Thumbnail size to 200 x 200 (150 x 150 will also work).
2) Check the box where it says “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”
3) Save Changes
4) Install and activate the regenerate thumbnails plugin.
5) You go to Tools > Regen. Thumbnails and click the button there.
6) You can check the grid view page as well as any other areas of the site that use featured image thumbnails and adjust thumbnail image sizes/regenerate if need be.
7) If for some reason a different thumbnail size/proportion is needed elsewhere due to the theme, you can revert things back to the way they were before by changing the media settings back, then regenerating the thumbnails again.
If it turns out that a CSS based solution is the only option, I can recommend trying this one out:
http://stackoverflow.com/a/11552460
|
