Need help on Product Landing Page creation

Hello dear Campers,

I am getting three problems which I am unable to solve. Here is my Codepen .

  1. I am setting a back-ground image for my nav-bar div but elements (Ex: h1 tag, nav-links) on that image is not clearly visible. I used Opacity and z-index but still couldn’t solve it. When I am removing the background image everything looks fine on this div.

  2. I used Bootstap for this project. However, couldn’t understand why my rows are overflowing the body ?

  3. Thirdly, I am getting a horizontal scroll-pane attached automatically with my page. Is that normal with bootstrap ? When I am pulling the scroll bar horizontally till the end, the content is not spread across and a lot of white space is visible and that’s not a good style I think. Could you please suggest what am I missing to understand here ?

The work is not finished and I am stuck with many issues as above. Would be great if you could share some insights.

Wish you a great start for the new year,

Happy new year to you

OK, your horizontal scroll is this thing here. That left:800px is pushing nav-bar way off to the right.

#nav-bar {
    /* float: right; */
    position: relative;
    top: 110px;
    left: 800px;
    z-index: 3;

I see a few other positioned items in your project. I don’t remember the particulars off the top of my head but there should be a very bootstrap grid kind of way to do that without css positioning. Positioning with fixed dimensions is the kind of problem that bootstrap is trying to fix. In addition to the grid classes there should be some utility classes to tweak position of items within their grid cells and rows.

The opacity was actually working against you on text in nav-bar. The lower the number the harder that text was to see. There are also some text styles coming from bootstrap that you might need to override too. Bootstrap really wants to make that h1 font-weight 500.

About row overflowing - was that at a particular screen size? I do see that your video hangs over a bit at some sizes. You might need to google for a good article on responsive iframe video. this might be helpful

1 Like
  1. When you change the opacity of #header you are changing the opacity on the parent container of the child elements, which means it affects them (img, h1 and nav).

You can use a linear-gradient with rgba’s to make the faded overlay on the background image, this also lets you use colors for the overlay if you want.

  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.68),
      rgba(255, 255, 255, 0.68)
  1. When using positioning it’s usually best to use percentages and not a fixed unit like px. You likely also want to make the parent container position relative and then use position absolute on the child element you are trying to position.

  2. The fixed width on your textarea is causing an overflow, to constrain the width of an element it’s best to use max-width, that way it can still shrink. Also, bootstrap has a form component you might want to use.

  3. Unless you have a good reason for using inline styles I would suggest you ditch them.

1 Like

Hello @lasjorg

Thank you very much for your suggestion on opacity. The line “When you change the opacity of #header you are changing the opacity on the parent container of the child elements” is actually a very important line to understand effect of opacity on child elements. I was creating opacity on parent div not on the image and that’s why it was not working as I wanted. Thanks, much for your trick to overcome it. I found another alternative trick Here, though preferred to use yours as it is comparatively simpler for my case.

Bootstrap form component is also a nice suggestion. It made life easier to align elements on a Bootsrap grid.

However, regarding overflowing of my Bootsraps rows, I found different solution and that’s working fine. Bootstrap Rows take entire width whereas my header element(which is not in the Bootsrap row, which is containing the navbar) following the “contain-fluid” class of the parent div is keeping a “15px” margin. Whereas the rows are taking “-15px” margin. So I made the row-margin(left and right) “0px” and all the rows perfectly aligned with my header element. Thanks to DEV tool of Chome !

However, thanks much for all the good suggestion :slight_smile:

Hello @alhazen1

Thanks for your suggestion on nav-bar positioning . Yes, making the position absolute solved my problem and I got rid of the scroll-pane. Regarding opacity lasjorg has given a better answer below and it solved my problem.

Thanks however for your time to debug my code and answering !!!