I was happy with my site but when today I checked my site on my friends monitor that was set to 1920 x 1080 resolution, there was a lot of grey space on both sides of site. The site was almost 1/3rd of the total screen. What can I do about it? Isn’t it responsive for every type of resolution that can stretch it to fit blank space?
your Container width in Customizer > Layout > Container is set to 1120px. This creates a max width of the content. You can increase this to a higher value if you want to take up more of the larger screen space.
Is their any auto value in this? Should I set it to 1920 for high resolution monitors?
Will it display equally well in other small resolution devices without any SEO side affects as well?
The container width defines the max-width. So it responds to smaller or larger screens without any problems.
SEO wise the only impact may be user behaviour. For example look at your single post with the container set to 1920px on that larger screen. Its not very comfortable to read which could turn users away.
Personally it looks great to me and i am on a 5k 27″ monitor.
I want the complete site to adapt resolution like roastycoffee dot com. The site should span full width along along with single posts or pages on high resolution 4k monitors. Should I just need to change the container width or there is more to change for single pages as well….
You can adjust the container width to a higher value ( you can type whatever size in you need). This will apply to the entire site including all posts and pages.