If it helps, here’s the CSS I put on the slider:
meteor-slides {
margin: 0 auto;
overflow: visible;
padding: 0;
padding-right: 30px;
position: relative;
z-index: 1;
}
If I remove these two items: “maximum-scale = 1.0, user-scalable = no,” won’t that mess up the responsive design for cell users pinching to zoom in?
I just looked at the errors from the validator and I know exactly what that <align=“center”> is for. It’s for the “Contact Us” on the form that’s supposed to go on the blue rectangle that you said was going over your text. Thant’s the one I said isn’t showing up on the form.
I see it in your post # 13 screen capture image.
I’ll figure that out later. For now I took it out the “Contact Us” and align:center. The blue rectangle box is where the contact us was supposed to go into. The blue box is actually part of the contact 7 form plugin. I’ll worry about all that later after I’m done with this headache. 
I have another site that’s live with the same content that I could work with. I can try to take the slider out tomorrow and see how it acts. I zoomed out on other web pages but didn’t see that I could see it all unfold or breakup like this one did. I’m going to look around to see if I find others.
I’d like to throw in a couple or three design tips, if you don’t mind.
(1) Never apply {overflow:hidden} to an outer container without a very good reason. For example:
#art-main {
overflow:hidden; /* DELETE Me, and watch the horizontal scrollbar appear. */
}
You need to be aware of how the content is behaving as the page is being developed. Hiding a scrollbar is not the way to do that.
(2) STOP abusing the !important modifier! Find out where the overriding property is located, instead. The best solution is usually to change the order of the CSS or change the specificity of the selector. Use it when absolutely necessary and not for convenience. As the CSS sage on the mountain says, “If everything is !important, then nothing is !important.”
(3) There are relatively few occastions when {width:100%} needs to be assigned to an element. For example, a default block element has a width of 100% by default. Assigning {width:100%} to a default block element that also contains horizontal padding can cause the element to overflow its parent container (and maybe trigger a horizontal scrollbar !). You should consider using {box-sizing:border-box} as a “reset” in the html element or at least learn how and when to apply it to specific elements such as form elements (which are notoriously hard to style).
Finally, I looked at the form-looking section earlier and found that the following styles interact and adversely affect its behavior. I did not test them thoroughly enough to believe that these changes are a perfect solution, but they DO put you in the ballpark toward having a responsive page.
style.css (line 53)
.wpcf7-textarea {
height: 60px !important;
/* width: 498px !important; /* DELETE Me */
width:100%;
}
style.css (line 79)
.wpcf7-email {
/* width: 484px !important; /* DELETE Me */
width:100%;
}
style.css (line 85)
.wpcf7-tel {
background: #ffffff none repeat scroll 0 0;
box-sizing: border-box;
/* height: 18px !important; /* DELETE Me */
width: 100%;
}
style.css (line 857)
input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
color: #3d5166 !important;
font-family: Arial,"Arial Unicode MS",Helvetica,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 4px 0;
text-shadow: none;
/* width: auto; /* DELETE Me */
}
I hope this is of some value to you.
2 Likes
This is definitely of value to me. I’m not offended at all and would like to get back to working on this with you as soon as I can. Got pulled away to work on something else but don’t want to forget about this at all.
Thx
ronpat I changed the css but now my form looks terrible??
Your site was down for awhile. It’s back now but the slider and some of the background parts are missing. Please let me know when it is in a condition to test.
ronpat I don’t see that my slider or some of the background parts are missing. I haven’t done anything to it since I last posted here? Maybe just slow loading?? Someone told me my issue with the zoom out may be Javascript in my theme??. I can’t check back in for a while but will check back in and work on this later on today.
Thank you!
Feisty1, the slider wasn’t missing after all. I have been doing some computer rearranging here and had turned off JavaScript for your site (I do not routinely allow JavaScript). I’ve allowed JS for your site and it is back to “normal” now.
It looks like you have restored all or most of the CSS to the state before I made any recommendations. You really MUST remove or override {overflow:hidden} from #art-main so the problems with the flow of the content can be identified and fixed properly.
Which of the stylesheets do you consider your custom stylesheet? or do you make changes to more than one of them? Whichever is the “custom” stylesheet MUST come last in the cascade of stylesheets. Its purpose is seriously weakened if it falls elsewhere… like, near the top.
Finally, at this stage, I see that the meta viewport tag is back to the way it was instead of simplified.
Again, I recommend replacing it with the shorter version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please add the “alt” attribute to your foreground images.
In order to minimize confusion and rework, I will help you in small chunks, one step at a time, so you can descibe problems that my code may create for you or problems that it does not seem to fix. Right now, I do not have a firm understanding of all of the issues and instead of letting me see how my earlier attemt was unsatisfactory, you just removed it. If we can work on this in smaller chunks so that I can see the results that you see, that will be a big help.
Why do you expect or need users to zoom the page out?
In post #17, you state that the slider, form and screen below it do not line up. How do you want them to look? A pseudo-screenshot showing how you want them to appear would help, because I do not see anything wrong with your image. Personal tastes differ so what is “broken” to you many not strike someone else the same way. That is why descriptions of problems need to include measurable or good descriptive details, not vague words or phrases like “breaking-up”.
From post #17:
Would you mind explaining what you mean by “don’t line up”? What do you expect your page to look like at that zoom level and window width?
Quite truthfully, there is too much JS on your site for comfort. Firefox spends more time stewing with the JS than not, and sometimes just fails to render much at all. The slider fails to fully load and run more than anything else.
ronpat thank you for replying!! I expect that the page will not fall apart when I zoom. I am talking about on a desktop or laptop and not on a mobile. I am taking exams all this week but would like to pick this back up after Thursday or Friday.
I didn’t code any of the JS on my site and all came from the templates that I use. I use the same program to make templates each time but have never had this issue occur. I don’t even know any JS but do see it.
I would like to know what you mean when you say “The slider fails to fully load and run more than anything else.”
Thank you for addressing this issue with me.
Feisty1, for anyone to help you, we have to use a set of terms/words with meanings that we both understand.
In post number 34, I asked you to describe what you meant in post number 17 when you stated “Notice that the slider, form and sheet don’t line up”.
You answered my post number 34 by saying
What is “falling apart”?
I still don’t know how the slider, form and sheet don’t line up and NOW I don’t know what “falling apart” means either. You may, but I don’t. I am not in in your head
Your descriptions MUST be less “subjective” and more “objective”.
Subjective in this case means personally meaningful to you, but not everyone else. Ambiguous.
Objective in this case means understandable by everyone. Factual. Describes something using words that help others visualize and understand what you mean. Does not require them to have a crystal ball or ESP.
Annotated screen captures are often helpful. Annotated means that you draw lines and add words that clarify what you expect others to understand about that image.
I cannot help you if I do not understand and cannot picture in my mind what you are trying to achieve.
I can imagine that persons who are visually impaired would want to Zoom in on a page and make objects and text larger. I cannot understand why anyone would want to Zoom out and make text and images smaller.
You need to describe your objectives and the problems that you see as “falling apart” and “not lining up” more clearly so others know exactly what you mean.
So far, I am not convinced that you followed my earlier recommendations correctly because I did not see the failures on-line and did not have an opportunity to understand why they did not work for you.
Perhaps you will have more time after your exams are over.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.