SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media query for Samsung

    Hi

    Very new to media queries. My pages work reasonable well in most devices but I cannot get them to work with Samsung Galaxy Mini S5570

    For instance I have small, narrow pages that show ok in an iPod 4 simply with the meta tag

    Code:
    <meta name=viewport content="width=device-width, initial-scale=0.5">
    but not in the Samsung that ignores the meta tag.


    In another set of full pages I have a different stylesheet the works for the iPod, but the Samsung looks to the main stylesheet, instead.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" media="only screen and (max-width: 500px)" href="indonesiaIOS.css">
    <link rel="stylesheet" media="only screen and (min-width: 501px)" href="indonesia.css">


    Any help appreciated before I lose all my hairs...

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

    Rather than linking to your media queries (which I believe was problematical in older devices) it's much easier to do it all in the one css file.

    e.g.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled Document</title>
    <style>
    .test {
    	max-width:960px;
    	margin:auto;
    	background:red;
    	min-height:100px;
    	text-align:center;
    }
    .medium, .small { display:none }
    @media screen and (max-width:760px) {
    .test { background:blue }
    .desktop { display:none }
    .medium { display:block }
    }
    @media screen and (max-width:320px) {
    .test { background:green }
    .medium { display:none }
    .small { display:block }
    }
    </style>
    </head>
    
    <body>
    <div class="test">
    		<div class="desktop">Desktop display</div>
    		<div class="medium">760px and smaller</div>
    		<div class="small">320px and smaller</div>
    </div>
    </body>
    </html>
    Try the above on your phone and see whether it works or not. You should see the green box the same as when you close the desktop window to 320px.

    Unless you are buildng apps or somthing specific then the viewport meta tag you should stick with is this:

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Don't set a maximum scale as that stops users zooming.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    many thanks

    After losing most of my hair, I found a few things:

    a) the code <meta name="viewport" content="width=device-width, initial-scale=1.0"> that I had in all my pages rendered only a small part of them in a small screen and you had to move arounf to find out what it was all about.... By taking it out I get the full page albeit very small to read properly. I am not sure which is best and more efficient, until I redesign the pages for small screens

    b) when I started putting media queries into the page it did not work, until I found out that they must be at the vey end of the css, or later code will invalidate the queries.

    Now, I may be able to use media queries in some pages to alter little things like making link buttons bigger, but other than redesigning the pages for small screens I do not know what should be best.

    Your thoughts and advice will be much appreciated.

    Regards

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    Hi

    many thanks

    After losing most of my hair, I found a few things:

    a) the code <meta name="viewport" content="width=device-width, initial-scale=1.0"> that I had in all my pages rendered only a small part of them in a small screen and you had to move arounf to find out what it was all about.... By taking it out I get the full page albeit very small to read properly. I am not sure which is best and more efficient, until I redesign the pages for small screens
    The first thing you need to understand is that the viewport meta tag is only to be used in conjunction with media queries. When you add the viewport tag you are saying to the mobile device "don't worry, I know what I am doing and will take control of the layout so please don't scale it infinitesimally small" . If you then don't use media queries then you have just shot yourself in the foot.

    If you aren't using media queries then don't add the viewport tag and the device will scale the page to fit (it will assume 980px width and then scale smaller until it fits in the device window which means text will be incredibly small and impossible to use without zooming).

    If you are using media queries then you will need to add the viewport meta tag as devices will not obey the media queries until you have told them to do so via that meta tag.

    b) when I started putting media queries into the page it did not work, until I found out that they must be at the vey end of the css, or later code will invalidate the queries.
    Why should media queries suddenly skip the cascade and skip normal rules? You must follow the same logic that you do for every CSS rule or stylesheet and create a logical cascade as in my example. Just because you linked to a stylesheet with a specific media query it doesn't mean that the device will ignore any other CSS. That just isn't logical

    Just use the method in my post as it is simple and to the point and easier to manage than multiple files. When you use media queries you basically just want to modify a few existing rules and do not need to create full stylesheets of yet more code. It usually only takes a few lines of code to make the changes required in a simple page if you plan it carefully.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the explanation, but are you saying that it does not matter if the queries are at the top or at the bottom of the css?

    QUOTE]Why should media queries suddenly skip the cascade and skip normal rules? [/QUOTE]

    If I have code to say background:blue; for the stylesheet, but enter an earlier media query for background:red; then does it not get overridden by the following instruction and produce a background blue?

    In any case, that was what happened for some time, until I moved the media queries to the very end of the stylesheet. then, as if by magic, code was being obeyed.



    [

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    Thank you for the explanation, but are you saying that it does not matter if the queries are at the top or at the bottom of the css?
    No I am saying the exact opposite

    Look at my demo to see the cascade in action.

    Rules from the media query follow the normal rules of the cascade so their position within a stylesheet is of utmost importance. Just because you have a rule in a media query does not mean that a rule further down the stylesheet will be ignored. All rules must follow the normal rules of the cascade. The fact that soem devices get additional rules does not exclude them from reading rules in the normal stylesheet.

    Look at my demo to see how the background changes color; but if you move the first rule to the end of the stylesheet then all the similar rules in the media queries are over-ridden. The same would apply to the width media queries as they must be in order to or they won't be executed correctly. Take my demo and play around with it on the desktop so that you are familiar with what will happen when you move something out of position.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thank you very much. I had already played with your code and see what is happening and why. Just one question: I can see the classes .test .medium .small but where is the class .desktop, that you introdyce in @media?

    Does that mean that you can introduce new classes in @media that were not intriduced before? That is you can enter new code in @media, like e.g. a sidebar that is not in the main desktop code.

    Thanks

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by qim View Post
    Does that mean that you can introduce new classes in @media that were not intriduced before?
    There is a class of "medium" on the div in the HTML, and you can use it anywhere you like—in a media query, or anywhere. In this example, there's no need to style the div specifically outside the media query, so there's no rule for it outside a media query. As Paul says, media query CSS is just normal CSS. It's just that the media query limits its application to a specific screen size etc.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both

    I think I understand now, and started redesigning a small page, but I've come against a couple of problems. One of them seems simple but does not work.

    In the html for the Desktop I have a heading in a div #text1 which I hid for the media query with

    #text1 {
    visibility:hidden;
    }

    and then created a replacement heading for the mobile #name, which I thought would work simply by doing things around, i.e. hidden in the main

    #name{
    visibility:hidden;
    }

    and in the @media

    #name{
    font-size:13pt;
    OTHEER CODE

    }

    But it does not work; the first part yes it hides the text1 in the mobile; but the second part does nothing to either screen.

    What am i doing wrong, please?

    Thanks

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It would be better to see a working example to know what you are really doing here. Try to avoid hiding content on different devices, though. Normally, if you want a heading to appear differently on different devices, write different styles for different screen sizes rather than duplicating the element(s) and making a mess of your HTML.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph
    It's late here and I'm driving 1300 km tomorrow morning. So, I hope you're still around on Friday, when I will reply fully. meanwhile i found a way round my problem by forgetting about visibility:hidden and replacing that with font-size:0;

    It works.

    Many thanks for your help.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    Hi ralph
    It's late here and I'm driving 1300 km tomorrow morning. So, I hope you're still around on Friday, when I will reply fully. meanwhile i found a way round my problem by forgetting about visibility:hidden and replacing that with font-size:0;
    First of all visibility:hidden only makes things invisible. It does not remove them from the page. They are still in the page taking up space but just invisible. Why did you not just use display:none as in the example I gave you which removes the element completely from the page? ( Font-size:0 may make the element appear to disappear but will likely still leave traces on the page as there will be margins, padding, line-height still evident on the page.)

    In your code you initially hide #name with visibility:hidden but in the media query you never show it again (you needed to add visibility:visible). Refer to my demo again as it is hiding and showing elements properly.

    As Ralph said you don't usually create new elements for mobile (unless its the mobile menu hamburger menu) but generally you just modify existing rules. My example was just for example

    For mobile you would usually do things like this:

    Code:
    .main {
    	float:left;
    	width:69%
    }
    .sidebar {
    	float:right;
    	width:28%;
    }
    @media screen and (max-width:760px) {
    	.main, .sidebar {
    		float:none;
    		width:auto
    	}
    }
    That will make a 2 column layout go into one column for smaller screens. These are the kinds of things you should be doing for mobile.

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    I don't know if it is my head malfunctioning after the long drive...but I've come up against a brick walI!

    I moved on to the index page, which is a bit more compliacted, and things are not working as I expected.

    For instance, many of the blocjs have a set width; I changed them to width:auto; but no good!

    is it possible to give you the url in this forum?

    Thanks and Happy Easter

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    T

    is it possible to give you the url in this forum?
    Yes just post the url and it will be easier for us to debug.

    If you don't want the url to appear in search engines via the forum then de-link it and obfuscate it a little.

    e.g.

    wwwdotpmobdotcodotuk

    just used the word 'dot' instead of '.'

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!!!
    Saves me going bald in my old age!

    http://pintotours(dot)net

    Right now I copied a couple of files to test and the url for that is http://pintotours(dot).net/Pinto/try.html

    My first attempt was just to sort out the widths, but the original html is, I believe, a lot more complicated than need be...

    Thanks Paul

  16. #16
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    I've progress a bit and my immediate problems are HTML related wjcih I should be able to solve, with time. For instance, why the non-existent padding of #content #box1 p { does not behave like #content #box1 #part2 p { although I fear irt may have something to do with scripts of which I know nothing (they were written for me).

    Thanks

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by qim View Post
    Hi again

    I've progress a bit and my immediate problems are HTML related wjcih I should be able to solve, with time. For instance, why the non-existent padding of #content #box1 p { does not behave like #content #box1 #part2 p { although I fear irt may have something to do with scripts of which I know nothing (they were written for me).

    Thanks
    P.S.

    Well, I'm now stuck on two main problems.

    a) why the globe does not reduce in size with new code from css
    b) why the "Read more" button works to open but not to close (script , I guess...)

    many thanks for your help and interest

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

    I've progress a bit and my immediate problems are HTML related wjcih I should be able to solve, with time. For instance, why the non-existent padding of #content #box1 p { does not behave like #content #box1 #part2 p { although I fear irt may have something to do with scripts of which I know nothing (they were written for me).

    Thanks
    Hi

    You have different rules for those 2 elements applying different padding.

    Code:
    #content #box1 #part2 p{padding:0 20px}
    #content #box1 p {padding:20px 15px 0 25px}
    Remember ids are unique so there is no need to over qualify them with more selectors. All you do is raise specificity and make it awkward to over-ride.

    Regarding the rest of your layout and making it scale for mobile then you have a massive job in hand because the structure is all wrong to accomplish this. First of all you are specifying to many fixed heights for content containers and that is the number 1 worst design error as you never know how tall a text box will be on a visitors computer. They may have enlarged the text via the browsers controls not to mention that many devices render text at different heights/widths anyway. Suffice to say you will almost never set a fixed height on main containers ()what happens when the text changes in the future?). I believe you have used fixed heights to make the columns equal but this is a very bad approach and on that shouldn't be used. Theser days you can use display:table and display:table-cell (ie8+) to get that equal column effect without using heights.

    You will also need to take control of fixed elements like images an make sure they scale smaller for smaller screens. The same applies to fixed width text blocks and you need to control then for smaller devices and make sure they scale or start to scale when needed.

    I haven't got time to revise your page today as there are too many things that need changing and I am out for the weekend but I will leave you with a bare-bones example that shows what you should be doing to scale the page up and down for al devices.

    This took about 10 mins to create and wil scale from large to small.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled Document</title>
    <style>
    html, body {
    	margin:0;
    	padding:0
    }
    body {
    	background: green url(/images/greenfields5.jpg) fixed no-repeat 0 0;
    	background-size:cover;
    }
    .wrapper {
    	max-width:1000px;
    	margin:auto;
    	padding:20px;
    	background:red;
    	border-radius:25px;
    }
    .container {
    	width:100%;
    	margin:auto;
    	display:table;
    	border-spacing:20px
    }
    .header {
    	text-align:center;
    	margin:20px;
    	padding:20px 10px;
    	background:#fff;
    	border-radius:25px;
    }
    .sidebar { width:238px; }
    .sidebar, .main {
    	vertical-align:top;
    	display:table-cell;
    	background:#fff;
    	padding:10px;
    	border-radius:25px;
    }
    .img-container {
    	width:100%;
    	padding-top:62.2%;
    	position:relative;
    overflow:hidden;
    }
    .img-container img {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:auto;
    }
    ul.countries {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	top:0;
    	width:100%;
    	height:100%;
    	z-index:2;
    }
    ul.countries li { position:absolute }
    li.c1 {
    	left:50%;
    	top:90%
    }
    li.c2 {
    	left:20%;
    	top:20%
    }
    li.c3 {
    	left:80%;
    	top:30%
    }
    li.c4 {
    	left:50%;
    	top:40%
    }
     @media screen and (max-width:760px) {
    .header { margin:0 }
    .container { border-spacing:0 }
    .sidebar, .main {
    	display:block;
    	width:auto;
    	margin:20px 0;
    }
    }
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    		<div class="header">
    				<h1>Header</h1>
    		</div>
    		<div class="container">
    				<div class="sidebar">
    						<h2>Sidebar content here</h2>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    				</div>
    				<div class="main">
    						<h2>Main Content</h2>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    						<div class="img-container"> <img src="http://placehold.it/640x400">
    								<ul class="countries">
    										<li class="c1"><a href="#">Country 1</a></li>
    										<li class="c2"><a href="#">Country 2</a></li>
    										<li class="c3"><a href="#">Country 3</a></li>
    										<li class="c4"><a href="#">Country 4</a></li>
    								</ul>
    						</div>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula felis. Nullam condimentum ac nisi et euismod. Nam ut rutrum sem. Integer dignissim lacus ut ipsum gravida, non congue ipsum facilisis.</p>
    				</div>
    				<!-- end main --> 
    		</div>
    </div>
    </body>
    </html>
    Simplicity is the issue and a logical understanding of how elements will flow.

    Play with the above demo until you understand how it works and then apply the same procedures to your site and work things in the same way. It's basically the same layout as your with two columns and a header. It uses max-width instead of with and just a fixed width left column. The right column is fluid and will scale smaller as required and then when we think it is small enough we change into a one column display which can shrink forever.

    The big image is tied to a div so that it can scale with the width proportionately. The awkward bit will working out where to place those links over the image but a bit of trial and error will sort that out.

    Hope that helps and I should be back Sunday as I have a busy weekend.

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whaoo!!!

    many thanks for all the qork and lesson, which is much appreciated. The pages have grown with little bits and pieces along the months and I can see they are a big mess!

    The big image is tied to a div so that it can scale with the width proportionately. The awkward bit will working out where to place those links over the image but a bit of trial and error will sort that out.
    The image has already been done but it does nort work (see PS in last post). The stuff in the left sidebar is not links. It's info and can for the mom be left out, although I have been wondering how to move them, in the mobile version, to the bottom in a different format.

    Many thanks and have a good Easter.

    Regards

    qim

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    The image has already been done but it does nort work (see PS in last post).
    You need to set the image size to match the parent element.

    e.g.
    Code:
    .image2 img{width:100%;height:auto}
    That will maintain the image's aspect ratio but you would be better off copying my example as it allows the image to scale up and down to the available width.

    Have a good Easter and I should be around Sunday for a while.

  21. #21
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:You have different rules for those 2 elements applying different padding.


    #content #box1 #part2 p{padding:0 20px}
    #content #box1 p {padding:20px 15px 0 25px} Remember ids are unique so there is no need to over qualify them with more selectors. All you do is raise specificity and make it awkward to over-ride.
    Hi
    I'm not with you. I take it that you are referring to the main css. Do you mean that it would be better (to keep to my code) to have #content #box1 #part1 p { AND #content #box1 #part2 p { ?

    In any case in th @media I set both padding to "0"

    Thanks

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    Hi
    I'm not with you. I take it that you are referring to the main css. Do you mean that it would be better (to keep to my code) to have #content #box1 #part1 p { AND #content #box1 #part2 p { ?

    No, what I am saying is that ids are unique. #part1 is a reference to a single item in the page no matter where it is. Saying #box1 #part1 is nonsense because it doesn't make it any more unique as #part1 can only be in one place in the page anyway. All you need is '#part1 p' nothing else is needed or you just end up creating specificity chains.

    You would be better of using classes anyway which you can then use anywhere and save repeating all your rules again for various elements.
    In any case in th @media I set both padding to "0"
    I believe you se the paffing to 5px which is what is showing in your page. You may be confused because the gap at the side of the top part is actually from #box1 which you are bursting out of in the small version because you set a fixed height of 390px but now the height is much taller in the smaller version. I already mentioned this to you in the above posts as the number 1 design error and now you can see why

    If you remove the height form #box1 then suddenly the white background stretches down the page over both blocks and then both blocks have a gap at the side.

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you remove the height form #box1 then suddenly the white background stretches down the page over both blocks and then both blocks have a gap at the side.
    [/QUOTE]

    Hi

    I hope I'm not disturbing you over Easter. I'm only writing this now before I forget what I have done (or rather not done...).

    As you mentioned the second part of text now stretches ad infinitum! I removed the height but it did not make any difference ( and I'm talking about the main css). My other majot problem is that I cannot get the globe to reduce in size to the size of the screen without setting width and height, but if I do, then it will not fit different devices, I expect.

    Regards

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

    Hi

    As you mentioned the second part of text now stretches ad infinitum! I removed the height but it did not make any difference ( and I'm talking about the main css).
    I was talking about when the page was small and the white background stops at 390px because that was the height you set on it. The text still flows down the page but the background is only on the text and not the actual container because that has stopped.

    I'll say this one more time because it is a very important point ; "never set a height in px on a container that holds text content". For small boxes you could use ems if you want a series of them equal or you could just use min-height if you want an initial height but in 99% of cases you just don't want any height at all as that should be dictated by the content. Sorry for the bold text but this really is the most important concept of any web page and the idea is that text can flow freely up and down without restriction and that means setting no limits on its height. If your design doesn't work without setting heights then that's a good indication that you are using the wrong approach.

    My other majot problem is that I cannot get the globe to reduce in size to the size of the screen without setting width and height, but if I do, then it will not fit different devices, I expect.
    Regards
    I've given you the solution to that in my demo. If you substitute the image I used for the image of your globe you will see it scale up and down in all its glory You just need to duplicate that section of code exactly as it is all needed to create that effect. This is the section of relevant code but you need to look at it in the context of the demo to see the effect. Just open and close the webpage to see how it adjusts.

    Code:
    .img-container {
    	width:100%;
    	padding-top:62.2%;
    	position:relative;
    	overflow:hidden;
    }
    .img-container img {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:auto;
    }
    ul.countries {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	top:0;
    	width:100%;
    	height:100%;
    	z-index:2;
    }
    ul.countries li { position:absolute }
    li.c1 {
    	left:50%;
    	top:90%
    }
    li.c2 {
    	left:20%;
    	top:20%
    }
    li.c3 {
    	left:80%;
    	top:30%
    }
    li.c4 {
    	left:50%;
    	top:40%
    }
    Code:
    <div class="img-container"> <img src="http://placehold.it/640x400">
    		<ul class="countries">
    				<li class="c1"><a href="#">Country 1</a></li>
    				<li class="c2"><a href="#">Country 2</a></li>
    				<li class="c3"><a href="#">Country 3</a></li>
    				<li class="c4"><a href="#">Country 4</a></li>
    		</ul>
    </div>

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    many thanks for your patience and help.

    I've inserted your code for the globe and YES "it scales down to its glory"!!! But... now it is the rest of the page that gets scaled down with it...
    The other problem is that the names of the destinations are visible in the main Desktpp version when the Part2 opens up. (although give me two or three wekks and I may sort that one out...

    Regards


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
  •