I need to understand why my site [link removed by request] is breaking up when I zoom out. People have said it’s the css but I need guidance on how to fix. Also, my site looks big to me on 2 computers but fine on mobile. It didn’t look big when I started coding it??
It would be best if you could post a link to your site. We need to see the actual code to troubleshoot the problem.
I’m confused by what is meant by “breaking up”
What I see is that things - the slider in particular - don’t zoom out in proportion.
I also am not clear on what use case a visitor would zoom out.
I can understand zooming in to see something that is small better.
And I can understand zooming out to get rid of scrolling.
But I don’t see either of those on the page.
@Feisty1 some screen captures should help.
What part of the “This Site is down for Maintenance” is giving the problem?
2 Likes
felgall I’ll take it out of maintenance mode.
Sorry about that. Went to make some changes and never thought about it…
Mittineague does the site look huge on your monitor? I only zoomed out to see if it would look better to me and that’s when I saw it. Also, I am sight impaired and usually zoom in and my daughter came to look at the site and zoomed out. We both thought it looked awful.
I don’t have the best vision and am currently in need of a new prescription.
I have my browser settings for minimum font size at 24 so that could be affecting what I am seeing.
As for “huge” and “awful” those are relative and subjective.
IMHO the site looks pretty much OK to me and I would probably only tweak a few things.
eg. that rectangle that is covering some text, the size / location of the social icons.
Please note however, that being able to evaluate “art” is not one of my strong points.
Explain “relative” and “subjective”? Now when I look at it with my monitor even on zoom the rectangle doesn’t cover the text. That rectangle is supposed to have the words “Contact Us” but I’ve never been able to get the words to show up. lol
When you zoom out you don’t see all yellow and blue? The white part of the site zooms out but then you see the blue and yellow. The slider and form don’t move at all. I just don’t understand what is happening so if someone else does, please explain?
TIA 
relative as in “compared to what”
subjective as in “depends on who the who is”
I don’t know what you’re seeing.
As I posted previously, “before and after” screen captures would be helpful.
Before and After WHAT?
After what was changed?
The view in that second screen shot is wider than 1920px… considerably wider.
Can you explain? I’m not following you?
The first shot was before zooming out Ctrl± then the second shot was on zoom out Ctrl±
Here is the before zoom. Notice that the page looks together with the slider form and sheet lining up.
OK, now I understand. Thank you for clairifying.
Start by replacing the viewport meta tag.
Delete this:
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
Replace with this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is what it looks like after the zoom out. Notice that the slider, form and sheet don’t line up and you see all yellow and blue around it.
Do I add any numbers to this or just put it in the way it is? I assume I’m putting this in the header.php?
Naming colors might not be a good idea for you. I see nothing that is yellow or blue. Perhaps the color balance of your monitor is waaay off.
You find the orignal and replace it with the new. If the original is constructed with php, the include the php code in your next post and I or someone here will show to change it.
The intent is to remove these two items
maximum-scale = 1.0, user-scalable = no,
I see the color from my theme all around the white picture as in the image “afterzoom” above. It’s a yellowish/orangish color on the top just like all around the form and the blue. Is this the was it is supposed to look on zoom out?
The after screen capture is what I was referring to with
There are several things that could be involved.
I use
<meta name="viewport"
content="width=device-width,initial-scale=1">
but the page has
<meta name="viewport"
content="initial-scale = 1.0,
maximum-scale = 1.0,
user-scalable = no,
width = device-width">
TBH I don’t know what maximum-scale and user-scalable might be doing.
The page has
<align="center">
which may not be doing what you think it should be doing.
On top of that there are links to 14 CSS files and more CSS in the page itself. And the JavaScript may also be affecting CSS.
It may not be so easy to debug.
I think the first thing I would try (on localhost, not the live site) is removing the slider and seeing how the page is without it.