Remove White Space on White Sides of Jumbotron Image

Greetings…I am trying to remove the white space on both sides of my home page Jumbotron. I suspect some of the CSS I added to customize the navigation menu and/or the Jumbotron image created this space. Here is the CSS I’ve added that pertains to those 2 areas:

#header .top-header .header-navigation ul li a {

color: #efb9a9;
}

/* menu */
#header .top-header {
padding-top: 5px;
padding-bottom: 5px;
}

/Fixed Header/
#header .top-header {
background-color: white;
position: fixed;
z-index: 1000;
}
/reduce padding on header image/
#header .bottom-header {
padding-top: 550px;
padding-bottom: 50px;
}

/* home page image */
.home header#header {
background-position-y: 95px;
}

Will you please tell me what I need to adjust to remove this white space so that the image spans the entire length of the screen? My site URL is foraraneyday.com

Thank you!

Hello there,

I hope you are doing well today.

Please try removing the following CSS code:


/* home page image */
.home header#header {
background-position-y: 95px;
}

Best Regards,
Support

Hmmm, I tried removing that code, but unfortunately doing so moved the image up and cut off our heads which was the reason this code was suggested to me. Also, it doing so, it did not appear to resolve the white space issue. Do you have another suggestion? I so appreciate it.

Hello there,

I am looking into this issue but I do not see where the issue is being caused yet. Have you made any changes to the theme files?

Best Regards,
Support

I was able to eliminate the white space by replacing this CSS:

/Fixed Header/
#header .top-header {
background-color: white;
position: fixed;
z-index: 1000;
}

with this instead:

/Fixed Header/
#header .top-header {
background-color: white;
position: fixed;
z-index: 1000;
width: 100%;
left: 0px;
margin-left: 0;
}

However, in so doing, I’ve somehow shutoff what I thought was the most appealing part of this beautiful theme, the parallax scrolling (I believe it’s called). Now the entire homepage of foraraneyday.com appears fixed and all images/content scroll as normal. Also, my CSS codes that contain the property “background-position-y” are now showing error messages. Please help.

Hey there

Glad to assist you here in this ticket,

this code should be removed from additional css:

#header.header-front-page {
background-attachment: scroll !important;
}

this is the reason why you lost parallax like effect

regarding css error warning, leave it as is it will work :slight_smile:

I really appreciate the response, but from what I can tell, that CSS or another other one pertaining to scroll is not in my additional CSS. Here is all of my additional CSS. Could any of these be causing the issue?

#header .top-header .header-navigation ul li a {

color: #efb9a9;
}

/* menu */
#header .top-header {
padding-top: 5px;
padding-bottom: 5px;
}

/Fixed Header/
#header .top-header {
background-color: white;
position: fixed;
z-index: 1000;
width: 100%;
left: 0px;
margin-left: 0;
}

/reduce padding on header image/
#header .bottom-header {
padding-top: 650px;
padding-bottom: 50px;
}

/* home page image */
.home header#header {
background-position-y: 95px;
width: 100%;
}

/remove footer widget and gray area/
#footer > div.container{
display:none;
}

#footer {
padding: 0px 0 0;
}

#header .bottom-header.blog {
padding: 360px 0;
padding-top: 150px;
}

#header {background-position-y: 95px;
}

/remove blog title/
#header > div.bottom-header.blog > div > div{
display:none;

Hey there

@jenicaraney hope you are having a good day :slight_smile:

mm, can you send me your admin details here privately? i want to take a look from inside, please don’t forget to use set as private reply checkmark

No problem, the login credentials are as follows:

foraraneyday.com
Password: Blog1622!

Hello @jenicaraney

Sorry, but what is the admin name? :frowning:

foraraneyday.com is what I use for the admin name to login.

Hey there

Sorry but it not worked :frowning:

Please add this CSS code in the same place and let me know if it jumbotron image parallax problem is resolved:


/*Fix jumbotron parallax problem*/
#header.header-front-page {
    background-attachment: fixed !important;
}

Unfortunately this did not fix the issue, but I believe I did deduce the login issue. I provide my bluehost login credentials, which are:

username: foraraneyday.com
password: Blog1622!

I believe what you may need is my worpress login, which is:

username: [email protected]
password: $Umbr3lla$

Does that help you to get in to get a better look at my additional CSS? So sorry for the hassle!

Hello there,

I was able to login. There is no white space on the sides of the jumbotron and I fixed an error in the CSS but there is a warning for the background position y CSS but this is because background position y is not a standard yet, it should be but WordPress needs to add more recognition for it.

Best Regards,
Support

hi

Please check now parallax effect is enabled, i just added CSS code provided here… its working