Landing.Page.Project Help Needed

Hello! I am new to code. I don’t understand why there is a lot of white space on the right side of the webpage. Can you please help me out?

Link of the project:

Hello @Deepali and welcome here,

I don’t see the white space, could you indicate where it is?

1 Like

on the right side, I wish I could show you the video. I haven’t made it responsive yet too, maybe that’s messing up the view also. Can you please see the link on the website ‘http://whatismyscreenresolution.net/’, on 1536X864 resolution?

My resolution is 1440x900, but I tried your resolution with the dev tool (maybe it is not correct on my side). The white space is on all the height of your page? You can maybe take a screenshot and share it here

1 Like

I see the white space. You have to scroll right in order to see it. The question should really be, why is there a horizontal scroll bar? You should use the dev tools to start going through elements on your page to figure out which one(s) are causing the excess width.

I would suggest you use a narrow-first approach to styling. Get rid of all of the grids and such, narrow your browser as skinny as it will go, and make sure everything looks nice, with no horizontal scroll bar. This will be your default CSS. Then you can gradually widen your browser and add media break points to change the layout for a wider view port.

2 Likes

Thank you @bbsmooth, I didn’t have the scrollbar at the bottom but I saw the space. :slight_smile:

It looks like @Deepali is working on it because now the scroll has no effect vertically and horizontally

1 Like

@bbsmooth and @LucLH Thank you both for your time, sire. I appreciate it. I have solved it, for now, it seemed like a child was overflowing the parent. I put Overflow: hidden; in the grid, which has solved it for now.

1 Like

It looks to be working well, good job @Deepali :smiley:

1 Like

Maybe I’m not seeing the most recent version? But I am still seeing a horizontal scroll bar and a bunch of white space if I scroll right. If this is still happening then you definitely want to fix it.

1 Like

Still a problem:

FULL SCREEN


WINDOW REDUCED TO 75% WIDTH

WINDOW REDUCED TO 50% WIDTH

WINDOW REDUCED TO 30% WIDTH

As @bbsmooth and @ALLESS, when I change the screen resolution

@ALLESS and @LucLH, I am trying to add responsiveness but I don’t know how to.

I tried to check a little what could bring you these issues and I would say that it is the type of position you use in some cases. You use often the absolute value for the position property which is not the best choice in some cases.

Example:

.sec-2 img {
  position: absolute;
  left: 987px;
  top: 130px;
}

The issue is that you use the absolute value which makes your image goes out of the original flow of your page, then you give a position in pixels for the left. If you reduce the page width, your image will be always positioned at 987px from the left which will then give you this white background at the right in reducing the window size.

It is exactly the same for the button of your section 2:

.sec-2 .Btn-1 {
  position: absolute;
  width: 331px;
  height: 66px;
  left: 986px;
  top: 610px;
  background: #DF3D3D;
}

Try and see by yourself in putting in comment the position property for the two CSS rules I mentioned earlier and your white space at the right will disappear:

.sec-2 img {
  /* position: absolute; */
  left: 987px;
  top: 130px;
}

.sec-2 .Btn-1 {
  /* position: absolute; */
  width: 331px;
  height: 66px;
  left: 986px;
  top: 610px;
  background: #DF3D3D;
}

You are free to use the type of position you prefer, but personally talking for the code I mentioned, I would recommend you to use the relative position. And you should verify this point in some parts of your code because the white space is not the only issue you meet in reducing the window, and most of the time I would say it is because of the absolute position you use.

Hope it helps you to understand a little better and keep us inform of the situation :slight_smile:

1 Like

Thank you! :pleading_face: I’ll try it out. Another thing, is there any way to make the grid responsive?

You’re welcome! About the grid, to make it responsive, use relative units and not fixed units (for the columns width for example).

1 Like

Look through these three articles to learn about Relative units in Responsive design and to get a better overall understanding of how responsive design works.

1 Like

Yes, I saw a video on that and read the guides @ALLESS linked in the comments. Now, I see most of the problems wouldn’t be there if I knew it at the beginning itself. :sweat_smile:
Thank you both for helping me out. :heart:

1 Like

New link of the project is: https://codepen.io/Iam_DeepaliP/pen/PoEbzZO

You’re welcome @Deepali :slight_smile: I checked your last version and there are issues when we decrease the width of the page such as elements jumping on others or content disappearing. Did you notice that?

1 Like

I am still working on it.