Why does my website not render on your browser
Hello I have a wordpress site that showcases wedding photography. I use your browser all the time, and built the site using your browser. Recently, in the last month, the portfolio page has not been rendering correctly on Firefox. It works correctly on safari, chrome and all mobile browsers. Are you able to help me find out why this no longer works? the address is: www.rainbowrowphotography.com/portfolio under 'full wedding features' there should be a grid of six image blocks. My theme is responsive, so I cannot understand why this is happening. Many thanks. Will
Réiteach roghnaithe
By default, tables stretch to fit their contents. When you style the grid as a table, Firefox doesn't feel compelled to reduce the image size. In order to force that, you need to specify that the layout of the table is fixed rather than flexible. This is the additional style rule that does that:
.grid-wrap .grid-row {
table-layout: fixed;
}
Since you appear to be using a paid theme, I suggest contacting their support to learn how best to fix this, and point them to this thread as well as your page.
Actually, I see the company that sells this theme posted a similar workaround for a different component here:
Read this answer in context 👍 1All Replies (5)
Suggestion; The main pictures are very large. Reducing the size will also reduce the time needed to load the pictures.
I loaded the webpage on Firefox and Win IE. They look the same. Describe what you see as different.
Your zoom controls.
<Control> + (plus) enlarge <Control> - (minus) reduce <Control> 0 (zero) restore
Thanks.
I will reduce those.
Are you seeing a grid of 6 images? I am getting two from the grid and everything else cut off.
Zoom doesn't seem to change it.
I don't know what is wrong in the current Firefox release, but it works for me in the current beta version and later. I assume that is has something to do with how "display:table" works.
Réiteach Roghnaithe
By default, tables stretch to fit their contents. When you style the grid as a table, Firefox doesn't feel compelled to reduce the image size. In order to force that, you need to specify that the layout of the table is fixed rather than flexible. This is the additional style rule that does that:
.grid-wrap .grid-row {
table-layout: fixed;
}
Since you appear to be using a paid theme, I suggest contacting their support to learn how best to fix this, and point them to this thread as well as your page.
Actually, I see the company that sells this theme posted a similar workaround for a different component here:
Thank you very much! You nailed it! Saved me from so much head scratching.