on this page:
http://www.wackersanitary.com/home/wacker53/public_html/tempUpdate/residential/
when i resize the browser to be 600px or less i would like for the elements of the slot containing the payments info & the latestnews (diagonal blue stripes in the back ) to got to a width of 100%.
I am finsishing and tweaking the other elements ok but can’t seem to get those to fall into place.
Any suggestions please?
thx
D
wackersanitary/style.css (Line 1017)
Just guessing, but you probably want that second media query to specify (max-width:600px) instead of (min-width:600px) and you’ll want to change the width of both boxes in that query.
Test without the !important modifiers, too. They really should used sparingly.
Those pesky credit card icons look like they might be out of place in the HTML.
Disclaimer: Guesses not tested.
Hello Ronpat, thank you will try it out again w/your suggestions.
yes i am pretty leery of using the !important tag. can see how it could get both addictive & out of hand for a quick solution but than would wind up making things worse, much much worse later.
So was kinda using until i figured out what was wrong. thx Again
D
i was following this advice that had the @media queries right under each component or element it applied to.
in hindsight not something i’ll do again or would advise myself.
in the process of consolidating the queries & cleaning them up.
I’ve used that technique several times with relatively small sites that had a consolidated stylesheet where the styles were functionally grouped. Being a single(simple)-minded cat, though, I would think that it would be difficult to manage in a complex WordPress site where conflicting/overriding styles can be spread across several stylesheets. Kudos for giving it a try.
thankee!
I’ll see the simp…errr single minded thinking and raise you some good compartmentalization/ocd-ish skills.
won’t be trying it again!
D
I use that method as it is the only way to work on a large site although I keep the media query under the block of code it refers to rather than every item. e.g. if you are doing a navbar then code the nav and then add the media query at the bottom.
I’m working on a large site that has thousands and thousands of rules and If I have to update the nav and then search through a media query block to find what I’ve changed in the media query (at every level) I would be there forever and indeed probably miss something that I had changed as I would have to remember all the elements that I had just changed. Now I just go straight to the nav code and update the nav and update the media query at the same time on one fell swoop.
I couldn’t imagine doing it any other way unless it was a small one or two page site and then you could get away will all the media queries at the end.
hi paul.
maybe it is a matter of experience?
But right i’ll stick to having the @media at the bottom. I think i would provide a searchable menu for them instead so a ctrl+f could take me to what i wanted.
Not if the media queries were in one of the other files.
Maintaining multiple CSS files but with media queries in one file would be a nightmare.
It’s so easy when the media queries are next to the elements you want to adjust and you don’t have to wade through miles of other code to find what you want. There’s less chance of error or forgetting something or adjusting the wrong thing. Even a typo in the current media query will only affect the current media block and not your whole page.
Having all the media queries at the end of the CSS is harping back to the days when people were device chasing and then setting all their 768px (for example) rules in one place to change the whole layout at that breakpoint. These days we don’t code for devices we code for the design so the code changes when the design needs it and this is different for all the elements in the page so makes no sense to group media queries somewhere else.
In the end it does become a matter of personal preference but whatever you do though you have to be consistent.
very good point. am leaning against multiple css (at least for wp) in that the addy css if placed in another folder would not be accessible by wp-admin’s editor panel unless you added a plug in.
but i’d imagine if you have a very very large size site they would be needed. or planned for.
Consistency is most def not an hobgoblin of a little mind when it comes to coding and organizing!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.