I’m going to try, but i did before, and don’t know what i’m doing.
I do on portoflio page. And all look ok, but in 800px page, when i entry anithing, nothing happend? why? Resolution of pictures are the same.
@media screen and (max-width:800px){
#flasha-cnt1 a.portfolio{text-align:center;display:block}
.img68{width:50px;height:auto;margin:0 10px 0 10px}
.bottles{display:block!important}
#flasha-cnt1 {padding-left:0}
[B] [I] .img947{width:300px;height:auto} [/I][/B]
}
And what is mean if you don’t write anything in some media? I saw that in media 480 for the img68, you dont specifed nothing.
Do you use a web developer tool such as Firebug? Chrome and IE also have similar tools available and you should become familiar with them. You can then just right click and inspect the element in question and see where the styles are being applied from and usually is becomes obvious why it isn’t working as expected.
I’m not going to answer your question specifically but tell you reasons why the style might not be applied.
.img947{width:300px;height:auto}
1)Do you have an image actually with a class of ‘img947’ ?
(Note it would be better to name the class something sensible relating to what it is rather than just using the width. I know you were following my example but I don’t speak your language so just used those classes for ease in the demo :))
If you have an image with the class being applied correctly then you need to see if something is over-riding it elsewhere.
a) Do you have more specific rules elsewhere? (e.g. rules with more weight #test .img947{} )
b) Do you have inline styles on the image itself over-riding it (you would need !important added to beat those)
c) Do you have rules further down the cascade over-riding it. Remember media queries follow the usual rules of the cascade so if you apply styles after the media query in the source they will win out.
Is the viewport less than 800px or the rule won’t be triggered.
Do you have typos. Use the validator and css validator and check for typos.
You will find firebug (or similar) invaluable for tracking down these problems and its something you need to learn to do for yourself otherwise you will never be able to bug hunt 
That’s because I didn’t need to as it will be affected by the 800px rule.
Remember when I said that any viewports less than 800px will get this rule. Its not a rule for 800px only but up to 800px. Therefore in the smaller media query you only need to change things that need to be changed but all the rules from above still cascade through. There is no need to make the image smaller still unless you of course wanted to do so.
That’s it from me today - back tomorrow
I’m working on my ko_je_lav page. And I have several questions.
Can I somehow fit image with content(white) part, or must specifed in media width?
and one more question. This white part should be on the middle of page. I specifed container3 like
width:98%;
padding-top:10px;
padding-left:150px;
It’s not in the middle…I know it…
I write
#content2{
margin: 0 auto;
}
and fix the white surface go into the middle. BEcause it is cscade, i rule put into the 800px.
But that image, how to fit the white surface…
max-width:100%;
max-height:100%;
margin:auto;
display:block;
Tell me, how to fix width of images. 'cause, ready.mobi show me score 3 because of large graphic. I must all around change width?
And how in pocetna.xhtml size that lion and that background?
And if I specifed the h1 in 660 or lower, and in 800, when I go to 800resolution, it show me h1 element in 660resolution, smaller. I understand it going cascade, last you defined, it is choosen, but how to solve than?
It is normaly when I am at 720 it fits h1 with h1 I was defined in 800 resolution…
I solve the image lion. But still don’t understand how to in different resolution specify font-size…
Hi,
In the example I gave you in post #38 I changed the font-size in the smaller media query here.
@media screen and (max-width:480px){
#naslovna h1.fancy1 {
font-size:25px;
line-height:1.2;
text-align:center;
}
.zivilav {font-size:30px;text-align:center}
.video,.img283{float:none;display:block;margin:auto}
}
I used the id you had in the body tag (#naslovna) to isolate that page.
#naslovna h1.fancy1 {
font-size:25px;
line-height:1.2;
text-align:center;
}
If you want to do the same on other pages then use the id that is in the body tags of the other pages or indeed don;t use the body tag at all and apply that rules globally (assuming there are no more specific styles being applied).
@media screen and (max-width:480px){
h1.fancy1 {
font-size:25px;
line-height:1.2;
text-align:center;
}
.zivilav {font-size:30px;text-align:center}
.video,.img283{float:none;display:block;margin:auto}
}
I also changed the big text to a medium size in the 660 media query.
@media screen and (max-width:660px){
#naslovna h1.fancy1 {
font-size:35px;
line-height:1.2;
text-align:center;
}
.zivilav {font-size:45px;text-align:center}
#naslovna h1.fancy1{margin:0}
#naslovna h1.fancy1 span{margin:10px 0 0}
It’s just a matter of finding the best fit for the size of window. As I said you can tweak all those things up and down (including the breakpoints) until you get it looking right.
in 440 you wrote
.zivilav {font-size:30px;text-align:center}
and in 600
.zivilav {font-size:45px;text-align:center}
When I specifed like that, he use 30px(last you defined). I don’t know are you understand me…Now, when I am at resolution screen 550, font size of .zivilav is not 45px, but 30px it is.
Look now…
I in pocetna.xthml specifed
<body id="pocetni">
and
<h1 class="veliki_tekst">PUNOLETAN</h1>
In css write
@media screen and (max-width:800px){
#pocetni h1.veliki_tekst {
font-size:50px;
text-align:center;
}
}
@media screen and (max-width:480px){
h1{font-size:20px;}
}
And font size when I am 480 is 50px.Why??
Because for the (max-width:480px) you gave a general style for all <h1> in the pages, and in (max-width:800px) you gave a specific style: if <body> has id=“pocetni” and the <h1> has class=“veliki_tekst”, then apply the 50px.
According to the cascade rules, a specific style always wins, even when the general style is later in the stylesheet.
And the condition (max-width:800px) is also true for (max-width:480px)!
So you can do:
@media screen and (max-width:800px){
#pocetni h1.veliki_tekst {
font-size:50px;
text-align: center;
}
}
@media screen and (max-width:480px){
#pocetni h1.veliki_tekst {
font-size:20px;
}
}
Now both have the same specificity, and the condition (max-width:480px) is winning over (max-width:800px), if the width is < 480px.
Thanks for answer, but not giving result. When I am using resolution 720px, font size of that h1 should be 50px, isn’t? For me, it is 20 px for all resolution which I defined(800px,660px and 480px). I use your code. I just want that that text in h1 with that class to be different in different resolution.
ANYONE?
Hi,
You will need to give us an update on the exact code you are using as it is hard to guess without seeing how you have applied the tips we have been giving. Either create a working demo, another zip or a live version and we can help more quickly.
Hi,
I’m not sure I’m looking at the correct elements but the ht.veliki_tekst seems to be working as expected on that zip you gave.
On pocetna.xhtml I am seeing these sizes of that h1.veliki_tekst. text.
At greater than 800px width its 100px
At less than 800px width its 50px
At less than 480px width its 40px
Did you mean this element or was it some other element you were having problems with? Or are you seeing something different?
I reupload files, so you can see now updated.
https://www.dropbox.com/s/hd2711o0rnohqke/New%20WinRAR%20archive%20%282%29.rar
I means for that text too(#pocetni h1.veliki_tekst ) , but in lav.css
@media screen and (max-width:800px){
#ilinisi span.denied1
{
font-size:40px;
}
}
and in
@media screen and (max-width:480px){
#ilinisi span.denied1
{
font-size:15px;
}
}
But look the image from mobile emulator site.
Size of font “kad porastes bices lav” is the same. Why is that?
I have the link, I upload to free hosting, maybe opera not working fine? Can you check with mobile
http://lavpivo.netii.net/denied.xhtml
In both cases(#pocetni h1.veliki_tekst and #ilinisi span.denied1 are the same errors.)
Hi,
Those two pictures look like mobile pictures and therefore I would expect them to look the same. Mobiles have enhanced resolution but they will still report 320px for the device-width. Otherwise you will be getting a scaled down version of the real site on mobile devices that have high densities and then you are back to square one.
Test your media queries on a desktop browser and open and close the window and you will see the media queries click into place. Changing the resolution of a mobile display should not trigger a media query for a greater viewport width which is where I think your error is.
But error is with text, not pictures… The size is the same. Like you can see in my last post…
That’s what I said. The text is the same size because they are both mobile devices aren’t they? You can’t change the resolution on a mobile device and have it display as a desktop because the viewport width is still only 320px. At least that’s how I understand it.
It seems to me as though you are changing that resolution on that mobile (or mobile emulator) but that won’t change what the device will refer to as viewport width as that is mapped to css pixels and not dips (device independent pixels). Mobiles now have double density displays (or more) compared to desktops but they still get mapped to css pixels as far as web developers are concerned.
Just because your phone has a high resolution doesn’t mean you want the layout scaled microscopically small.
I think this is a non issue to do with you thinking that something should have changed when it shouldn’t. View the display on a desktop and change the window size and that’s roughly what you will see on the mobile (more or less).