FAQ Database Discussion Community


Media Queries div works but others do not

html,css,media-queries
I am trying to do media queries for iPhone. However, for some reason the information in the "mobile" div does not show up, the only thing that shows is the background image. Any help given is appreciated. Thanks in advance. HTML: <div id="wrap"> <div id="header"> <p id="placeholder"> full-site<br>coming soon<span>.</span><span>.</span><span>.</span> </p>...

When do we use media-queries “resolution” in css?

css,media-queries,resolution
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?

Responsive Design: max-device-width, max-width and min-device-pixel-ratio

css3,mobile,responsive-design,media-queries
I am currently on an website which needs to be fully responsive in screen width and pixel density. My major problem is how do i get the responsiveness for HiDPI devices such as the galaxy s4. I have read about the min-device-pixel-ratio but I do not fully get it and...

How to properly join a few Media queries

css,media-queries
I have a situation and I decide to use media queries. The htmlcode: ... <span class="logotext-n">n</span> . . <span class="logotext-u">u</span> ... Css implementation: ... @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-n { color: #f1ecd6; font-family: "arial black", sans-serif; font-weight: 900; font-size: 210px; text-transform: lowercase; letter-spacing: -18px; } } . . @media...

Standard resolution sizes to optimize for

css3,responsive-design,media-queries
I'm working on one of my first responsive websites and I'm trying to figure out for what kind of resolutions to optimize for. Is there any standard or what? What are your practices? It would be nice to know....

Chrome applies height property of media query only on refresh

css,google-chrome,height,media-queries,refresh
I have a header with varying height by media queries. When I resize window on FF or even IE, it applies new height value immediately. The problem is, that Chrome only does it on browser refresh. It applies any other value immediately (like background-color), but not the height. Also this...

@media Orientation Width

css,media-queries,screen-orientation
When specifying min-width and min-device-width media queries, is the width you declare based off the current width of the phone or the potrait width of the phone? For example, an iphone4 has a width/height of 320x480 in standard/portrait orientation and has a device-width of 320. If the phone is held...

CSS @import causes media queries class not work

html,css,css3,import,media-queries
So i have run into something interesting. I like to have my css nice and neat and only want one reference of a style sheet in the <head> so to accomplish this i created a master css file that uses @import to bring in the rest of the style sheets....

Apply style, only if both classes are in use (media queries / bootstrap)

css,twitter-bootstrap,media-queries
Even if my browser is resized to use the sm style, this text-align applies to it - despite telling it to apply on md-3, not sm In other words, I want to be able to apply a style only if media queries interprets my device as an sm screen. The...

Responsive Layout - Media Queries

html,css,responsive-design,media-queries
When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text. I know I need to include Media Queries somehow but no...

Does 'all' add anything to a media query?

css,media-queries
Is this: @media all and (min-width: @medium-min) { } The same as this?: @media (min-width: @medium-min) { } I cant see why adding 'all' would make any difference than not specifying. However I often see the 'all' has been added. Is there an edge case that requires this? ...

What is wrong with these SCSS media queries [duplicate]

twitter-bootstrap-3,sass,media-queries
This question already has an answer here: Using Sass Variables with CSS3 Media Queries 3 answers I am using the official Sass port of Twitter Bootstrap 3.3.3. What I am trying to do is shrink the height of the navbar when the window is resized. Below is my media...

Instafeed.js - Instagram script CSS Styling Not Applying To Elemements

javascript,css,media-queries
Added instafeed.js to my website and successfully styled it. It is a feed to show instagram photos on a website. This worked correctly. This is what I am trying to do: Now trying to add a roll over feature which highlights each icon... Added css, then changed script and it...

Css media queries quesitons

css,media-queries
Hi I created a sample site as practice... why my < h3 id="art" > going down to footer section while shrinking my screen under 620 width and also, theres large space will show.. How to remove the space under footer and I dont want my words going to footer either...

Child class with same name

css,html5,less,media-queries
I'm not too sure if this is a problem or whether it can even be done. I'm not even sure on what I should google to find out whether it can be done/how it can be done. What I want to do is have a child class with the same...

One vendor prefix inside a different vendor prefix

css,css3,media-queries,vendor-prefix
I've recently came across a project with css rules like this: @media screen and (-webkit-min-device-pixel-ratio: 0) { #header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder { line-height: 140%; } } In my opinion this is kinda weird, as I know vendor prefixes are used to target different browsers. What about a situation...

CSS media query rules not being applied

css,responsive-design,media-queries
I'm tasked with making a small update to an existing widget on a dashboard-style website. The current widget looks great on larger screens but terrible on smaller devices. I'm trying to add a few CSS rules that should only be applied when the width of the display is at or...

Responsive html div elements?

html,css,responsive-design,media-queries
I have 3 HTML div elements that I'd like to see sit side-by-side on a wide screen but, as the screen width collapses, I'd like to see them become vertical. For example... Wide screen: ----------- abc def ghi ----------- Narrow screen: abc def ghi Currently, having three HTML divs that...

How I can host Media files like mp3 in a diffrent server? [closed]

php,media-queries,hosting,media,server
How I can host Media files like mp3 in a different server ? I have a website for converting videos to audio. I want to host this audio files in a different server, but I want to keep the codein the first server. Is this possible? For example, if the...

i am looking to apply media queries through javascript

javascript,media-queries
I want to slide the divs of menu from left to right,I have done that using javascript <div id="script" style="height: 250px;"> <div class="slide"> <div id="div1" class="slide-item"> <p>Home</p> </div> </div> <div class="slide"> <div id="div2" class="slide-item"> <p>About Us</p> </div> </div> <div class="slide"> <div id="div3" class="slide-item"> <p>Events</p> </div> </div> <div class="slide"> <div id="div4"...

Media Query styles not working

css,media-queries,breakpoints
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this? HTML <div class="headDiv"> <div class="headPhone"> <p class="fa...

how to check if condition on resize of the browser?

javascript,jquery,media-queries
I have a menu item login markup that displays differently on mobile via media queries and also if the user is logged in. LargeDevice - loggedin - ShowMarkup LargeDevice - loggedOut - ShowMarkup SmallDevice - loggedin - ShowMarkup SmallDevice - loggedOut - DoNotShowMarkup The condition of the markup is in...

css3 viewport : works on chrome simulator, not on android phone

html,css3,google-chrome,responsive-design,media-queries
I am using @viewport CSS3 (since viewport meta is not flexible enough for me). My design is 960px width. When I use the Google Chrome Dev tools and simulate Samsung S4, this works perfectly. When I open the page on my real Samsung S4 device in chrome navigator, it looks...

Div won't resize vertically in slideshow with CSS queries

html,css,css3,responsive-design,media-queries
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't...

jQuery show a hidden DIV based on CSS element and slideToggle() state property

jquery,html,css,responsive-design,media-queries
I need some support into finishing a jQuery function I am struggling with for quite some time. I have an HTML content in a div with classes mnu2 mob_hide. This content should be always visible for page width more than 500px and hidden if the width is less that 500px....

Why is bootstrap changing a col-md div to 100% width @max-width:991?

css,twitter-bootstrap,media-queries
I am using bootstrap so it would place my divs nicely next to eachother but whenever I resize my window to 991px width it makes these divs 100% width ... code : <div class="row"> <div class="col-md-2"> <img src="path..." style="width: 100%; height: auto"> </div> <div class="col-md-2"> <img src="path..." style="width: 100%; height:...

Why doesn't my site respond to the size of my browser window?

css,responsive-design,media-queries,viewport,meta
I have created a page with media queries in my CSS so that it should respond to the viewport of the device. When I use the Firefox web dev tool for responsive design I can see how my site reacts. But when I resize my browser I cannot. http://champlain.torqueweb.com/html/Responsive1.html Should...

How to disable mail modification in iOS Gmail app

ios,css,mobile,gmail,media-queries
The question is: is a possible to disable gmail app on iOS modification to screen fit. Any media-queries or style changes not working. This feature is crashing my mails and i need to fix this somehow. Can any body help?

Why don't elements display inline-block again after a resize down and up in Chrome?

html,css,google-chrome,responsive-design,media-queries
I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other. I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and...

Media query not triggering

html,css,media-queries
I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major. <html> <HEAD> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> <!-- body {background-color:black;...

Media Query Margin Fail

css,media-queries,margin
So far all of my media queries are fine, except this one. I have an actual iPad and I am using a simulator as well as my client doesn't like his logo resting against the edge of the screen, so all I'm trying to do is either give it a...

Media query making element behave strange

css,sass,media-queries
I've got this bug which is driving me to insanity. Basically I've got two buttons side-by-side, and when I re-size down to mobile screens and then back up the buttons are no longer side-by-side. Instead they act as if one of the buttons are no longer floated. When I check...

DIV 2 on top of DIV 1 when resizing

html,css,media-queries
So, this is how it looks like when I'm on full screen: http://i.imgur.com/quQt09E.png And this is how I would like to look when I resize to a certain point: http://i.imgur.com/pKGKoCq.png I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid...

Cant use media-queries (with the css) directly in my asp classic code page

html,css,media-queries,stylesheet
I've got a problem with my media queries. On my website I am using a frameset to show a form. This form is created in a asp (classic) file and also has its code in it. In my first attempt to launch it I had a link to my css...

using device width in media query

css,media-queries
Two column display, left column has important stuff - right column not so important. What I want on mobile with a device-width smaller than X is - left column has width set to the device-width right column has width set to 50% of device-width or 270px, whichever is smaller. I...

How to Remove class or activate class for specific view port only

css,mobile,media-queries,viewport,tablet
Not sure if this would require Javascript, or if there is a way to do this with CSS alone. Basically I want to have a class active only for medium and small size browswers. Example: <style> .big {font-size: 2em;} .normal {font-size: 1em;} </style> <div class="big"> <p> This text is huge...

Using rulesets in LESS for media queries

less,media-queries
When using Sass I would do something global like this (which I got from CSS-tricks btw) // Variables for MQ's $mq-mobile-portrait : 320px !default; $mq-mobile-landscape : 480px !default; $mq-tablet-portrait : 768px !default; $mq-tablet-landscape : 1024px !default; $mq-desktop : 1382px !default; Then I would create mixins for the media queries like...

Internet Explorer media queries taking effect when they should not

html,css,internet-explorer,media-queries
I have the following css: @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-height: 30px; } In Internet Explorer 11 (and probably other versions too), when the page is first loaded, the media query takes effect regardless...

Media Queries | Defining “Screen”

css,css3,responsive-design,media-queries
I've been doing some research on this topic and can't find an answer. When defining your media queries you typically write the following one of two ways: @media screen and (min-width: 320px) {} and @media (min-width: 320px) {} What I'm interested to learn is what's the reason one would define...

Retina pixel density and CSS overflow-y

html,css,jquery-mobile,media-queries,retina
DISCLAIMER: This question is long and convoluted, and I'm not sure there's a quick answer, but I'm at the end of mine and my colleagues knowledge and we're coming up empty, plus this is the kind of thing StackOverflow seems to love. The Problem I have a legacy application that...

When scaling menu comes behind the div, why?

html,css,media-queries
I have a menu, en a div with a background color. But when scaling the menu comes behind the div. But it has to push the div down when scaling. The #blauwblok has to be position absolute because somehting else has to come over the div, but not the menu....

Trying to get a website to zoom 120% when screen resolution is greater than 1600px

html,css3,media-queries
I'm working on an website, and someone asked me if it was possible to zoom the entire website when someone has a screen width of 1600px or greater. Now i've tried something with css3 and mediaqueries, and i've read alot on the internet, but I can't seem to get it...

how to show css in current @media query in Firefox

firefox,media-queries,firebug
In chrome I can inspect an element to see css and it current media query as below As you can see on the right panel, chrome intelligently show my current media with min-width: 1200px. however currently chrome is sucking lots of my computer memory then I have a need to...

media query max-width not working

html,css,media-queries
To create responsive website i added media query to my css file. If i use media query with min-width its work fine. When i add max width to the same its not working. I don't know why this is happening. @media only screen and (min-device-width : 768px) { #top-links{ width:...

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

mobile,responsive-design,media-queries,viewport,initial-scale
So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have...

Mobile/Desktop media query not working on cell phone

html,css,media-queries
Last night I worked on making my site mobile optimized. When a user is on a device with less than 684px it should show the mobile nav div and hide the sidebar div. I have tested this as working on my computer (by shrinking chrome like an accordion). I also...

Media Queries - Target iPhone 6/ 6 Plus without older iPhones

javascript,iphone,css3,media-queries
I am able to target the iPhone 6/ 6 Plus with Media Queries. /* iPhone 6 */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) {} /* iPhone 6 Plus */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {} Problem: It targets all other...

