CODEWITHSUNDEEP
ioscssgoogle-chromefirefoxresponsive-design
v1shnu
v1shnu

Reputation: 2231

Responsive website works fine on Firefox responsive mode, but not in Chrome or Device

I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.

However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.

This is my site - http://v1chu.github.io/

The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.

Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.

Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.

Upvotes: 2

Views: 2264

Answers (2)

hungerstar
hungerstar

Reputation: 21725

You're heading in the right direction.

Problem #1, Background Images

Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.

You have set background-attachment via the shorthand background property. Remove fixed from the background property.

background: url( '../img/aboutme.jpg' ) no-repeat center;

Problem #2, Text size

You need to use a responsive meta tag. Here's one that I use:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Upvotes: 3

chris cozzens
chris cozzens

Reputation: 517

The problem seems to be here: 

.s2 {

background: url(../img/aboutme.jpg) no-repeat center fixed;

}

I removed the fixed and the background displayed in chrome

s2 {

background: url(../img/aboutme.jpg) no-repeat center;

}

Upvotes: 0

Related Questions