Portfolio not responsive on mobile screens

1

I am almost finished with my portfolio. I’ve used bootstrap and some custom CSS.

I want the background img of my header section to fill the entire screen when the page is opened. This appears to be working when I open the page on my desktop and resize the browser. However when I view from a smaller device (iphone 5), the header background image is not displayed correctly.

Any help would be great!! Thank you!!

2

Well see that the img is wider than the iphone 5 screen or any phone making it fit in he screen would make it look weird.

one thing you can do is change the “bgimg-1” class to :

.bgimg-1 {
    background-image: url(https://github.com/JennyYennyful/Portfolio-Images/blob/master/kari-shea-272383.jpg?raw=true);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: contain;
}
3

Thank you! I tried using contain for the background-size property, but then the img does not fill the entire background in the larger screen size. I’m still working on it…