How to get a SASS nested nested media query to work with the use of the media query or operator

css,sass,nested,media-queries
I am trying to get a nested IE10+ media query to work in SASS and am not understanding the output. I think that things are getting weird with the use of the media query or operator ,. As a result, this query will not apply in all cases because the...

Responsive Web Design without showing mobile layout when resizing desktop browser?

html,css,media-queries
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and...

Media queries not working (Zurb Foundation)

css,media-queries,zurb-foundation
I recently started using Zurb Foundation and am trying to use media queries in order to modify a certain .css class, but can't get it working. Below are the (as far as I know) relevant parts of the .scss files. // d. Media Query Ranges // - - - -...

Css id's don't change on media queries

html,css,media-queries
My media query isn't updating properly. Here is test html: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> <title>Test </title> </head> <body> <div class="row"> <div id="verde" class="col-5"> <h2>Lorem Site</h2> <h3>Test Site</h3> </div> </div> <div class="row"> <div class="col-12"> <p>Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly...

Mobile css loaded on chrome inspector but not working on phone

html,css,mobile,responsive-design,media-queries
So i have a website that I am working on, when I use the "phone icon" on google chrome inspector the site looks ok, it switches to the responsive mobile design, but on my phone it's showing the desktop version. The styles are in the same file desktop&mobile. I have...

