Chrome 开发者工具在更改屏幕宽度时截断页面

Question

When inspecting my webpage and trying to resize the screen width for responsive designing it begins to cut my website on anything lower than about 1340px. See link for photo. Screen Width In Chrome Developer Tools Not Working

Answer 1

I think this may help you https://www.w3schools.com/css/css_rwd_mediaqueries.asp you need to create different styles for each resolutions im not sure if you done it already but this should help you

in that's how i make my projects responsive

you may need to make a new background image with each new screen size but that is easy just download gimp and resize the image make sure that you resize it in a way that it doesn't stretch

Answer 2

This was one of my first websites and I actually ran into this same issue a couple years later during the front-end bootcamp I attended. As I was more experience by then it was easier to find the element causing the issue. If you're not sure what styling may be causing this, you can inspect in the dev tools, and in the elements tab you select a parent element and use the arrow keys (Right & Down) to navigate through the DOM. This will eventually highlight your trouble element's styling issue (You'll see it extending past the media query that everything else is adhering to) and you can fix it accordingly.