Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default 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!

  2. #2
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,335
    Plugin Contributions
    8

    Default Re: Responsive CSS: Using @media to target changes?

    I think I've said this to you in several different posts and ways 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.
    Last edited by dbltoe; 9 Nov 2017 at 05:55 PM.

  3. #3
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,335
    Plugin Contributions
    8

    Default 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.

  4. #4
    Join Date
    Aug 2009
    Location
    North Idaho, USA
    Posts
    1,526
    Plugin Contributions
    1

    Default Re: Responsive CSS: Using @media to target changes?

    Quote Originally Posted by dbltoe View Post
    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
    Rick
    ChainWeavers (dot) com

  5. #5
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default 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:
    Name:  lol.jpg
Views: 21
Size:  40.9 KB

    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. :)

  6. #6
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default 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

  7. #7
    Join Date
    Nov 2005
    Location
    los angeles
    Posts
    955
    Plugin Contributions
    1

    Default Re: Responsive CSS: Using @media to target changes?

    Quote Originally Posted by Feznizzle View Post
    This is what happens when you let @media randomly do random stuff to your site:
    Name:  lol.jpg
Views: 21
Size:  40.9 KB

    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!
    feel free to donate money to carl or to the Zen-Cart Team

  8. #8
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,335
    Plugin Contributions
    8

    Default Re: Responsive CSS: Using @media to target changes?

    Quote Originally Posted by RixStix View Post
    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 /* .
    I didn't need anything that large!
    Time to send them a copy of my notes.

  9. #9
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,335
    Plugin Contributions
    8

    Default Re: Responsive CSS: Using @media to target changes?

    @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.
    Seriously, constraining ANY flow, width, image, etc is totally counter-productive to the whole responsive template mantra.

  10. #10
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default 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

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v155 Support Thread - Responsive Color Changes for 155
    By dbltoe in forum Templates, Stylesheets, Page Layout
    Replies: 51
    Last Post: 2 Nov 2017, 02:03 PM
  2. v155 Winchester Black responsive - looking for Social media icon flexible footer fix
    By MattA66 in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 17 Mar 2017, 01:17 AM
  3. How to target Catergory page id's with CSS?
    By thebigkick in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 6 Jan 2012, 06:33 PM
  4. Unable to upload media using media manager
    By ThomasT in forum Basic Configuration
    Replies: 17
    Last Post: 5 Aug 2010, 08:04 PM
  5. Replies: 0
    Last Post: 13 Mar 2009, 10:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR