Help with page resizing to mobile window

#1

Hello. I was making a few simple edits on a site that I did not build and when I viewed it on my phone I noticed that the homepage does not resize to fit smaller screens. But it does resize on every other page.

http://victoriarealestatewithmelanie.com/

I did look with the google inspector and at the source code but I can’t figure out why this is happening. Is there an element on the homepage that is stretching the width preventing the proper resizing that happens on other pages?

I know the website in general is not responsive, it shrinks the content and forces the user to pinch zoom. But that’s a whole other can of worms. For now I just would like the same effect for the homepage that happens on other pages where the website adapts to the screen.

Thank you for your expertise!

#2

It is strongly recommended that you validate your code as it is being developed. Invalid code cannot be expected to function cross-browser.:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fvictoriarealestatewithmelanie.com%2F

https://validator.w3.org/nu/

If you have never completed a class in basic HTML and CSS, do yourself a favor and do so.

1 Like
#3

Hi @ronpat

Thank you for the response.

I did not build this website, its 7 years old, not sure who originally built it, sounds like it was a freelancer from India and my client is no longer in touch with them. I was just changing a few broken links and noticed this issue with the homepage. I have completed basic HTML/CSS courses.

I was hoping for some insight on what could possibly cause this, wasn’t sure if it was something obvious.

That is a useful link you sent me though. I compared the validator results between the homepage and the other pages and the homepage has a lot more unique errors. It looks like the developer injected the search listings bar with a bunch of html that might be breaking things.

I will try editing this section to see if I can fix the resizing issue.

1 Like
#4

Whoever wrote the code used some techniques that are 20+ years old. Over time, others have made several fundamental errors of duplication and omission. It would be well worth your time to try to modernize the structure as much as you can – which shouldn’t take too long – then focus on the details of the presentation.

1 Like
#5

The reason for that is that there is a viewport meta tag in the homepage which does not appear in other pages. Though it’s not obvious to spot being where it is, in the second <head> element of the page.

I’m afraid the can was already open before you even looked at this.
The page is not a littel bit broken, it’s a real mess of code that needs to be put straight.
The validation results should point you in the right direction, but IMO it’s high time for a major overhaul.

3 Likes
#6

Ron, the more I search through the back end the more I am realizing what you are saying. Thank you for your advice. I will see if my client is open to me cleaning things up.

1 Like
#7

Sam, thank you for your response.

You are correct about that extra viewport meta tag! I was suspicious that may be the cause after checking the helpful validation link that @ronpat shared with me. I removed that and the issue was resolved.

You are both right about this being messy code.:grimacing: I have spent a lot of time in the back end trying to fix small things and I am having to search through unnecessary duplicates and having certain elements in strange places. It does appear that multiple people have made changes to the website over the years without regard to what the person before them had set up.

I agree that a total overhaul is in order and have suggested that to the client, hopefully they will be open to it.

Thanks a lot for your help.

1 Like