Responsive theme not responsive

[codebot5000]

The theme I'm using (one-pager parallax) should be responsive be default, however it does not seem to be working. If you drag the theme from full size down you will see serious spacing issues around the border of the site. In addition, when the site is viewed on a mobile device it defaults back to the stock images that came with the site.

If you would be kind enough to help me fix these issues I would greatly appreciate it. I would really like to keep this theme but I may need to abandon it totally.

http://jeff-cunningham.com

[codebot5000]

I figured out it was a plugin causing some of the issues, but I'm still having issues with the background images in mobile view. They do not scale properly to fit the screen when you view them on your phone.

[LJ]

Assuming the theme you are having an issue with is at the above mentioned site, I just checked it on 2 different resolution desktop monitors, a laptop and 3 different devices (Galaxy Note 8, iPad 2 and Galaxy S phone) and they all render responsively just as they should.

Are your images a skyline in the background, a brush stroke and a laptop? I get those everywhere. You might have some caching issues.

[LJ]

Hah. You posted while I was checking devices.

And yes, i now see what you mean about your background images on the one device I looked at again.

[codebot5000]

Yeah, you will not see it if you use the inspect element tool. You have to actually load the page on your phone. I'm using an iphone 6. The background images do not scale right. You can't even make out what they are. I tried setting them to width: 100% and height: auto; but it still doesn't work.

[frobn]

Try adding background-size: cover to your sections

Example:

section#welcome
{
  background-image: url("images/welcome-background.jpg");
  background-size: cover;
}

For the white spacing, site-inner has right and left padding at 5% in @media , try changing the padding to 0

Example

@media only screen and (max-width: 1023px) {

	.site-inner {
		padding-left: 0;
		padding-right: 0;
	}

}

[codebot5000]

Thank you frobn, I put background-size: cover; in my #welcome section and I added
@media only screen and (max-width: 1023px) {

.site-inner {
padding-left: 0;
padding-right: 0;
}
}

To the bottom of my main style.css but nothing seems to have changed.

[frobn]

The white padding still appears on firefox but not on chrome, try using !important.

This is the code present code
.parallax
{
background-size: cover;
padding-top: 150px;
padding-bottom: 150px;
}

When I removed passing-top and padding-bottom in inspector the image responded properly for left and right but then top and bottom parts of the image were cut off. I think you can solve the problem by serving smaller background images and decreasing the padding at media breakpoints.

[codebot5000]

Check it out now. I think the issue has been fixed.

[frobn]

It looks fixed. Do you want to share how you solved the problem?

[codebot5000]

I just changed the padding in inner-site to 0. The pictures are still not scaling though. I'm actually just going to have to ditch this theme and go with the standard parallax pro version.

[Author]

Posts