Responsive CSS: Using @media to target changes?
Hi,
I have a zc155e and my template is a clone of Responsive Classic.
https://002mc.justmedical.biz/Produc...-Test-1-Images
In the file responsive_default.css, here are all the target groups:
Code:
@media (min-width:0px) and (max-width:480px){}
@media (min-width:481px) and (max-width:767px){}
@media (min-width:768px) and (max-width:1500px) {}
@media (min-width:1500px) and (max-width:1800px) {}
@media (min-width:1500px) {}
Are these set in stone?
In stylesheet.css, I have #mainWrapper set to 1200px (site max width). The last two @media statements seem superfluous to me since I've already limited my site to 1200px max.
Additionally, the third @media has a range of 768-1500px. Again, my site is set at a max of 1200 so I'd rather not have changes applied until a browser size is under it.
So I've been considering removing the last two @media and altering the third @media to go like this
Code:
@media (min-width:0px) and (max-width:480px){}
@media (min-width:481px) and (max-width:767px){}
@media (min-width:768px) and (max-width:1199px) {}
@media (min-width:1200px) {}
That way, I can target changes more cleanly... particularly those I want to aim at the Desktop version only. Like this:
Code:
@media (min-width:1200px) {
#some_important_object {float:right;}
}
So are the @media min/max statements contained within responsive_default.css set in stone? Or can they be altered without need to make further changes to:
/responsive_mobile.css
/responsive_tablet.css
/responsive.css
Your insight would be greatly appreciated, thanks!
Re: Responsive CSS: Using @media to target changes?
I think I've said this to you in several different posts and ways:P I'll try a different one.
Who cares what your monitor will hold (1200px), us old f@rt$ go for 1600 min with CTRL + hit a few times!
Those settings are based on standard monitor resolution settings. Course that's like "Based on the novel by....."
Seriously, constraining ANY flow, width, image, etc is totally counter-productive to the whole responsive template mantra. It should look good on whatever whoever is looking at it with. That's why all the information's between the @media beginning and the } ending. Monitors in the lower ranges tend to be in the "squarer" category while newer monitors are more letterbox. The sections are there to adjust if needed.
To paraphrase, the designer who designs only for his or her monitor has a fool for a client.
Re: Responsive CSS: Using @media to target changes?
Just an example of how @media can be your friend. Take a gander at haredo.com.
If your monitor can see more than 1400px in width, you'll see the logo image (all the "Hare Do" styles) sitting between the left- and right-hand columns and the columns up against the navMainWrapper. Reducing the browser window width below 1400 will show you how helpful the @media settings can be in a responsive template.
If you don't have a monitor with over 1400 in width, you will see that the logo image is nestled above the left- and right-hand columns. Lotta stuff there. Compressing the window, you'll note that the image does not start to reduce in size until a screen width of ~945px or less.
In this scenario, the logo image is important on a desktop but not so much on a tablet or mobile. We didn't want the image to get "scrunched" unless absolutely necessary. All managed by Q@media calls in the stylesheet.:yes:
Re: Responsive CSS: Using @media to target changes?
Quote:
Originally Posted by
dbltoe
Just an example of how @media can be your friend. Take a gander at haredo.com.
If your monitor can see more than 1400px in width, you'll see the logo image (all the "Hare Do" styles) sitting between the left- and right-hand columns and the columns up against the navMainWrapper. Reducing the browser window width below 1400 will show you how helpful the @media settings can be in a responsive template.
Maybe I misunderstood, but
Is the logo image supposed to be floating over the top 4 lines of the left and right-hand columns, partially obscuring the top 3 selections on my 1600x900 and 1920x1080 monitors at full width? Chrome and FireFox
1 Attachment(s)
Re: Responsive CSS: Using @media to target changes?
@RixStix: rofl!
Honestly, this is an EXCELLENT demonstration of why I want to do what I want to do!
This is what happens when you let @media randomly do random stuff to your site:
Attachment 17413
This is EXACTLY why I want to fix my @media so that it does not kick in until screen sizes become *smaller* than my site's max width.
+++++++
@dbltoe...
Regarding your first response, I'm sorry but I respectfully disagree with you in not wanting ANY max width at all.
Can you imagine what *this* forum would be like if it did not have a maximum width set? Can you imagine trying to read paragraphs in posts that stretches all the way across the screen? Imagine if Google didn't have a width?
The body of this forum is set to a max width of 1200. Personally I'd be easier to read at1000, but whatevs.
Very few catalog websites do not set a max width on the body. I checked a few quick ones for you:
https://www.target.com/ <---1400
https://www.homedepot.com <---1440
https://www.bestbuy.com/ <---1008
https://www.walmart.com/<---1364px
The only big exception I can think of is Amazon. But Amazon is Amazon. Their site annoys the snot out of me. Usually I pull drag browser in to bring order to all the chaos when I'm on there.
Bottom line: MOST serious (catalog) websites set a maximum width.
And I, too, will be setting a MAX width. And I'm really hoping not to have the default @media settings do weird stuff to my site the way it does to that haredo site.
Btw I do understand your position, I'm sure it works well for you. Thank you for sharing your opinion with me. Again. :)
Re: Responsive CSS: Using @media to target changes?
Does anyone know the answer to my original question?
Can I change the @media min/max widths contained within responsive_default.css?
And if I do, will I have to make changes contained within the other files:
/responsive_mobile.css
/responsive_tablet.css
/responsive.css
Re: Responsive CSS: Using @media to target changes?
Quote:
Originally Posted by
Feznizzle
This is what happens when you let @media randomly do random stuff to your site:
Attachment 17413
This is EXACTLY why I want to fix my @media so that it does not kick in until screen sizes become *smaller* than my site's max width.
#1, @media does not do anything randomly. it controls things based on what is contained in the various directives.
#2 there are plenty of courses out there on css and design. you should consider taking one.... no one said css is easy. they do say css is awesome. (feel free to google that...)
#3 with regards to your original question, why don't you just try it and see what happens? how hard is that?
#4 if we are talking about design, everybody has their own opinion. frankly i think the design out of the box is ZC is a bit dated. which is why there are a ton of templates out there for ZC that are for sale; any number of which get disparaged frequently on this site. personally, i have had mixed results with 3rd party templates. but i HAVE gotten all of them to work....
good luck!
Re: Responsive CSS: Using @media to target changes?
Quote:
Originally Posted by
RixStix
Maybe I misunderstood, but
Is the logo image supposed to be floating over the top 4 lines of the left and right-hand columns, partially obscuring the top 3 selections on my 1600x900 and 1920x1080 monitors at full width? Chrome and FireFox
Looks like the customer was following in someone else's footsteps and got a little happy with the /* .
Quote:
I didn't need anything that large!
Time to send them a copy of my notes.:(
Re: Responsive CSS: Using @media to target changes?
Quote:
@dbltoe...
Regarding your first response, I'm sorry but I respectfully disagree with you in not wanting ANY max width at all.
Can you imagine what *this* forum would be like if it did not have a maximum width set? Can you imagine trying to read paragraphs in posts that stretches all the way across the screen? Imagine if Google didn't have a width?
You might want to read that again. My dictionary says constrain is to severely restrict the scope, or activity of.
Quote:
Seriously, constraining ANY flow, width, image, etc is totally counter-productive to the whole responsive template mantra.
Re: Responsive CSS: Using @media to target changes?
Hi Carl, thanks for your post!
With regard to #1, I was using the word "random" locally. I have changed my sites width from the preset, so the @media statements do odd things. Random was about the only way to describe it. Clearly I'm not alone. If you scroll up, you'll find an image demonstrating an "unexpected" result caused by somebody else using @media directives incorrectly.
With regard to #3, that's the plan unless somebody comes along with a solid reason not to. I decided to ask before doing it because I expect the effort to take some time to do correctly. As you pointed out, that file is anything but random. Anything I do in there will have to be done carefully.
As to the last... yeah, maybe I shoulda gone commercial this time around! lol