BG Images on Mobile

This topic has 14 replies, 2 voices, and was last updated 9 years, 9 months ago by Wes.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
June 4, 2014 at 7:42 am #12568
Daniel
Customer
Hi There,

So I added this code:

head-bg,
.home-feature-1,
.home-feature-2,
.home-feature-3,
.home-feature-4,
.home-feature-5,
.home-feature-6,
.home-feature-7 {
-moz-background-size: auto;
-webkit-background-size: auto;
background-attachment: scroll;
background-position: top;
background-size: auto;
}

Under this section:

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

But still not seeing any changes on mobile devices. Was there something else I was supposed to delete?

Thanks,

-Dan
June 6, 2014 at 11:24 am #12579
Wes
Moderator
Do you have a link to your site so I can see what’s going on?
June 11, 2014 at 8:37 pm #12637
Daniel
Customer
This reply has been marked as private.
June 14, 2014 at 9:41 am #12672
Wes
Moderator
I couldn’t get your site to load for some reason. Is it still up?
June 15, 2014 at 12:03 pm #12696
Daniel
Customer
Yeah it’s still up, let me know if it’s still now working. Thanks.
June 15, 2014 at 12:09 pm #12697
Daniel
Customer
Yeah, just checked my iPhone again and it still looks terrible when I look at it horizontally.
June 15, 2014 at 10:16 pm #12702
Wes
Moderator
Ok to fix this all you would need to do is move it up to the next responsive section (just move it up one). Right now it’s in the 480 width. Try moving it up to either 767 or you can add your own media query width if you want. For example, add this right before the 480 section –
```
@media only screen and (max-width: 640px) {
	.head-bg,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.footer-widgets {
		background-attachment: scroll !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
	}
}
```
You can change that number to whatever size you want.

Also, I noticed that your footer widgets section isn’t included on there so I added it to the code –
```
	.head-bg,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.footer-widgets {
		background-attachment: scroll !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
	}
```
This looks great so far 🙂 Keep up the good work! Be sure and add it to the showcase whenever you’re done – https://appfinite.com/showcase-your-site

Let me know once you make those adjustments and I’ll check on my phone to see how it looks.
June 16, 2014 at 8:41 pm #12721
Daniel
Customer
Ok great thanks! Just added the code, looks much better. Will check it out on the iPad as well and let you know.
June 17, 2014 at 12:11 pm #12738
Wes
Moderator
You’re Welcome!
June 18, 2014 at 7:41 pm #12768
Daniel
Customer
Ok so it looks good on the iPhone but for some reason I’m just getting blurred images on the iPad. Are you able to see the site on a tablet?
June 19, 2014 at 9:19 am #12777
Wes
Moderator
I don’t have one with me at the moment, but I can borrow one to check.

Until then, you could probably trying moving it up to the iPad/tablet section of your Responsive code and then reload the page on your iPad to see what it looks like.

Is this happening on Portrait or Landscape? Or both?

BTW your site is looking REALLY good so far! Whenever you’re done setting everything up be sure and add it to the showcase – https://appfinite.com/showcase-your-site
June 22, 2014 at 2:49 pm #12821
Daniel
Customer
It’s just happening on Landscape. I’ll try moving it up to the iPad/tablet section. Will definitely add it to the showcase once I’m done, thanks!
June 22, 2014 at 10:14 pm #12829
Wes
Moderator
I just checked and it appears to be happening in both landscape and portrait mode. The images are showing up blurry.

Let me know once you add that code in.

If you want me to add it in for you I can since it won’t take too long. Just create a temporary user/password if you’re interested.
June 29, 2014 at 11:53 am #12899
Daniel
Customer
Ok I added in the code but it changed the look of the desktop as well as the tablet. Is there a way to change one without affecting the other? Looks like the desktop and tablet landscape view is grouped into one under CSS.
June 30, 2014 at 11:34 am #12914
Wes
Moderator
It looks fine to me. I just checked on a desktop and an iPhone. Is it still not looking right, or did you get it fixed?
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.