[Resolved] testing website at different resolutions

[david]

Hi,
I’m trying to test https://florapalaestina-ethnobotany.org/ for responsiveness on different resolutions with different tools such as http://whatismyscreenresolution.net/multi-screen-test.
On all my testing (on several testing sites) I’m receiving “website refused to connect”.
On my desktop (1280 x 720), laptop (1536 x 864) and Macbook the site looks ok.
Could you tell me why this is happening and how to test
Thanks

[David]

Hi there,

that URL you provided is redirecting automatically to your login.php – without a login i cannot access the site and neither will those testing sites.

Unless you want to pay for a service such as Browser Stack where the results you see are rendered on a real device you may as well just use the Browser Developers tools:

Open the site in Chrome, Right Click > Inspect to open the tools. In the top bar of the dev tools you will see a mobile icon you can select that and check the site at different screen sizes.

[david]

Hi David,
Thanks for this. I have a force login plugin, I’ll try deactivating it and see what happens.
Let you know
Thanks

[david]

Hi,
Yes that’s the reason I received “refused to connect” message.
What (free) testing site do you recommend? Any suggestions what to do/not do to make site responsive on different devices?
Thanks
Really appreciate your help

[David]

personally; aside of testing on any real devices i have, i just use the Browser developers tools mentioned above, as the Free online testing sites are just simulating the output so cannot be guaranteed as accurate.

[david]

Thanks very much David, I assume the browser developer tools are those that come with Chrome.
Am I right assuming that if I use css grid and vw, vh units then as long as the number of columns and rows stay the same this should adapt to any device? Obviously for mobile phone screens I’d adapt the css grid columns and rows – does this make sense? Would you suggest another method to fit the maximum devices without using media queries – ’cause there seems to be as many breakpoints as there are device sizes.
Thanks

[David]

I assume the browser developer tools are those that come with Chrome.

Thats correct.

With CSS Grid you can use auto-fit and minmax properties to create an auto responsive grid.
Good article on doing that here:

https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

[david]

Thanks for pointing me in the right direction.
Your help’s much appreciated

[David]

You’re welcome

[Author]

Posts