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.
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.
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.
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.
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.
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.
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.
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.
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:)
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).
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.
<!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.
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.
You need to set the image size to match the parent element.
e.g.
.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.
