Zoom out layout issue with Chrome and Safari

Asked Jun 30 '16 at 12:05

Active Jun 30 '16 at 13:03

Viewed 748 times

I have an issue with my site on Safari and Chrome only. It appears, when I zoom out of the page using STRG and mouse wheel scroll. The layout, which contains 5 links in a row, breaks and I now have only 4 in a row.

Have a look at that sample: https://jsfiddle.net/SchweizerSchoggi/8aoopsqk/ and check in the different browsers zooming out two or three times.

There are no changes in IE and Firefox, only in the webkit browsers. Why does this happen and how can this be solved?

I use nth-child to build my layout:

a { 
  display: inline-block; 
  margin: 0 10px 10px 0; 
  ....
}

a:nth-child(5n+5) { 
  margin: 0 0 10px 0; 
}

Any help or advice is appreciated, thank you in advance.

EDIT: Thanks to @Muhammad Usman, your idea was very helpful to me!

edited Jun 30 '16 at 13:03

asked Jun 30 '16 at 12:05

JonSnow

Why would you want people to zoom out your page? – peer Jun 30 '16 at 12:06
1

In my chrome its working fine, however replace `inline-block` with `float` and add `overflow: hidden` on `#container`. I hope it will solve your issue. – Mohammad Usman Jun 30 '16 at 12:10
Possible duplicate of [Zoom changes the design layout](http://stackoverflow.com/questions/7835287/zoom-changes-the-design-layout) – Randy Jun 30 '16 at 12:19
@Muhammad Usman, THAT solved my problem, thx a lot!! – JonSnow Jun 30 '16 at 12:32
@SchweizerSchoggi you are welcome, dear) – Mohammad Usman Jun 30 '16 at 15:36

Zoom out layout issue with Chrome and Safari

0 Answers0