Responsive Design and onclick events

javascript,css,responsive-design,media-queries,inline-styles
I have a mobile menu button (only viewable with display:block by using media queries). When the button is clicked, my main "mobile" menu appears - I do this using simple javascript code (see below). The problem ... if I click the button to expand the menu (changing the inline style...

Differentiating portrait and landscape versions in media queries

css,html5,css3,media-queries
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)? @media only screen and (min-width : 1824px) {} @media only screen and (min-width: 1200px) and (max-width: 1823px) {} @media only screen and (min-width: 992px)...

CSS3 transform for smartphone don't work

html,css,html5,css3,media-queries
I use the css3 method transform: rotateY(-180deg);for display the content when the curser is hover the block. When i click on the block with my smartphone, nothing append, how can i display the content ? My class : #effect-2 figure .img-hover { top: 0; left: 0; width: 100%; height: 100%;...

Align to center child DIVs inside parent DIV

html,css,css3,responsive-design,media-queries
I'm trying to align a DIV in the middle of the page when the size is less than 768px I have one parent DIV that contains three different DIVs. So I used media queries and within one display size I added this "clear:both" to the display_type and buttons classes. So...

div css styling not responding to media query for width

html,css,mobile,media-queries
I have a div I created that I am using for a subscribe button. This div is responding perfectly to my desktop CSS, but it isn't responding to my commands in my media query. I have set the width to many different things and it fully takes up the entire...

