Webmasters Stack Exchange
Webmasters Stack Exchange

Questions tagged [media-queries]

15 questions
22
votes
8 answers

Should I split a large CSS media queries file into separate files for each screen size?

I am working on a responsive design website to deliver content for all screen sizes. I have media queries for 5 different "steps", and the CSS file is around 30 Kb. Would it be better to split this into separate files and make them similar to…
CamSpy
  • 1,629
  • 2
  • 17
  • 24
9
votes
3 answers

What are the most frequent viewport sizes to use in responsive design?

I see differnt suggestions from very detailed (like here) to more brief, like google (here). so I am wondering what are the most suitable sizes to be used @media screen.
alfish
  • 558
  • 1
  • 6
  • 14
4
votes
2 answers

Responsive design best practice: Duplicate html elements for media querying and SEO impact?

I have a page with, in order of html appearance, a figure tag, headgroup tag, and an article tag. In order to make a page's design responsive using media queries, I need a different order for elements, so the image appears after the title. The…
Armel Larcier
  • 143
  • 1
  • 5
4
votes
1 answer

How does the new iPad's (aka iPad 3) resolution play with responsive design?

So "the new iPad" has been released with a new "retina display" resolution of 2048x1536 px, but the screen size is still 9.7 inches as the previous iPad... I am wondering how will CSS media queries respond to this device? How will we design a…
Naoise Golden
  • 203
  • 2
  • 8
4
votes
1 answer

How to avoid request of all images used for different devices using media query?

I want to know, how can I avoid loading all images I created for different devices using media query. Currently my mark up look like below : Fresh from garden
Sangeeta
  • 173
  • 1
  • 3
3
votes
1 answer

Tips for developing a responsive website

I'm having problems trying to figure out a good workflow when designing a responsive website. I've tried a few approaches, nowadays what I'm doing is: Do all html and css work with the window maximized (about 1400px wide) Then I shrink it and…
Neithan Max
  • 143
  • 7
3
votes
3 answers

Users narrowing window on desktop to see mobile version?

I know this is going to seem like a strange question, but are their any stats on users narrowing their browser window so that media queries kick in and display the mobile optimised version of the site? We're about to mobile optimise our website. As…
Evanss
  • 937
  • 7
  • 13
2
votes
1 answer

SEO: Using media queries to hide links

I've heard lots of discussion around Google and hidden text. My problem is similar but involves links. My website's footer is pushed for space at mobile screen size. I could really do with using display:none on about 3 of my footer links to save…
henrywright
  • 285
  • 1
  • 2
  • 10
2
votes
1 answer

How to enable media queries on IE < 9

I am trying to add support for media queries in older versions of Internet Explorer, but I am not having any luck. I only need media queries, so I do not want to add a big package like Modernizr, I am looking for a small fix, if there is any. Anyone…
Saif Bechan
  • 1,590
  • 1
  • 14
  • 25
2
votes
0 answers

printable responsive layout

I'm quite a newbie in web design. I'm starting off with a W3 template. Please see this one as illustration: https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm . I'm trying to implement media query to be able to print as the gridded…
chloe
  • 21
  • 2
2
votes
1 answer

Is there a purpose for CSS media queries using mobile DPI resolution?

Often see people give DPI resolution on his Media Query for mobile. What is it for? Does it serve a purpose? Do we need it? I normally build my media queries for all devices (desktop, tablet and smartphone) like this: @media only screen and…
biotza
  • 151
  • 1
  • 8
1
vote
1 answer

Is there a single set of Media queries for all the devices?

I am using different media queries for each type of resolution, is there a better way of doing this?
Shyamala
  • 11
  • 1
  • 2
1
vote
1 answer

Not Hiding but REMOVING content for mobile

I understand using media queries and display:none to hide content for mobile. The problem is that the content still downloads. I found this older post that has a similar issue, but hoping for more direct and up to date information. This is the…
Rob T
  • 561
  • 3
  • 10
0
votes
1 answer

AdSense ad display in media queries

I am creating a new layout for my website and I have AdSense ads there. I have read that you can have up to 3 ads on one page. I am creating responsive design now and I want to use 4 ads but 3 will be shown. Let me explain it. In PC media-query 3…
Jakub Kliský
  • 457
  • 5
  • 16
0
votes
3 answers

Optimizing data downloaded via 'link' media queries and asynchronous loading

I have a website that tries to make sensible use of media queries and avoid 'expensive' CSS for users of mobile devices. My eventual goal is to make it 'mobile-first' but for now, since it is based on Twitter Bootstrap it isn't. I included some…
adam-asdf
  • 2,077
  • 12
  • 16