Website Banner issue

I need a little help. I am so close to finishing up my new portfolio website, but I am about at wits end trying to get rid of the gap above and below my banner image on both desktop and mobile. On top of that, when I upload my website to my web hosting account, my mobile banner image doesn’t show up at all even though it shows up when I open the file from my computer. Can anyone figure out what I might be doing wrong? The issue would be on my index page and/or stylesheet. I have already tried margin: 0 and padding: 0 as well as negative values, but it doesn’t seem to change anything.

Here’s a link to my code: https://github.com/NicoleNootbaar/NewPortfolio

Any advice on things I could try would be much appreciated.
Thank you.

Any chance you can add your resources folder too (images and such)? I cannot see what the issues are without the content.

I don’t think I can add the image file to github, but here is a screenshot of the files and the image file where the banners are located.

This does not quite help in solving your issues :wink: .

You should be able to upload the images to your repository. Without those I cannot see whats going on.

Ok, I added the main images from the Image folder on github. I skipped the sub-folders since they don’t have much to do with the banner.

1 Like

Ok, lets look into a solution.

The white bars I only get when the screen has dimensions where the image is not high enough to fill the banner. You solve this by giving it a background-size of cover. This way it will always fill the banner whilst maintaining the right proportions.

The height of the banner is hard coded to 600px, this won’t change when switching to a mobile view. I don’t know what visual appearance you would like to achieve but I guess this is not what you want. You may need to look into this.

I would give it a height of auto which relates to the content inside. I would therefore myself use those HTML coded h1 and h2 and portfolio logo. And make the background-image consist of the “gradient” (don’t know what else to call it :stuck_out_tongue: ).

The mobile banner image not showing, I at the moment have no clue on that. I do would like to remark that capitalized letters is not always properly interpreted and I would suggest refrain from using capitalized letters in file names.

Ok, I tried changing the height to auto and background-size to cover, but I actually can’t see my banner anymore now. I might try going back to using the h1 and h2 with the logo after I get the image to show up, I was just having so much trouble with it, I included the text and the logo in the image for now.

As I said, auto relates to the content of the element. Since you have no content inside the banner div it will collapse and indeed not show the background-image. So the image will show up once you applied the logo, h1 and h2.

Subsequently if you want the banner to only consist of an image, why not add it in the HTML instead. Make sure you add both images to the div and use the @media query to show or hide the specific images.

Applying the mobile image like mentioned above might even solve that image not showing.

Oh! Ok, I understand now. That totally works. Thank you so much for your help!!

1 Like

You are very welcome. And don’t hesitate to shoot me with more questions in the future :wink: .

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.