SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 61 of 61
  1. #51
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    @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.

  2. #52
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    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:
    Code:
    @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.

  3. #53
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ANYONE?

  4. #54
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #55
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #56
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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?

  7. #57
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reupload files, so you can see now updated.
    https://www.dropbox.com/s/hd2711o0rn...%20%282%29.rar

    I means for that text too(#pocetni h1.veliki_tekst ) , but in lav.css
    Code:
    @media screen and (max-width:800px){
    #ilinisi span.denied1
    {
    font-size:40px;
    }
    }
    and in
    Code:
    @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.)

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #59
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But error is with text, not pictures.. The size is the same. Like you can see in my last post..

  10. #60
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    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).

  11. #61
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for answer.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •