I can’t figure out what I’m doing wrong.
See: https://test-responsive.bss.design/
1. I want the top image image_holder.png to shrink when the viewport size gets so small in height, that the bottom-div still has room to show on the bottom of that section which is controlled by 100vh.
At the moment, the image keeps its size, and not shrinking, which makes the bottom-div ‘fall off’ when the viewport of iPhone 5/SE (320x568) is used for example.
And therefor overlapping the content of Section 1.
Same happens on desktop in a resolution of 1366x768, 1280x800, 1280x720, 1176x664, 800x600.
2. I want the paragraph of Section 1, to show below the carousel, when the viewort gets so small in width, that it breaks the 2 columns from next to eachother to below. This works.
But when viewing at iPhone 6/7/8 Plus (414x736) or Surface Duo (540x720) the paragraph
of Section 1 overlaps the carousel.
This happens for Section 2 on Surface Duo resolution aswell.
3. At Galaxy Fold (280x653) all is a mess.
4. Resolution 3440x1400, 2560x1440:
Section 3 background is not fully vh - I can by adding pixels to size height, but it will affect other lower viewpoints on XL breakpoint with a bigger empty space, which I do not want.
Note: I use Chrome debugger (F12 / Ctrl+Shift+M) to show the different viewports.
By looking at the site using Chrome’s inspection tool, the first things I see that strike me as problematic are 1) You’re assigning a fixed height to the section with the ID #android. You should not ever need to set fixed heights on sections in a responsive website. The second thing that jumps out at me is the margin-bottom: -225px; on the column containing your slider (which I presume your doing to accommodate the nature of the Bootstrap Carousel to adjust its height proportionately to the width of the image.) Negative margin is rarely a good solution to a layout problem.
I can’t really imagine how one would test a mobile layout on a folding phone without having the phone to experiment with, but I would assume that when it’s unfolded, the site should display in the browser the same way it displays on a standard phone (unless they’re using a customized browser to accommodate the folding ability, in which case all bets are off.)
I see all kinds of problems when you go below 300px in width. To really identify the source and solutions to your issues, I would probably need to have the actual .bsdesign file to work on, but then that’s kinda how I make my living (if you get my drift.) Also, your page is full of inline styles, which makes diagnosing things considerably more difficult, because there’s no simple way to disable them with the Chrome inspection tool.
1 Like
Your top section will not shrink because it is not set to grow first. Set that display flex, flex-direction column, and flex-grow to 1.
Then set bottom section to display flex which always starts with flex-grow default 0 . 
2 Likes
@twinstream
Thanks! That worked pefectly =)
I’m not entirely clear on what you’re trying to accomplish in terms of the page height. The visible part of the page is going to vary tremendously depending on what size screen the site is being viewed on, how big the browser window is, whether the browser is stock or has the top menu enabled (Firefox) or bookmarked icons, or extensions that add rows to the top or bottom reducing the viewable area of a website page. Some people hit F-11 when they browse to use the entire monitor to see the site. Some people enlarge the website to make the text bigger using the magnification options (like I view Facebook at 110% enlarged to help my poor old eyes.) All these things can throw off your “best laid plans” of how you want users to see your website.
1920px by 1080px is the full display area of a typical widescreen monitor, but that doesn’t mean that’s what people looking at your website are going to see in their browser. If fact, many (if not most people) have their browser window reduced in size, in which case all your efforts to make specific sections of the page appear at specific points… well… pointless.
What’s probably more important is to shoot for clear visual delineation between sections either using different colored background, or graphic page dividers. Lately I’ve been doing stuff like this to separate sections of my pages…
but I can’t possibly guarantee that a person is seeing any particular area in a single “chunk.” That’s why I use the colors and curved graphics to separate one section from another. I think this is most important on mobile screens since a single background color on a very tall page becomes an exercise in scrolling monotony for the user. Alternating background colors seem to be the popular go-to for separating areas of “tall” pages.
Regarding the Galaxy fold, using Chrome’s F-12 inspector and the Galaxy fold emulation, your site seem to look fine except for that first section where you “create an account.”
I downloaded your test file and I’ll take a closer look at it tomorrow.
One other thing I noted… the location of your fixed “scroll to top” button (the arrow in the circle) is very distracting and obstructing on mobile. It needs to be lower, more to the right, and smaller, maybe even partly see-through (like 50% opacity) Like 40px x 40px and about 10px from the right and bottom.
@printninja
I hear you.
I just hoped for a solution like a mixture of 100vh of the background in a section, but when content within such section is taller than 100vh, grow background accordingly.
If you are using the section component to “divide” up your pages, you can give each section it’s own background color, and as long as you’re using Bootstrap correctly (containers > rows > columns > content, the width of the screen will change how the content stacks vertically, and the section will automatically increase and decrease in height without any need for 100vh; Bootstrap, via flexbox, is quite literally designed to take the headaches out of trying to figure out the ideal height for divs.
But the idea of making a perfect, let’s say “blue section” that fills the entire viewable area from top to bottom regardless of what brand device, phone, tablet, monitor, and web browser you’re viewing the site on is, I believe, impossible. There are simply too many devices and browsers out there.
I suppose you could use media queries to see which device the person is viewing your site on, and then if you know the device resolution, you could load a device specific CSS file, but man would that be an exhausting amount of coding and probably wasted on 99.99% of people who just go to websites to find information as quickly as possible, not bask in the aesthetics that people like us spend so much time on. After 25 years in graphic design, I’ve learned that the average person cannot see the difference between Arial and Helvetica, or a 1 point stroke and a .75 point stroke, or if a circle isn’t truly round. Most don’t have that “perfectionists gene” present in designers, programmers, coders, etc…
@printninja
Oh, it does work correctly.
Like the auto-resize in height, when the content within the section is taller, the background grows accordingly.
But I wanted a minimum of 100vh so I could prevent the next section already appearing (on 1080h and above).
I guess it’s simply not possible to have the features of both methods enabled at the same time, without a specific CSS file per different device and viewport.
1 Like