Missing website content on mobile browser

Yeah, there’s an unusual CSS rule that is creating a huge header, causing it to overlap that particular section.

Try adding this CSS rule by going to Appearance → Customize → Additional CSS:

body.home .header:before {
   height: auto;
}

No luck. There is still a gap between the green box with content and the top slider. Thank you for suggestion. I am going to try changing the background color of a few selectors and see if I can find the right one that has to do with that section of the page to help locate the error, then move forward from there.

Hold on could this be a media query issue…..

• This reply was modified 5 years, 8 months ago by Austin K.

I didn’t see the CSS rule that I suggested.

Just as an FYI, this is the rule that’s causing the problem:

body.home .header:before {
   bottom:auto;
   height:1132px;
}

You could probably add a media query to set the height to auto, but I think just setting it to auto outright should be OK.

I see a large gap in mobile view–created by numerous empty paragraph tags. See this image:
https://snag.gy/XEC5rf.jpg

Hello,

After adding css rule as suggested I not see immediate results.

Here is an image of where I put the code which is still currently active in the css editor.

View post on imgur.com

If it needs to go elsewhere I can move it.

Next, below is a screen shot I have taken of the code viewer in WordPress for this section with the white box over it.

This first link is of the code

View post on imgur.com

This second link is of what the content actually looks like (just in desktop form so that you can see it without a white box over it)

View post on imgur.com

The GOOD NEWS though…

Deleting all of those empty paragraphs worked and made the images show up as it should be.

**Update**

I have found a temporary fix. Not economical, but is working to show content.

Here is the link https://imgur.com/r9dCzDz

The “box of emptiness” still exists, but I figured out how to get the content that was hidden to now show below that box.

The problem is that you copied in the code that already exists, not the code that I suggested in my original post:

body.home .header:before {
   height: auto;
}

That is, the height needs to be set to auto.

That being said, that rule won’t work if you put it into their suggested stylesheet because the stylesheet that they provided for custom CSS comes before the theme’s main stylesheet, not after, which means any rule which uses the same selector won’t override the theme’s rule. Instead of adding the above rule to that custom CSS file, add it to WordPress’ custom CSS option by going to Appearance → Customize → Additional CSS. That should get rid of that large gap in the header.

Like so?

View post on imgur.com

Problem solved

.header .header_block {
border-radius:2px
}
.camera_wrap {
padding-top:30px;
margin-bottom:-80px;
}
body.home .header:before {
height:auto;
}
.clearfix {
padding:10px;
}