Gulp - Sourcemapping less while combining media queries

less,media-queries,gulp,combine-media-queries
In this project I am leveraging "Gulp" for some tasks, but recently got a request to add sourcemapping.. I have the sourcemap working, but it seems to have a conflict with other plugins like 'gulp-combine-mq' and "gulp-combine-media-queries" aka "cmq" When running my styles task with "cmq" commented out, i get...

How to make smooth media-query transition back and forth?

media-queries,transition,css-animations
I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried...

Parse Error CSS3 Validation

css,css3,media-queries,parse-error
So I am trying to validate my website and keep getting a parse error for one of my media queries section of my style sheet. When I just copy and paste that section of code into the W3 CSS Validator it shows its fine but when the whole sheet is...

Sass breakpoint doesn't work

sass,media-queries,compass-sass,breakpoint-sass
I've checked all possibilities, and haven't seen any issue. config.rb Have following line: require 'breakpoint' style.scss also @import "breakpoint"; I'm trying this way: $medium: 96rem; // or even $medium: 51rem 96rem; .any-class{ @include breakpoint($medium); //change any property } I don't see any effect in compiled css file, only new properties...

Change media query using Javascript

javascript,css,responsive-design,media-queries
I want to set media queries manually. I have some JavaScript algorithm that tells me what to choose, suppose it is IsMediaA(). @media A { display: block; } @media B { display: inline-block; } Is it possible to change used media query depending on IsMediaA() value?...

