Looks good on desktop and phone, but laptop.....

[GNP]

Hi,

I've so far done an okay job of making my site look good on desktop (default), and on mobile phone (360px). These breakpoints work great.

However, for something that's for laptop (presumably 1024px), I would ideally like a "smaller" version of the default px breakpoint, without having to redo all font sizes and layout grid sizes just for this 1024px breakpoint.

Right now, when I view my website on my laptop, it is the desktop version (which is what I want), but the main upper page contents do not fit within my laptop screen (presumably breakpoint 1024px and above) without having to do some scrolling. It's the scrolling that irks me, and I suppose it would irk visitors who use a laptop as well.

So basically for 1024px breakpoint (and neighboring breakpoints), I want the upper page contents to fit on a laptop screen without having to do any scrolling. Is this possible?

For online reference, here is the website:
https://www.graynoteprods.com

Any help would be much appreciated.

[Pablo]

Do you mean vertical or horizontal scrolling?

Can you please be more specific?
Where exactly do I need to look?

[GNP]

Hi Pablo,

thanks again for looking into this. Apologies for the vague-ness.

I'm referring to vertical scrolling.

For example, on the home page itself with a big Youtube video on it at the top - on the laptop screen, it's too big that I have to vertically scroll down abit just to get to the description that's just below the video.

I would like a scenario where both main video and description below it is visible immediately on a laptop screen. The rest of the contents beneath these two, I'm fine with having to scroll to see them. You get what I mean?

[Pablo]

Note that there is no way to guarantee that it will always look like you want, because there are too many screen variations and different browsers options.
Even if you optimize the layout for a specific laptop screen size, then it still may look different in another browser or with other browser settings.
For example, if the browser has a slightly higher toolbar then the layout would not be completely visible.

But you can configure a layout grid to always show full screen by setting the height to '100vh'.
Keep in mind however, that on smaller screens not all content may fit and it may be clipped in that case.

Example:
https://www.wysiwygwebbuilder.com/suppo ... lkies.html

[GNP]

Hi Pablo,

yes I understand. I'm not exactly looking for the perfect layout across all different kinds of screens, just perhaps enough so that on laptops, no scrolling is needed for the main upper page content.

For example - this page here:

https://www.graynoteprods.com/news.html

I used a Carousel for my news section - but the bottom Carousel horizontal browsing mechanism is cut off on a typical laptop screen. I wouldn't want visitors to not see that they can flip through the news cycle on the Carousel mechanism, you know what I mean?

Does this mean perhaps maybe I should just be making the entire website alot smaller in this case? What's your personal opinion?

[Pablo]

You can also set the carousel to full height , then the pagination will always be visible.
But also in this case you should not add too much content otherwise it will be clipped on smaller screens.

Here's a demo of a full height carousel:
https://www.wysiwygwebbuilder.com/suppo ... _band.html

[GNP]

Ah cool. Thanks for the tip. However, my Carousel doesn't show fullscreen due to the sticky header on top. I still have to scroll abit down to get to the pagination. Anyway to fix this?

[Pablo]

I'm sorry, I do not think that will not be possible.
An object cannot be full height and ignore the height of other objects like a header.
In my opinion you are making it too difficult for yourself.

[GNP]

Hmm okay. Nevermind then! I can live with it being like this for now. At least now I understand the limitations. Thanks anyway Pablo!

[Pablo]

I think it's a logical limitation. If you want a full height layout then the rest will get in the way...

[GNP]

Understood. Which means in terms of navigation, I'll either have to make all content on the same page, or stick with the sticky header that links to separate pages, which means I can't have the full height layout design.

Right now I need the separate pages, which affects the design aesthetics.

It's okay. Thanks again Pablo.