My page. Elements suddenly stops at 400px width. When you open DevTools in responsive mode and change the size under 400px width, elements stays at this specific width and wont get smaller. My question is why? I think there is one element which "breaks" this for all other elements, but I cant debug which one (or more) it is. HTML tag from this point starts to shrink and not getting 100% of website width. This website is still in development.
HTML tag is set to:
box-sizing: border-box;
I tried to set a fixed width size for a few elements that I thought were causing this. Of course It didnt help…What Am I missing?
>Solution :
The 1 element which "breaks" this for all other elements is… div.home-services-container inside div.smaller-services-section
it has
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 5em;
if you go to Computed (next to Styles) tab inside Chrome DevTools where you inspect elements you’ll find that this padding: 5em tanslates to a padding of 50px on the left and 50px on the right. Adding this to the 300px (from minmax(300px, 1fr)) we get our 400px
Hope this helps. Good luck with development!