How do you force a website to be in landscape mode when viewed on a mobile device?

css,asp.net-mvc,mobile,responsive-design,media-queries
I've seen a lot of questions about this, but no definitive answer on how to do this in a Razor/MVC site where the mobile site is determined using the DefaultDisplayMode class. Also, a lot of the answers are just code snippets without details on where the code goes (is it...

Why is @media changing body properties?

html,css,css3,media-queries
I really can not understand why if I use: @media screen and (max-width: 720px) The body changes height and margin. Look at this samples: 1) Without @media: http://jsfiddle.net/Clear/xrcxsmpp/ 2) With @media: http://jsfiddle.net/Clear/xrcxsmpp/1/ As you can see, I tried also to change the body properties as: body { margin: 0 !important;...

Table Widths Strangely Shrinking on Mobile

html,css,table,media-queries
I'm having an odd error with a website I'm designing where the mobile version/size has tables getting progressively smaller. I've checked and it's not an issue of tags being unclosed or malformed html; the code validates in html5. I don't get this error in the desktop or tablet versions, but...

How to make page layout responsive for every successive little change in window size?

javascript,css,responsive-design,media-queries
Yes, I know how to use media queries. But it allow us to specify min-width and max-width that is range after which css will change. But consider this website styledotme.com The block/div just below navigation bar keeps getting smaller and smaller almost as if pixel-by-pixel as we decrease window size....

Disable Hover on Mobile

html,css,responsive-design,hover,media-queries
I need to disable the hover effect/selector of a button, on mobile (by media query). I have 20 or so CSS lines for :hover so cancelling them one by one is not an option. pointer-events isn't either since it would cancel the click event as well. I'd like a CSS...

How to center images horizontally with text?

html,css,media-queries
I am working on a site but the centering of my images horizontally in the footer isn't going very well. When you make the screen smaller then 620px or something like that, then I want to center the text. But also the images.. With the images I mean the 5...

elements not going to proper position switching from portrait to landscape ipad

html,css,html5,css3,media-queries
I have media queries for ipad in landscape and portrait mode to position elements a certain way in each view. I have everything looking the way it should, but the design breaks when I rotate from portrait to landscape. The proper layout will comeback if I refresh while on landscape,...

Why does a media query with a smaller min-width overwrite a larger one?

css,css3,media-queries
I'm trying to understand why the min-width: 600 media query below would overwrite the min-width: 768media query. I know that 600px comes later in the CSS file which could be a reason, but surely only one should only be applied if the screen size is either 600 or 768? I'm...

How to use media query with div as screen for mobile preview in desktop website?

html,mobile,media-queries,screen-size
I need to show a preview of the code responsive in a div that has the size of a mobile phone, how can I use media queries? or i can do it with jquery? Thanks a lot !

CSS media query does not apply to Firefox 37

css,firefox,media-queries
I was working on a website (originally designed elsewhere) adding CSS media queries to adjust the layout to make it more mobile friendly. I had completed the work about a month ago. However, I have seen now some odd behaviour and would like to know why the following happens and...

horizontally align image/content with media query

css,twitter-bootstrap,media-queries
I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it. <div class="row"> <div class="col-md-2"> <img src="http://placehold.it/150x150"> <h5 class="story-title">Title of...

