CODEWITHSUNDEEP
htmlcsssassresponsive-designresponsive
Jonas Praem
Jonas Praem

Reputation: 2445

Styling works as intended in 'responsive design mode' but breaks in small desktop window

I have an issue which only occurs in small desktop browser windows. The 'responsive design mode' shows the content as intended, however if I resize my browser to the same dimensions in a normal browser window the view is changed.

More specifically I did a 'hidden scroll bar css trick' roughly just the css: 

padding-right: 17px;
box-sizing: content-box;
overflow-y: scroll;
width: 100%;

In the 'responsive design mode' the view looks roughly like this:

intended view

In a small browser window with the same size the view looks like this:

broken view

This is fixable by adjusting the width to 102%, but the question is:

How do I target only small browsers and not mobile devices ? Perhaps even better, what 'hide scroll bar' css trick could avoid this issue on small desktop browsers ?

I prefer a sass only solution, but jquery options could be a workaround.

Upvotes: 1

Views: 115

Answers (1)

Hamid R.
Hamid R.

Reputation: 127

Please include overflow-y: auto; instead of overflow-y: scroll;. As, overflow-y with scroll property adds scroll bar no matter what is the situation. But on the other hand, overflow-y with auto adds scroll when content is exceeding the given limit.

Upvotes: 2

Related Questions