SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 61
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    A kind of homework.

    I know it's outdated, but what I can do :P
    It doesn't matter, you can still use that outdated doctype and the answer is still the same as I have given above

    Remove the viewport meta tag and the media queries and your page will be scaled in modern mobiles. The page will be invalid most likely because that old doctype only supports a subset of html and css but modern browsers will still render it. There may be issues in old smartphones that ignore html and css that they don't understand but you can't expect cutting edge css3 and html to work in outdated systems unless you just want plain text.

    Again the crux of the matter is that you need to use media queries (and the viewport meta tag) to produce a different more readable display on mobile devices rather than trying to squash an existing web page into a 3 inch wide screen.

    I have given you most of the tools you need and provided examples in earlier posts so I suggest you start from the beginning of this thread again and work your way through what has already been discussed and coded.

    You should really set up a demo site so that we can help you with specific code or at least set up a codepen example.

  2. #27
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remove media, and that meta tags, it's doesn't solve anything. But, are the answer that with this technologies, can't do it right?

    http://codepen.io/anon/pen/CnIgr

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What do you mean it doesn't solve anything? What are you trying to solve exactly?

    Your demo looks the same on a mobile as a desktop but squashed which seems to be what you were aiming for.

    Are you not supporting desktop at all?

    You are using application/html+xml which IE8 and under don't understand and most likely won't display correctly as they don't understand real xhtml. They can only use xhtml when served as text/plain (basically html).

    You also have the viewport meta tag twice in your code for some reason.

    You still don't say what your desired result is?

  4. #29
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My desired result is that page fit to any screen while I change resolution(phone). in #17 post, you can see, what is the difference of actualy and my site(viewed by mobile opera).

  5. #30
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SOMETHING HAPPEND, I create ID of my body tag, and all was perfect, and i don't know why, my lav-bg.png is not showing. I use one css which import that css which include that body id tag.
    Code:
    #naslovna {
    	background-attachment: fixed;
    	background-image: url('images/lav-bg.png');
    	background-repeat: no-repeat;
    	background-position: right top;
    	background-color:#012B60;
    	
    }

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    My desired result is that page fit to any screen while I change resolution(phone). in #17 post, you can see, what is the difference of actualy and my site(viewed by mobile opera).
    I have already explained this and in post #17 picture 1 (Their) is wrong and is not mobile optimised at all. Its just been scaled down by the mobile browser to fit the width of the smaller screen. That is the default action for all sites that are not mobile optimised.

    If you want to create a site that is not mobile optimised then do nothing. Don't add viewport meta tags, don't add mobile doctypes. Just design for 980px fixed width and that's it.

    You should not be trying to emulate the result in picture 1 (post #17) as that is not a mobile optimised site. You should as I have been saying all along be creating a cut down version with a revised layout with normal sized text (not miniscule text as in picture 1). Please read the articles I have linked to or you will learn nothing from this exercise.

  7. #32
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please, can you download this http://www.sendspace.com/file/8kq982 and look in the lav.css where I import all css, but in sajt.css file, i specifed that lion go to the right top side, but why is my page background where I specifed that body have id "naslovna" without lion? All was ok, but suddenly is wrong.
    Please look.

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Unfortunately I am unable to download that file for the reasons shown in the screenshot below.

    download.png

    You don't need to use a third party download helper like that just create a local zip and attach it to your post. However make sure it is virus free before you send as you have probably picked up unwanted programs from that site. You really must get a proper paid host if you want to continue with web design and they are very cheap these days for a basic starter package.

  9. #34
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't like that, showing me some error ocured. ( Invalid File)
    It's virus free. No virus/mallware or something harmful. Maybe your AV is warning you, I don't know where is a problem in files.
    Here you a another link, try this.

    http://speedy.sh/GDg2H/New-WinRAR-archive.rar

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

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry but I can't risk downloading something from those share sites as they are just too notorious for installing viruses and spyware. You have scanned your own file but that's not the problem its the places where you are asking me to download it from that are the problem.

    I'm not sure why you can't simply zip it up? It's not as though its an involved project with scripts and databases etc. If you have windows just right click the folder and send to compressed folder; that's all there is to it.

    Otherwise set up a dropbox account and you can share files that way as it is a trusted source.

  12. #37
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I solve the problem. Now, i have red your article about responsive design. Can you help me to finish this example. I have add to all site meta tags for them, now just to add that media tags, so please help me to do that... Have I resize image to max 120px width or can use that which using.
    Here you are all my files, so If you be so kind to just look, and try to do it.
    https://www.dropbox.com/sh/h4dtm0mbygsaopp/1pvdXbE7gB
    or the zip file
    https://www.dropbox.com/s/4kl77chx9r1kkhs/site.zip

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi.

    I'll give you a start on naslovna.xhtml but you will need to follow similar patterns on all the other pages. I'm not going to code them all for you as it would take to long and you will learn nothing in the process.

    This is the new css for lav.css.
    Code:
    @import url("css/sajt.css");
    @import url("css/novi.css");
    @import url("css/under_construction.css");
    @import url("css/ko_je_lav.css");
    @font-face {
    	font-family: 'Homestead Display';
    	src: url('fonts/Homestead-Display.ttf');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Homestead Regular';
    	src: url('fonts/Homestead-Regular.ttf');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Wisdom Script';
    	src: url('fonts/WisdomScript.otf');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Wisdom';
    	src: url('fonts/wisdom.otf');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Wisdom';
    	src: url('fonts/wisdom.otf');
    	font-weight: normal;
    	font-style: normal;
    }
    html, body { height:100%; }
    body {
    	background: #1f8cc4; /* Old browsers */
    	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
    
    	background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
    	background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
    }
    h1 {
    	font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
    	color:#fff;
    	text-align:center;
    }
    .zivilav {
    	font:60px 'Homestead Display', Arial, Helvetica, sans-serif;
    	color:#fff;
    	text-align:left;
    }
    .igra_i_strast { font:60px 'Homestead Display', Arial, Helvetica, sans-serif; }
    html, body {
    	margin:0;
    	padding:0
    }
    #wrap {
    	min-height:100%;
    	background:url(images/lav-bg-intro.png) no-repeat 50% 50%;
    }
    #wrap1 {
    	min-height:100%;
    	background:url(images/splash_screen.jpg) no-repeat 50% 50%;
    }
    #container {
    	width:98%;
    	margin:0 auto;
    	color:#fff;
    	font-family:arial, helvetica, "sans serif";
    	font-size:12pt;
    	white-space: nowrap;
    }
    .denied {
    	font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
    	color:#fff;
    	text-align:center;
    }
    #dugme {
    	margin:20px;
    	padding-bottom:20px;
    	text-align:center;
    	white-space: nowrap;
    	position:relative;
    }
    .lav {
    	display:inline-block;
    	width:183px;
    	height:79px;
    	border:1px solid #729fc9;
    	text-align:center;
    	font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
    	color:#fff;
    	text-decoration:none;
    	margin-left: auto;
    	margin-right: auto;
    	background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
    }
    #dugme1 {
    	margin:200px;
    	padding-top:100px;
    	text-align:center;
    }
    .lav1 {
    	display:inline-block;
    	width:120px;
    	height:50px;
    	border:1px solid #729fc9;
    	text-align:center;
    	font:45px/30px 'Wisdom', Arial, Helvetica, sans-serif;
    	color:#fff;
    	text-decoration:none;
    	margin-left: auto;
    	margin-right: auto;
    	background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
    }
    #dugme a:hover { text-decoration:underline; }
    #dugme1 a:hover { text-decoration:underline; }
    #top {
    	top:0;
    	left:0;
    	right:0;
    	height: 110px;
    	padding-bottom: 10px;
    	position: fixed;
    	top: 0;
    	text-align:center;
    }
    .image-cnt {
    	display:block;
    	margin:0 auto 110px;
    	width:146px;
    	height:195px;
    }
    #header { padding:120px 0 0; }
    .lav {
    	font-size:25px;
    	line-height:40px;
    	width:90px;
    	height:40px;
    }
    #content2 {
    	width:70%;
    	color:#000;
    	background-color:white;
    	padding-top:2px;
    	padding-left:10px;
    	padding-right:10px;
    }
    .o-nama { color:blue; }
    
    #naslovna h1.fancy1 {
    	font: 50px/27px 'Wisdom Script',Tahoma,Geneva,sans-serif;
     text-align: left;
    }
    #naslovna h1.fancy1 span{display:block;margin:40px 0 0}
    #flasha-cnt1 a{
    	display:inline-block;
    	margin:0 0 20px;
    }
    .img68{margin:0 0 0 10px}
    
    @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}
    }
    
    @media screen and (max-width:660px){
    	#flasha-cnt1 {text-align:center}
    	#naslovna {background-position:50% 0}
    	#container1 {
    		padding:0;
    		width:auto;
     }
    	#top1 img{
    		float:none!important;
    		width:50%;
    		max-width:194px;
    		height:auto;
    		margin:auto;
    		display:block;	
    	}
    	#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}
    	ul#list-of-items-first-row1 {padding:0;margin:0;}
    	.img283{width:220px;height:auto}
    	.img68{width:30px;height:auto;margin:0 10px 10px 0}
    }
    @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}
    }
    Here is the revised html for naslovna.xhtml.

    Code:
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <title>Main page</title>
    <link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" />
    </head>
    
    <body id="naslovna">
    <div id="container1" >
    		<div id="top1"><img src="images/radi-kako-mislis-zivi-kao-lav-logo.png" alt="lav" style="float: left" width="194" height="146" />
    				<h1 class="fancy1">Radi kako mislis <span class="zivilav"> Zivi kao lav</span></h1>
    		</div>
    		<div id="header1">
    				<div id="links1"> <a href="naslovna.xhtml" title="Naslovna" accesskey="1">Naslovna (1)</a> | <a href="#" title="Kontakt" accesskey="2">lav vesti (2)</a> | <a href="portfolio.xhtml" title="portfolio" accesskey="3" >lav portfolio (3)</a> | <a href="ko_je_lav.xhtml" title="Ko je lav" accesskey="4">ko je lav? (4)</a> | <a href="#" title="Twitter LavPivo" accesskey="5">Twitter LavPivo (5)</a> | <a href="#" title="lav" accesskey="6" >lav fudbal (6)</a> | <a href="#" title="LavTwist Pinterest" accesskey="7">foto galerija (7)</a> | <a href="#" title="Carlsberg" accesskey="8">video galerija (8)</a> </div>
    		</div>
    		<div id="content1">
    				<ul id="list-of-items-first-row1" >
    						<li id="flasha-cnt1"> <a class="portfolio" href="portfolio.xhtml"> <span class="video"><img class="img283" src="images/video.jpg" alt="JA SAM LAV" width="283" height="253"/> </span> <span class="bottles"><img  class="img68" src="images/flasha-lavpivo.png" alt="Lav pivo" width="68" height="255"/> <img class="img68" src="images/flasha-limun.png" alt="Lav pivo limun" width="68" height="255"/> <img  class="img68" src="images/flasha-grejp.png" alt="Lav pivo grejp" width="68" height="255"/> <img  class="img68" src="images/flasha-djumbir.png" alt="Lav pivo đumbir" width="68" height="255"/> <img  class="img68"  src="images/flasha-twist.png" alt="Lav pivo twist" width="68" height="255"/></span> </a> 
    								<br /><a href="lavigraistrast.xhtml"> <span><img  class="img283"  style="display:block;" src="images/sajt-slicica.jpg" alt="JA SAM LAV" width="283" height="253" /> </span> </a> <a href="sponzor.html"> <span><img class="img283" src="images/sponzorstvo-modul.jpg" alt="JA SAM LAV" width="283" height="253"/> </span> </a> <a href="video2.html"> <span><img class="img283" src="images/video2.jpg" alt="JA SAM LAV" width="283" height="253" /> </span> </a> </li>
    				</ul>
    		</div>
    		<div id="bottom"></div>
    		<div id="footer">
    				<hr />
    				<div id="navigacija1"> <a href="under_construction.xhtml" title="Sitemap">Sitemap</a> | <a href="under_construction.xhtml" title="Kontakt">Kontakt</a> | <a href="under_construction.xhtml" title="RSS" >RSS</a> | <a href="under_construction.xhtml" title="Facebook stranica" >Facebook stranica</a> | <a href="under_construction.xhtml" title="Lav Pivo Twister">LavPivo Twitter</a> | <a href="under_construction.xhtml" title="LavPivoSrbija Youtube">LavPivoSrbija Youtube</a> | <a href="under_construction.xhtml" title="LavTwist Pinterest" >LavTwist Pinterest</a> | <a href="under_construction.xhtml" title="Carlsberg" >Carlsberg</a> | Copyright  Fedek Tomislav 2013
    						<hr />
    				</div>
    		</div>
    </div>
    </body>
    </html>
    Pay attention to the media queries at the bottom of the css file that modify your elements depending on how they look at smaller widths. It's a matter of changing the browsers window width and seeing what it looks like and then tweaking the layout accordingly until you can scale the page reasonable from big to small.

    If you use the above code your layout will look like this on a small screen.
    small-screen.png

    Work your way through the media queries and see how they modify the way the page is displayed to best fit the smaller screen. Sometimes it means you have to design the normal desktop page with this is mind so that you can have hooks for styling and for moving blocks around.

  14. #39
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Small word is thank you. I see that you know about this..So, I know that is not ok, that you finish, but it will help me. I seem what you do, but I don't know to other pages. Ok, what I now should do? Problem is that I don't understand at all what thay saying in the that text..

    I now should add that class and so on, and make some media in css with that class? or what?
    Please help me.

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    Ok, what I now should do? Problem is that I don't understand at all what thay saying in the that text..
    Just post the piece of code you don't understand and I will talk you through it.

    First confirm that you now see on your small-screen device the display as shown in my screenshot which will tell me if you have copied the code correctly?

    A quick run through of the media query I used.

    Code:
    @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}
    }
    This is a media query:
    Code:
    @media screen and (max-width:800px){
    
      /*CS code goes here......*/
      .test{background:red}
    
    }
    /* end media query */
    What the above media query is saying that on viewports smaller than 800px please apply these new styles within this block. Therefore you can see that for 800px width or smaller I have tweaked these styles.

    Code:
    #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}
    There is nothing special there but just moving things around and changing the size of the images so that they fit better. Feel free to change it as best suits your design.

    Then next you will see:

    Code:
    @media screen and (max-width:660px){
    
    }
    This is the next point at which your design seems to break (these break points will vary with every design). I have again just re-coded the display to fit more neatly into the smaller width.

    You can add as many breakpoints as you like but its best not to overdo it as that means you are making too much work for yourself. Try and find a happy medium with the design so that just a few tweaks can bring things back into line. I can't really teach you these things so you need to experiment.

    At smaller than 400px width you need to ensure that you have no big elements in place so reduce image size via css so that they fit better n the space available. Make sure no divs are too wide and where you have more than one column reduce it to one column for the smaller display. It's like creating a new layout but restricted somewhat with the html already in place so you have to plan ahead and be inventive.

    You need to make a copy of the site and then play around with the code I have given you until you are comfortable with applying the concept and making changes.

  16. #41
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    @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}
       .img947{width:300px;height:auto} 
    }

  17. #42
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #43
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post

    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.
    Code:
    @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}
       .img947{width:300px;height:auto} 
    }
    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.

    Code:
     .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 )

    2) 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.

    3) Is the viewport less than 800px or the rule won't be triggered.

    4) 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

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

  20. #45
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    width:98%;
    padding-top:10px;
    padding-left:150px;
    It's not in the middle...I know it..

    I write
    Code:
    #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..

    Code:
    max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
    Last edited by tomislav91; Nov 23, 2013 at 11:56. Reason: i solve it

  21. #46
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  22. #47
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solve the image lion. But still don't understand how to in different resolution specify font-size..

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

    Code:
    #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).

    Code:
    @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}
    }

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I also changed the big text to a medium size in the 660 media query.

    Code:
    @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.

  25. #50
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in 440 you wrote
    Code:
    .zivilav {font-size:30px;text-align:center}
    and in 600
    Code:
    .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
    Code:
    <body id="pocetni">
    and
    Code:
    <h1 class="veliki_tekst">PUNOLETAN</h1>
    In css write
    Code:
    @media screen and (max-width:800px){
    	#pocetni h1.veliki_tekst {
     	font-size:50px;
    			text-align:center;
    	}
    }
    Code:
    @media screen and (max-width:480px){
    	h1{font-size:20px;}
    }
    And font size when I am 480 is 50px.Why??


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
  •