CODEWITHSUNDEEP
htmlcss
somdow
somdow

Reputation: 6318

css @media display problems, need clarification

Ok so I worked on a small site a while back, got the call for a mobile friendly version of it, so I took the main html/css, made duplicates so I could work and not be afraid of messing anything up, and then link the original to new mobile css when done.

Now as I roughly did this, i'm working only on the main mobile page/index for now, and I came up with... well, let me just show you.

This is the SAME html that's on the current actual site via copy/paste but with the mobile css attached to it only (to quickly test). This is how its supposed to look: http://somdowprod.net/4testing/indexMOBILESAMPLE nothing fancy.

Now THIS is the SAME as above link with the same content bought in via media queries: http://somdowprod.net/4testing/index2

On this second link, if you resize your browser to something anywhere near less than 400width, you'll see it shift down like its supposed to but its distorted. Also, when viewed on the iPhone, you'll see the same mess.

All I did different between top and bottom is that on the bottom, I added the

<link href="2882maincssHTML5.css" rel="stylesheet" type="text/css" media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  />

and on the css I added the same:

EDIT : Copied wrong code on css

 @media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

Any ideas? I'm lost, I could understand if it didn't work on the first original one but...yeah.

Upvotes: 0

Views: 748

Answers (2)

tw16
tw16

Reputation: 29575

If you delete this code out of 2882maincssHTML5.css it will work:

@media screen and (min-width: 0px) and (max-width: 480px) {
    @import url("mobile.css");
}

You have already linked the style sheet:

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)"  />

However you can rewrite to remove both the type(not needed in HTML5) and the min-width as they are unnecessary.

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)"  />

Upvotes: 1

Aaron Lee
Aaron Lee

Reputation: 1156

I had a look at it through firefox, and I didn't see any distortion, it seems to run fine, the one problem I did see was in the section:

<aside id="topics" class="floatEmL">
<h3>Hello and WELCOME to 2882films website.</h3>
<p>&nbsp;</p>
<p> 2882 Films create highly targeted content that delivers results.
We provide clients  with the highest quality video production capabilities 
and then deliver that content through all avenues of media distribution 
from the Web to Television. Here at 2882Films, we broadcasts your 
message directly to your audience. </p>

When the width of the browser is altered, the edge of this box, hangs over the right side by about 20px, meaning its not resizing with the browser, which in essence could be causing a problem.

Hope this helps a bit.

Upvotes: 0

Related Questions