Using a 1920x1080 Display to design for 1366x768 laptop

[elem-magic]

This is a long question, but I hope it makes sense. Please bear with me; I’m a beginner with Elementor and new to the forum and not familiar with procedures and etiquette.

I have a laptop with 1366x768 max resolution However, I have a 22” monitor attached that is 1920x1080 which I like to use to design in Elementor. It responds well and is easily editable in the mobile and tablet modes.

Since Elementor doesn’t (yet!) have a responsive option for laptops, I’m having a difficult time understanding how to make it for the laptop resolution.

I want my website to display on laptops at 100% maximized screen without having to scroll horizontally.

It seems better to make it for the laptop resolution rather than the 1920x1080 resolution. People with the higher resolution can just zoom in to make things bigger if they want and still not need to scroll horizontally.

I suppose the obvious solution is to make the website on the laptop, however, designing it on the smaller screen is harder because I must zoom out or in to get all the elements to show without scrolling.

I’m experimenting with the screen size and resolution settings on the bigger monitor.

Is either of these the way to go?

Should I minimize the screen size to (Window’s) 67% setting which gets get it close to the maximized laptop size. But if that, what do I set my 22” monitors resolution to? Do I keep it at 1920x1080 or reduce it to 1366x768

Or should I keep my 22” monitor maximized at 100% and reduce its resolution to 1366x768

Or am I totally in the O-zone and missing the obvious? ha ha

Thanks for any help.

Mike

 

[sms-design]

Um!! excellent questions and yes you could write media queries for all of them read this article https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Now rather than trying to set you own monitors to what you think is the correct % try using an online responsive tester http://responsivetesttool.com/ there are others.

Back in 2007 Amazon launched the Kindle with an experimental web browser, so we all wrote code to make our websites work on that platforms, what a waste of time. Guess what most people just use it as an ereader and don't even know it has a web browser.

So cutting this short make sure it works according to a number of responsive tools, and look at your sites stats on devices using your site and adjust accordingly.

Don't forget smart TV's & wearable devices, so glad you did not mention web browsers and devices together.

 

[elem-magic]

Thank you, sms-design

I appreciate your time and response to someone who is way out of his pay grade in places like this forum. I’m not looking to be a designer and have enough to do learning Elementor and revamping an old personal and inactive website.

I’m now aware that responsiveness is one of the requisites for SEO. I’ll be working on SEO once I get the content dialed in.

Thank you for the link to the online responsive checker site.

Now on the lighter side! I wish Elementor would separate the “Section Selector” from the “Section Duplicator”! I mean …put it way on the other side of the element!

I can’t tell you how many times I’ve made several duplicates before realizing why my section wasn’t responding to a change!

Also, I wish they would put the padding selectors as TOP, BOTTOM, LEFT, RIGHT or LEFT, RIGHT, TOP, BOTTOM!) Placing the “bottom” between the left and right, trips me up every time! ha ha

Ah well, Elementor is amazing.

Mike

 

[bernardo.sft]

sms-design, great tip the site responsivetesttool, gratitude, simplified the work and helped me a lot! I didn't understand how csstricks can help me in terms of making my site more responsive, sorry for the elementary question but I'm still learning.