The picture on the left is what it looks like now on a phone screen. The picture on the right is what I'd like it to look like, where more words can fit per line. I made the html background red to highlight it and the body div in grey.
What changes would I need to make to the code in order to get that result? I'm not sure why the page includes that part on the right side, but the left side looks okay. I'd like to get that part off the screen. I'm not sure if this piece of code helps, but here it is: (maybe it has to do with the div.container)
@media only screen and (max-width: 680px) {
div.container {
margin: 0 auto;
width: auto !important;
}
Add these in your style :
html,body{
margin: 0 !important;
padding: 0 !important;
}
if it doesn't make any sense, then add this viewport to your head tag in html :
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no; target-densityDpi=device-dpi" />