Question(s) Regarding @Media

Okay . . . so I got this website that I have been using as a learning tool (even thought it seems that I am learning VERY slow), but regardless I am still plugging away.

So anyway, this website that I have been learning on seems to work fine on my laptop and my Galaxy S6 cellphone, but I am seeing problems on my tablets.

My first question is, on this particular site I am playing with a gradient background. Again, it shows fine on my laptop and cell phone, but does not show on my tablets which are 7", 8" (windows) and 10.1". Is there a "one size fits all" media query that I can/should be using?

Second question: if there is not a "one size fits all", is there a particular max-width that can cover the typical tablet sizes?

Third question is, what are the recommended max-width's that one should be using to cover desktop/laptop, tablets and mobile/cellphones?

Final question (for now) is, what max-width's should I be concerned with other than desktop/laptop, tablets and mobile/cellphones?

And FYI . . . the media queries that I am using for this particular site is as follows:

 
@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper,
    #extras {
        float:none;
        width:auto;
    }
    #content,
    #extras {
        margin:0;
        padding:1em 0.5em 0;
    }
    h2 {
        font: bold 2.25em 'Merriweather', serif;
        padding-bottom:0.66em;
        color: #22B6FA;
    }
    h3 {
        color: #000;
    }
    .testimonial {
        padding-top:1em;
        color: #000;
        border-top:2px solid #22B6FA;
    }
    #product {
        display:inline-block;
        max-width:49%;
    }
    .price {
        color: #22B6FA;
        text-shadow: 1px 1px 1px #000;
    }
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 300%/150% 'Aclonica', sans-serif;
    }
    h1 span {
        display:none;
    }
    #product {
        display:block;
        max-width:100%;
    }
}

@media (max-width:340px) {
    #products {
        width:auto;
        margin:0 auto;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }

Code (markup):

And if these queries are wrong or have problems, I would appreciate knowing what I am doing wrong as well as any suggestions to improve/correct it.


Thanks in advance for any and all input on this . . .

 

Well, you didn't include the code for the gradient, so that's impossible to weigh in on. Are you sure those devices not showing it are modern enough to show them with the "version" of the gradient you are using? Do they have enough RAM free to generate linear-gradients? are you using linear-gradient or are you playing with images?

As to max-width on your media queries, you should be designing to your content, not any specific device. Make the desktop layout and then go narrower, when it breaks, figure out where it breaks and make a new query to adjust the layout. Lather, rinse, repeat going down until it works at every size. The most I've ever needed was five adjustments for the content area -- and maybe one or two more for the header though it appears you already have that in place... or at least that's what I'm assuming the PX ones are for.

 

The 7" tablet is just a cheap POS that I picked up for the wife to play her games on a few years ago and it don't really do that very well so for that one . . . I have no clue. The 8" tablet is about a year old - maybe 2 - and it's a Windows tablet so I am assuming that it falls under being "modern", but I can't guarantee that 100%. As far as RAM goes, all of my tablets have 1GB. I learned years and years ago to go for all the RAM and memory you can get your hands on.

I am using linear-gradient. I don't have the need or am in a position to need to start playing with images for backgrounds.

But let me ask you this, assuming that my tablets are outdated and do not have enough RAM, what would you suggest as an alternative to the linear-gradient?

And finally, when I am coding, I should only need to tweak my main css file with the media query at the breaks. Is this correct?

Thanks so much for weighing in on this deathshadow. I appreciate your opinion and input.

 

If you're doing a CSS background, using gradient, having it fit whatever size screen should be a no-brainer, since you put it on HTML or BODY, and that stretches the width of the screen regardless of resolution and screen size (I'm assuming here that you haven't set any width or size specifics on the background).

If the background doesn't show up at all, maybe the browsers you're using doesn't support it - however, that sounds kind of iffy, since most modern browsers should.

If the background shows up, but doesn't cover the area, or is malformed, then it's something to do with your code, and without a complete markup, preferably the actual site, it's hard to say.

 

PoPSiCLe, the linear-gradient that I am playing around with is on BODY with no width or size spec's and as I have stated originally, it is showing up and working as I had expected/wanted on both my laptop and my cellphone. It works fine when I resize the browser on my laptop. Where it does not work is on the 3 different sized tablets that I have. It could well be that the tablets are just a POS. The 7" tablet is running Chrome so I don't think it is the browser causing the problem.

And like I said, the linear-gradient works fine except on my tablets and I was just curious if I was doing something wrong along the way. Based on the responses here, it doesn't appear to be me - for a change. LOL

I would think that if something works when the screen is resized, it would work on devices around that same size. Maybe I am wrong.

 

This is the point at which you create a minimal test case.

Make a basic html page containing, let's say, three div elements with 25 words or so of text. Name them (give IDs) test1, test2 and test3. Set no width on one, and widths of 75% and 25em on the others. Apply your gradient property to the generic DIV.

That's all the style properties/values you do. Now you have a page with no potential conflicts and it will test your syntax and browser support on the various platforms.

cheers,

gary

 

Thanks Gary.

I tired that and my little 7" tablet is in fact a major POS. It did not show the gradient background at all so it looks like I have fretting over this background thing for nothing.

Thanks so much for your suggestion . . .

 

Keep in mind that gradients are expensive computationally and cause devices to eat batteries like corn flakes. That it does not support gradients may be a "feature" meant to improve battery life.

g

 

Thanks again, Gary.

I had no clue about gradient being a battery sucker. Maybe that is why its not used that often. LOL

I think maybe it would be in my best interest to just go with a solid background.

Thanks for sharing the info . . .

 

Nothing wrong with creating a gradient image.

 

You know, since it was just an experiment to gain a bit of knowledge about it and how it works, I went ahead and just changed it to a solid background. While I didn't think it looked to awfully bad, I was having a problem with figuring out how to get the text to show properly and things like this just cause more questions so I decided that I would just go with a solid background for simplicity's sake.

Thanks again for your input . . .