What you see is what you get...or is it?

pideja · 2018-02-24 02:09:44

I've been designing a site on my workstation with a 21" monitor with a resolution of 1920x1080. A large screen, indeed. Problem is that when viewed on a 13" 1440 x 900 screen and then a tablet with a 9,7" screen @ 2 048 x 1 536 resolution the overall layout of the page changes significantly. I understand the principle of responsiveness but even though the overall layout "adapts" to different screen sizes, there can be significant differences in the overall layout.
When designing a template, in Backlight>Design Template>Layout should I place the max-with at a smaller size, such as the ever popular 1440x900? Or something more like 1280px? I ask because I set my max-with at 1280px and the resulting image is cut off at 1440px!
And, I don't get what the gutter is? Finally, my breakpoint is at 1024px. Should it be more in the 992px or smaller range?

And what is "Strict Width Option"?

See what I mean by looking at : pideja.ca/luc/fr

rod barbee · 2018-02-24 03:07:04

1920px is pretty wide. You can control things better by setting a smaller max-width

Gutters are the same as left/right padding

You can set a smaller breakpoint if you'd rather see your desktop navigation on smaller devices.

And what is "Strict Width Option"?

try it out to see what it does. Turn it on and you'll see more options, including a body background color, top and bottom margins, border control, and drop shadow

pideja · 2018-02-28 02:20:56

I understand that 1929px x 1080px is not the ideal size to use when designing a website. Most viewing will be done on 1440px or 1366px laptop screens so there is bound to be problems fitting a wide composition on a small screen.
But this example really stunned me:

This screenshot is from an iMac 27" monitor at 2560px x 1440px! To date, two people I know have these monitors and I am sure there are plenty others.
Why doesn't the whole image show up? The top navigation and the lower copyright notice are missing. Is it a monitor or browser config problem? Or should I change some settings?

rod barbee · 2018-02-28 03:56:17

I don't have a monitor that big to make a direct comparison. But if I set my monitor's resolution to the same ratio, it works ok. The navigation and the copyright info can be seen (with scrolling), but the bottom of the image doesn't appear.

You could try changing the background-size cover options.

Daniel Leu · 2018-02-28 04:23:04

The copyright notice is there. Well, you don't see it because the font is black on a black background.....

The mobile menu (eg, sandwich icon) shows once the page is smaller. At that point, the entire image shows. So you have to check the breakpoint settings you are using for the top-pallet. Above 1024px width, the top-pallet is disabled. Hence no menu and this moves the image up as well.

And yes, please design your site for bigger screen resolutions. My laptop has 2880x1800 while my monitor is 3840x1600.

BTW, the size of you background is kind of big and takes a while to load....

pideja · 2018-03-01 03:56:26

Thanks, Rod and Daniel,

Should the displayed image fit a 15.4-inch MacBook Pro with Retina display: 2880x1800 (220 ppi) as well as another monitor at 1920 x 1080?
My monitor is 21" @1920 x 1080. This is a smaller monitor than the 27", to be sure. But if that 27" monitor is 1929x1080 or 2880x1800, would both monitors display the same image?
You had a look at the 27" screen capture sent previously. Why do the black borders appear on those monitors? Where do those black borders come from?
On my 21" 1920x1080 monitor, the same web page looks like this:
FluxBB bbcode test

As you can see, the web page fills the screen. The top navigation is seen clearly and the bottom copyright mention is also seen even though it's "under" the torn paper and in the shadows.

Last edited by pideja (2018-03-01 04:00:18)

rod barbee · 2018-03-01 04:10:21

Why do the black borders appear on those monitors? Where do those black borders come from?

I get the same black bars if my monitor resolution is set to a ratio that is not the same as the monitor itself.
Check your monitor resolution settings, try setting it at the recommended resolution perhaps?

pideja · 2018-03-01 23:53:07

Problem is both monitors showing this error are factory set. iMac monitors don't seem to be able to change the ratio.

rod barbee · 2018-03-02 00:09:09

I didn’t mean I can set my monitor to a specific ratio. There are several resolution settings in pixels, like 1600x900, etc, and these result in a different aspect ratio than that of the monitor itself.

pideja · 2018-03-02 02:34:10

My LG 21" monitor @1920px x1080px has the same image ratio as the iMac 27" monitor at 2560px x 1440px= 1:1.7777778
so, theoretically, they should look the same, no?

pideja · 2018-03-02 03:58:34

I actually made a 2560px x 1440px image to fit the 27" monitor. And it did fit perfectly. However, at my native size (1920x1080) and smaller, it's as if the image was too large. The bottom "torn paper" effect is outside the monitor.
Ultimately, it was the background-size that was set at "auto". After changing it to "cover" I could replace the 2560 x 1440 background image back to a lighter 1920x1080 image and all monitors are happy!

So am I.

Daniel Leu · 2018-03-03 02:33:14

Just a little update: On my wide monitor, I don't get the black bars anymore. If I make the web browser very wide, the 'torn paper' disappears, but I don't think this would bother anyone. The menu works well now!

Community @ The Turning Gate

#1 2018-02-24 02:09:44

What you see is what you get...or is it?

#2 2018-02-24 03:07:04

Re: What you see is what you get...or is it?

#3 2018-02-28 02:20:56

Re: What you see is what you get...or is it?

#4 2018-02-28 03:56:17

Re: What you see is what you get...or is it?

#5 2018-02-28 04:23:04

Re: What you see is what you get...or is it?

#6 2018-03-01 03:56:26

Re: What you see is what you get...or is it?

#7 2018-03-01 04:10:21

Re: What you see is what you get...or is it?

#8 2018-03-01 23:53:07

Re: What you see is what you get...or is it?

#9 2018-03-02 00:09:09

Re: What you see is what you get...or is it?

#10 2018-03-02 02:34:10

Re: What you see is what you get...or is it?

#11 2018-03-02 03:58:34

Re: What you see is what you get...or is it?

#12 2018-03-03 02:33:14

Re: What you see is what you get...or is it?

Board footer