PDA

View Full Version : Media Queries Help?


pamr
05-18-2012, 01:08 PM
I'm trying to add media queries to my site so it looks okay on the ipad and iphone. I can't get it to work though! Everytime I edit the tablet.css page, the main index.html page gets edited too. How can I get this to work? I'm at a complete loss. Here's the URL: www.worryfreeclaims.com (http://www.worryfreeclaims.com). Thank you!

gentleone
05-22-2012, 10:07 PM
Okay... I see a an url here. Looking at the CSS I see that you didn't set media queries at all.

You should have something like this:

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" />
<link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" />

Or you can just make one stylesheet and set the media queries in there.

But! Looking at that homepage it's only images. That's not how you should develop websites and this is certainly not going to work on a small screen. You should use real text like on the other pages and align everything properly. I recognize the 1, 2, 3 boxes which I gave you an example code for yesterday. if you're not up to that, then changing layouts with media queries is really tough. You must understand at least the basics of CSS and how the normal flow of the document and how floats works.
Your navigation for instance should be an unordered list which would be in the first place the right and semantic choice and it will be easier to change (with media queries) if the viewport gets smaller such as the mobile phone.

domedia
05-23-2012, 12:59 PM
Merging threads.

pamr
05-23-2012, 02:30 PM
Thanks so much for your help. I created a test page where I split everything up in the CSS so not everything is an image. The featured image with that text is still a flat image though, mainly because I don't know how to fix it. However, it's coming from the external CSS stylesheet instead of within the HTML page. I hope this makes sense!
I've tried adding media queries to the site before, but when I alter, say, tablet.css, it edits the main stylesheet too. For example, the featured image is 960px. When I write code for the featured image in tablet.css and import a photo that's 700 px or something, that 700 px image also shows up in the main CSS. I feel like I'm missing something but I can't tell what it is.

gentleone
05-23-2012, 06:18 PM
I'm not sure what you mean. Do you have that test page online?

pamr
05-23-2012, 06:28 PM
First I want to thank you for just even reading my posts!
I created a test page and started from a DW template to figure this craziness out. I'm slowly starting to get the hang of it, but I'm having difficulty placing images and text while making sure everything is a percentage (so the width is 100% instead of 960 px). I'm also having trouble with the footer since it's one huge graphic. Actually, everything is a graphic but I don't know how to build some of it in straight HTML. Do you have any tutorial links you'd recommend? I'm checking out the Media Queries tutorial on DW Club right now.
www.worryfreeclaims.com (http://www.worryfreeclaims.com)
www.worryfreeclaims.com/test (http://www.worryfreeclaims.com/test)

gentleone
05-23-2012, 07:01 PM
I'd recommend to start with learning the basics of HTML & CSS. Hacking around a DW template without really knowing what you're exactly doing will give you a hard time. I also can't explain how to do all that's necessary through DW design view. I work with code, so I'm useless explaining things regarding design view.

HTML & CSS is not that difficult once you understand how the natural flow of a HTML document is, how the CSS box model works and how to position elements with CSS. These are things that you really need to know before even thinking of working with media queries.

Please don't get me wrong, because I really don't want to offend you, but if you don't know how to code that header image, then working with media queries is a level too high for you. The thing with media queries is that you can reposition elements or swap /override background images based on a certain screen width (breakpoint), so knowing how to position elements with CSS (floats, position property, display property, etc.) is a must with media queries.

I'd recommend to start learning the basics at this site otherwise you will hit wall after wall after wall.
http://htmldog.com/guides/

pamr
05-23-2012, 07:02 PM
No offense taken! I've only made extremely basic HTML sites before. I'm not a developer, but being forced to be one :/ thank you for all your patience and the link!