Image home feature 4 not scaling on responsive mode (smallest screens)

Tagged: background, images, mobile, responsiveness, squareone

This topic has 12 replies, 3 voices, and was last updated 11 years, 10 months ago by Wes.

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

Author

Posts
April 28, 2014 at 12:27 pm #11956
elenabrz
Customer
hi Wes at my staging site, the image uploaded for home feature 4 doesn’t really scale on my samsung galaxy SII, just like the rest of uploaded images do. Any way to solve this? thanks!
April 28, 2014 at 2:38 pm #11977
Wes
Moderator
Check your widget area to see if you have an extra </div> at the very bottom. If so, delete that and see if it makes a change.
April 28, 2014 at 5:40 pm #11982
elenabrz
Customer
There was an extra div indeed, but removing it didn’t help, the image of home feature 4 isn’t resized on small screens. I have tried with my husband’s cellphone, and with his cellphone, all images didn’t resize.
April 29, 2014 at 5:46 am #12000
elenabrz
Customer
This reply has been marked as private.
April 29, 2014 at 11:23 pm #12020
Wes
Moderator
it’s resizing just like the other sections/images. Try hitting your Reload button and resize your browser to see it resize.
April 30, 2014 at 5:35 am #12026
elenabrz
Customer
This reply has been marked as private.
May 30, 2014 at 11:17 am #12508
Wes
Moderator
Just letting you know I recently made an update for the background images – https://appfinite.com/topic/squareone-version-1-2-is-now-available/ You can add that code in the responsive area of your css.
June 5, 2014 at 12:27 pm #12573
elenabrz
Customer
Hi Wes
The images of my site aren’t yet rescaling after adding that code to my css.
Seen on Galaxy SII.

:S
June 5, 2014 at 12:47 pm #12574
Wes
Moderator
The code isn’t showing up in your css.

Are you using a caching plugin? If so you’ll probably need to clear/reset it so it will show up if you’re sure you’ve already added it to your css.
June 6, 2014 at 7:41 am #12577
elenabrz
Customer
Wes, I cleared cache. And yet…would you mind taking a look on a small screen? See what happens :S
June 6, 2014 at 10:17 pm #12586
Wes
Moderator
It still looks a little fuzzy, I would remove everything except for the background-attachment: scroll;. So change the following 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;
}
```
and replace it to look just like this –
```
.head-bg,
.home-feature-1,
.home-feature-2,
.home-feature-3,
.home-feature-4,
.home-feature-5,
.home-feature-6,
.home-feature-7 {
	background-attachment: scroll;
}
```
The end result should look just like the demo. Try and view the SquareOne demo http://demo.appfinite.net/squareone/ on your phone to see how clear the images are. Let me know once you make the adjustment and I’ll check on my phone. You should see a big difference.
June 12, 2014 at 8:37 pm #12649
Mike
Customer
Hi, this worked for me:
```
		.head-bg,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7 {
	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;
}
```
June 14, 2014 at 10:09 pm #12685
Wes
Moderator
@elenabrz did you get it working? I checked your site on my iPhone and it looked much better.
Author

Posts

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

You must be logged in to reply to this topic.