[Sebastian]

Hi!
With the release of the new iPhones my site is no longer perfectly optimized in a responsive sense, for said iPhones ofc.

my site: http://www.obsid.se

I want the site to be edge to edge, no background image when on a phone. It worked perfectly on all iPhones from 3 to 5s, but when visiting with the new screen sizes I get a nasty background-image-frame which makes the site look like it’s from 2003.

If I’ve understood this correctly, all I need is some CSS-code that I paste in the “Custom CSS-box”, right?
If that is the case, can anyone skilled in CSS please post the necessary CSS to fix this? I would appreciate it immensely.

Thanks in advance and greetings from Sweden!

[Sakin]

@Sebastian: Sorry we are waiting for iPhone6 arrival and then only we can test it. Can you send me screenshot of what you are seeing and what you want to change to .

[Sebastian]

Ok, sure.
Where should I send screenshots?

[Sakin]

@Sebastian: Just upload your screenshots in your site or any photo sharing site and paste in the URL here.

[Sebastian]

Sure

This is what it looks like on iPhone 6 and iPhone 6 plus (Also Samsung Galaxy Alpha).
https://dl.dropboxusercontent.com/u/7625970/IMG_1590.PNG

And this is what it is supposed to look like, which it does on the iPhone 5
https://dl.dropboxusercontent.com/u/7625970/IMG_1596.PNG

So what Im in need of is some CSS that helps me fix the responsiveness.

Hope you can help! Thanks in advance.

[Sakin]

@Sebastian: For your site, can you try the following css in “Appearance => Theme Options => Custom CSS” box.

@media screen and (max-width: 667px) {
	.site,
	.no-sidebar-one-column .site {
 		margin: 0;
		width: 100%;
	}
}

[Sebastian]

I worked perfectly!

Thanks a lot Sakin!

[Author]

Posts