Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive theme not responsive
Tagged: images sizing, parallax-pro, responsive
- This topic has 10 replies, 3 voices, and was last updated 9 years, 5 months ago by
codebot5000.
-
AuthorPosts
-
August 15, 2015 at 7:25 am #162454
codebot5000
MemberThe 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.comAugust 15, 2015 at 8:33 am #162456codebot5000
MemberI 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.
August 15, 2015 at 8:41 am #162457LJ
MemberAssuming 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.
August 15, 2015 at 8:44 am #162458LJ
MemberHah. 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.
August 15, 2015 at 8:55 am #162459codebot5000
MemberYeah, 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.
August 15, 2015 at 9:18 am #162461frobn
MemberTry 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; }
}
August 15, 2015 at 9:33 am #162462codebot5000
MemberThank 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.
August 15, 2015 at 11:06 am #162465frobn
MemberThe 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.
August 15, 2015 at 11:27 am #162466codebot5000
MemberCheck it out now. I think the issue has been fixed.
August 15, 2015 at 11:53 am #162467frobn
MemberIt looks fixed. Do you want to share how you solved the problem?
August 15, 2015 at 1:30 pm #162473codebot5000
MemberI 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.
-
AuthorPosts
- The topic ‘Responsive theme not responsive’ is closed to new replies.