Hide content on mobile using media queries

css,media-queries
On my homepage I want to display on desktops/laptops everything that is included on my homepage but then on mobile I would like to only display the first div with the class "bg-header". I do not want to see "shoulddisappear" on mobile. extends layout block content_header div.container-fluid.col-sm-12.bg-header div.tagline h2.top |...

Media queries don't work in Blogger

html,css,css3,media-queries,blogspot
I have the following media screen queries which work on local browser as xml, but it does not seem to work in blogspot: /* for 1024px or less */ @media screen and (max-width: 1024px){ #wrapper { width:100%; float:none; } #header-wrapper { width:100%; } #navigation { width:100%; font-size:0.7em; } #content-wrapper{ width:63.8%;...

CSS Media Query only works on browser resize (Chrome)

html,css,responsive-design,media-queries,window-resize
I have a website that has media queries for responsiveness. The CSS works just fine on Firefox and IE, but not on Chrome. Currently, the website has two floating divs, as the viewport width decreases, the divs stack on top of each other. (I have a 'large mode' and a...

CSS Media Query that Covers Most Mobile Devices

css,responsive-design,media-queries
Smartphone technology has without a doubt increased over the past few years. Some of the newer smartphones have extremely vivid and impressive high definition screens, but when it comes to programming websites with responsive design, using @mediaCSS becomes increasingly more difficult. It seems impossible to detect what device is being...

Responsive issue. Websites remains big while elements scale

html,css,wordpress,mobile,media-queries
I am currently working on making a website responsive. However i am experiencing an issue which i can't seem to figure out. The website i am working on is: http://www.vouwwagencentrumnoordbergum.nl/ So, when you visit the website on a mobile phone or you just scale your browser, most of it (...

Responsive, 3 colums in deskview and 2 in mobile veiw

html,css,responsive-design,media-queries
How to scale the 3 colums into two when the user has a mobile. I can a alot about media queries but I dont know how to do this. Like this: http://postimg.org/image/sox89ekqj/...

css media query doesn't work on Sony Xperia Z smartphone

css,media-queries
I need your help, I face a problem with my css media query code. I just wrote the following css media code @media (max-width: 900px) { #content { width: 100%; margin: auto; } #recent_activities .act { width: 94%; padding: 3% 10px; background-color: #FFF; text-align: left; margin-bottom: 10px; margin-left: 0px; height:...

Desktop browser showing different than mobile

responsive-design,media-queries
I'm trying to create a responsive/adaptive webpage. I'm shrinking the desktop browser size and it does not have the same layout as the mobile browser. They are both using the same media query because the header text is red in both. I'm not sure if this is a media query...

Changing image via media queries

html,css,media-queries
I want to change a image when the display is smaller than 400px (for this purpose i cant use the image as background). I thought displaying 1 with display:block and to hide the other with display: none. My question is if i do it this way, will the browser load...

Colspan modification dependent on CSS3 @media Query

javascript,html,css3,responsive-design,media-queries
I have a responsive table on my web page. This table contains three columns and a lot of rows. However, some rows contain only one column with colspan 3. I need to have a table with two additional columns for large screens only so I need to modify colspan to...

css media queries, one or many for mobile optimization

css,media-queries
I know that using media queries the mobile first way should make the website faster on mobile devices. I wonder if there is a difference in using a lot of media queries, like this: #first {} @media screen and (min-width: 37.5em) { #first {} } #second {} @media screen and...

Media queries not working in IE8 - even with respond.js work-around

javascript,html,css,internet-explorer-8,media-queries
My site consists of 5 divs (represented by green boxes). There should be 3 per row, and you can view my demo site here: http://testsite24.netai.net/public/demo.html IE 8 doesn't support media queries, but I'm using respond.js as a work-around. I can't get it to work though. the media queries I'm using...

How can I make my button display correctly on all media devices?

android,ios,css,media-queries
I have a website that has a different theme from its mobile site. They share the same content and plugin , but different themes. I have 3 buttons that are on my mobile site that shows clear only on certain phones. when I pull up the site on a different...

CSS media queries - when is a px not a pixel?

css,google-chrome,internet-explorer,media-queries
I am working on CSS that switches between layouts for desktop, tablet and phone at various breakpoints expressed as window widths in pixels @media screen and (min-width: 350px) and (max-width: 700px) { ... } @media screen and (min-width: 701px) and (max-width: 1000px) { ... } @media screen and (min-width: 1001px)...

Hide multiple Dropdown boxs using CSS for printing

c#,jquery,css,media-queries
On my c# mvc page, I have several dropdown boxs displayed on the page, I'm using media query to render the view differently for print and screen. My question is that is there a way (using CSS) to hide ALL the dropdown boxs if the selected option value is ""....

Polymer 1.0 dom-if does not recalculate when previously true

media-queries,polymer
I have the following component that displays a specific image based on a media query. What I'm expecting to see is when the window is resized, that a different image will be loaded and displayed, and all other sizes "hidden". What I'm getting though, is that the new image is...

How to make my nav bar responsive

html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

Picturefill 2: What is the purpose of the sizes attribute?

html5,image,media-queries,polyfills,srcset
I'm trying to understand what the sizes attribute is for exactly in the PictureFill 2.0 polyfill. Here are some basic examples: <img sizes="100vw, (min-width: 40em) 80vw" srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="test"> <img sizes="(min-width: 40em) 80vw, 100vw" srcset="medium.jpg 375w, medium.jpg 480w, large.jpg 768w" alt="A car"> According to the documentation:...

i want the nav buttons to appear below the logo in the mobile view with auto centering

html,css,html5,css3,media-queries
HTML CODE WRITTEN FOR DESKTOP VIEW <body> <div class="main-container"> <header> <div class="header-logo"></div> <nav class="nav clearfix"> <ul> <li><a class="active" href="#">LOGIN</a></li> <li><a href="#">SIGN UP</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">HOME</a></li> </ul> </nav> </header> CSS CODE...

Media Query phone pixel width does not match screen resolution

css,media-queries
When doing media queries in CSS I noted that the value in pixels that is used for min-width and max-width when working on mobile do not seem to correlate to the device's actual width. For example, if I was to target a landscape iPhone 5 I could use max-width:568px and...

Is it possible to combine media queries for same CSS rules?

css,media-queries
I currently have this chunk of codes. @media screen and (min-width: 768px) and (max-width: 990px) { .community-info-box { width: 100%; margin-right: 0; float: none; ... : ... } } @media screen and (max-width: 630px) { .community-info-box { width: 100%; margin-right: 0; float: none; ... : ... } } What I'm...

Is it possible to detect if content inside a parent element is too wide to fit?

javascript,html,css,responsive-design,media-queries
I'm looking at a potential solution to a responsive problem. Firstly, I'm aware that media queries play a part in this and that I can set breakpoints and even minor breakpoints. This is something that I already do. However, what I want to do is a little beyond this. I...

Bootstrap 3 responsive design

twitter-bootstrap,responsive-design,media-queries
When I use Bootstrap 3 for a responsive design site, it is ok if I use only one type of class, for example col-lg-* to my entire page, and then, using the media queries in CSS, to restyle the page for lower dimensions?

CSS media-query to squeeze image into container

css,css3,responsive-design,media-queries
I am forced to work with a table-based layout and need to make it responsive. Am struggling with images: when the image-width exceeds the screen-width, it should shrink to fit on the screen. In several articels here I found max-width being recommended, but somehow I'm not getting it to work....

Div Text's Color Changes when Printed

html,css,css3,media-queries,media
I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari

css,media-queries
I am starting a new site and was gathering some feedback for my to-develop CSS media query, to see which resolutions were reported by some devices I asked some friends to test the css media query, and it turned out no Iphone user returned a result for the resolution part....

div positioning is off when changing visibility

html,css,media-queries
I'm trying to hide an anchored link to tel with a media query. So far it works as intended, but when I try to replace it with a similar icon and text without the anchor, it gets repositioned a bit out of line (like a 0.5em margin on top I...