Mobile container width incorrect vs. desktop

Question

I have taken over a website for a company and when it was handed to me, there was quite a bit of work to get it where it is now. Some of the stuff in the site, the owners want to keep, some they allow me to change. One thing I am trying to figure out right now is how to get the mobile version to line up with the desktop version. It seems like in portrait mode, the container width is too small; there is space to the right and some images overlap. I have tried the recommendations in other threads that seemed to be asking the same question, but nothing worked so I thought I would post my own question in case I am changing the wrong code.

I added:

<meta name="viewport" content="width=device-width, initial-scale=1">

and looked for pretty much any "width" in the css, but to no avail. What else am I missing?

Here is the site:

http://leisurelandrvcenter.com/

specifically the "Inventory" page:

http://leisurelandrvcenter.com/inventory/

- Disclaimer -

This seems to only happen on certain devices and only in portrait mode. Landscape mode works fine on the devices checked (android only). Thanks in advance!

Answer 1

The images are too large for small screens. You could add mediaqueries to your css that set the width of images to 100% for smaller screens. (And anyway use css to set img sizes, instead of using img attributes in the html)

Answer 2

if you want to make it responsive you have to get rid of all the fixed width there are on the css, for example:

if you want to make the inventory page responsive you'll have to edit the following css:

#layout-content {
    width: 1285px;
}

to this:

#layout-content {
    max-width: 1285px;
    width: auto;
}

Then in order to resize the images (for example the logo) you'll have to set the following css:

img { max-width:100%; width:auto; }

Instead of using the img tag you should use the css class or ID of the logo or any image you want to make responsive.