Image sizes are different in different browsers

HTML & CSS
1

Hi Folks,

I have created a responsive site(Under Construction), in slider images are perfect in FF but while checking in chrome those are small.

Did anyone face these type of issue, if yes can you tell the how to fix that?

URL: idizital.com

Thanks

2

I do confirm that it looks different in IE8 and Chrome. In Chrome seems to look correct but in IE the left arrow goes over the text and the slide takes much more space

1665×855 536 KB

For what I see ( and I just gave it a really quick look) you seem to use PX for everything. That doesn’t go well with a fluid design. Have you tried to use em or % instead?

3

Thanks for quick reply.

Do you check in FireFox and see the image sizes?

i have used ems for font-sizes and for the remaining properties i have used pixels, Do we get any issue with them?

4

I just looked using Firefox. It looks like your media query breakpoints are off a bit.
Depending on your viewport width, for example, going from wider to narrower.

  • It looks OK.
  • The text goes under the left arrow until it hits the left side.
  • The text resizes and it again looks OK
  • The text goes under the left arrow until it hits the left side.
  • The text resizes and it again looks OK

Also, depending on the text and image, sometimes the right side of the text goes under the image.
…

5

So the page have Multi personalities disorder… :slight_smile:

Do we need to change the breakpoints?