Please review my Bootstrap product landing page

HTML-CSS
1

Notice: for some reason the carousel isn’t working in codepen.

2

There are two basic responsiveness checks you should always do:

  • Responsiveness to changes in view port width. Narrow your browser as skinny as it will go. Does it look good? Then gradually widen your browser until it fills your entire screen. Did it continue to look good as you widened?
  • Responsiveness to changes in text size. Manually increase/decrease the text size. Does it look good at all different sizes? If you don’t know how to manually change the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to change the text size.

My suggestion is to use a narrow-first approach. Narrow your browser as skinny as it will go and style the page so it looks good. Also increase the text size at this narrow width to make sure nothing completely breaks (you may have to put up with a horizontal scroll bar at narrow widths/huge text size but you should try to limit it as much as possible).

After you have the narrow width working correctly then you can add CSS break points for wider widths as you have more horizontal space to work with. The key to making this work is to use em units for your break points, which will take into account both changes in view port width and text size.

1 Like
3

Thanks for the input. I completely forgot about responsiveness… will update.

4

Looks good at the first instance, filled with default bootstrap components. Well, i just pasted your script in the js section where the modal pops up for codepen and the carousel starts working fine.

5

I don’t understand what JS you’re talking about.

6

Screenshot
Screenshot2352×1420 613 KB

Paste your scripts in the red block instead of writing it in js block of the pen. The carousel will start working.

1 Like
7

Thanks a lot for your review!
Is it ok now?

8

Are you using the same codepen link as above? If so, as I narrow the browser I am still seeing the white cards overlap the blue boxes.

Also, if I have the browser wide enough so that all the menu links at the top are showing (i.e. no hamburger icon) and then I increase the text size I get a horizontal scroll bar. What should probably happen is that as the text size gets bigger it should go back to the hamburger menu. I would do this with a CSS break point using em units for the value. I’ve never used bootstrap so I don’t know how you would do it with that?

1 Like
9

I have no idea why the code I wrote for the card line results in the way it looks so I’m not sure what I’m supposed to change to make it respond correctly.

I don’t get a horizontal scroll bar. Maybe our browsers and displays make a difference.
What are the break points should be added to? What’s supposed to break at a certain width? I’m new to this so apologies if it’s trivial…

10

Looks pretty good!

The “Kickstarter starts soon” message doesn’t seem to match the rest of the page and it doesn’t look as neat or aligned.

Also, I think the page would be better with a lot more whitespace.

1 Like
11

First you have to manually increase the text size. If you don’t know how to do this, using Firefox, go to the View-Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to change the text size. It will depend on the width of your browser window but at some point you’ll see the horizontal scroll bar.

1 Like
12

Thanks for the tips, I tried to make it look like https://jitsi.org/.
If someone wants to see how it’s done professionally he can look at their source. It’s so different than mine I don’t even try to figure why they did it the way they did.

13

they are using a lot of stuff to build that page:

1 Like
14

It doesn’t say it’s build with Bootstrap…

15

To be honest, I might put quotation marks around “professionally” :slight_smile: Crank the text size up just a little, as little as 120% and the layout starts to break. I mean, come on, they are using px for height on those white boxes in the middle of the page.

I point this out not necessarily to poke fun at their sloppy code but to warn you that just because it is a professional web site doesn’t automatically mean that they are doing it correctly. Always test everything you create at various view port widths ranging from super skinny to extra wide and always crank the text size up to at least 300% to make sure you can handle it.

1 Like