I have made significant changes in my site's structure - both html and CSS. I've tested it on both localhost, live, and on mobile - with and without caching. It is responsive and works perfectly.

But when I fetch and render it in Webmaster Console, or in Pagespeed Insights (mobile and desktop version) all images of my site are screwed up.

I use flexbox design to build the pages, and CSS media queries to make it responsive.

I know that I'm supposed to make pages for the visitors and not for Google, but if googlebot sees my site as screwed up in the "How visitors will see it" part, I don't think that is good.

Any ideas what can be the reason, or how can I reproduce the Google version to debug and find the problem (if there is any)?

EDIT: Unfortunately I can't share the URL as it is a work in progress. I've built the site according to this: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ using the linked source: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/holy-grail.css

It works as expected, but in the webconsole preview the flex boxes are in a row, instead of a column layout.

closed as unclear what you're asking by Simon Hayter May 8 '16 at 10:23

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Sorry but with the given information its impossible for us to answer without speculating and guessing. We need more information such as screenshots, website URL and anything else that will help the community provide you with a solid answer. – Simon Hayter May 8 '16 at 10:24
  • It is up to browsers to interpret and present code according to standards, however, this does not mean that all code will appear the same from browser to browser. This is because there is room for interpretation in how the standards are met. For that reason, some code will vary in how it performs. This also means that some code will perform the same in all browsers. It is possible you are working with code that exists within this gray area. It will pay dividends to change your code so that it works well in all browsers as much as you can. Google will follow suit. Cheers!! – closetnoc May 8 '16 at 14:08
  • Thank you for the answers. Could you at least suggest my a trusted source where I can test my site with different browsers - including Googlebot so I can debug my site? – ZTefter May 9 '16 at 6:16