I started the page, everything works, but when I change the scale to 25% - 33%, then the layout partially breaks, tell me what the trouble is?

There are no such problems in the Edge and IE 11 browser, but Chrome, Opera, Mazilla, Yandex browsers break the layout. enter image description here enter image description here

.button { background-color:#ee8129; padding:10px 86px; position:relative; left: 8px; top: 15px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(238,129,41) 0%, rgb(238,130,51) 100%); box-shadow: inset 0px 0px 0px #b3560b, 0px 6px 0px #b3560b; border-radius: 4px; text-transform: uppercase; font-weight: bold;

}

 .button:hover { left: 8px; top: 20px; box-shadow: inset 0px 0px 0px #b3560b, inset 0px -1px 0px #b3560b; color: #fff; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background: rgb(238,129,41); text-transform: uppercase; font-weight: bold; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.3)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.4)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.3));

}

 <div> <a href="#" class="button">Enroll Today</a> </div>
  • Add a code to the question. - edem
  • there css code for 300 lines, how to be? :) - Litash
  • Add the code of the fragment that breaks. Judging by the picture, this is the button code. - Sasha Omelchenko
  • Well, let him break. Now if you had it at 75-150% would break it would be bad. And on 25 you need to score - Alexey Ten
  • Although specifically there will be enough white-space: nowrap - Alexey Ten

1 answer 1

As written above, use either css:

 white-space: nowrap

for the button text, or wrap the button text in the <nobr>,

This happens due to the fact that different browsers render pages in different ways when zooming. Those. 1px at 33% - will be displayed either as 0px or as 1px, from this, a layout can walk a little, if there are no gaps for such cases.