Media query for Samsung

Mobile
21

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

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 :slight_smile:

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

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

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.:slight_smile: 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.


.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%
}




<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

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

26

Correction to above:

In fact, when I narrow the width of the page on the Desktop computer the Globe stays the same size, unlike what happens in your demonstration!

I believe I copied your code faithfully, and changed the location of the image. The only thing that I ended up not doing was adding the 640x400 at the end of the img src as it did not work.

I’ve also deleted the overflow:hidden; so that my extra destinations show below the globe.

27

Slowly, slowly…

Right, I got the image to work. There was a conflict with the old code.

However, the main problems now are that the in the big screen the destinations appear beneath the text of Part2, and in the small screen the globe only shows up AFTER the space used for Part2.

28

and in the small screen the globe only shows up AFTER the space used for Part2
.

That’s been sorted out too, but now the empty space under the globe should not be there. Seems to be connected with overflow:hidden;

(sorry about so many updates. It’s to avoid your wasting time over things taht have been sorted out)

29

Hi,

I’m around today but just to clarify is the page here http://pintoxxxxx(dot).net/Pinto/try.html (xxxx=tours) the version that we are still testing with ?

If so I’ll have a look this afternoon and see what’s going on?

30

the page I’m working on is http://pintoxxxxx(dot).net/Pinto/try.html

All I need now is to get the current basic page working. After that I can strat adding the bells and whistles.

3 problems:
how do I get rid of the destination names when part2 opens?
what is happening below the globe with different widths and empty space?
why is the footer under #boxNew ?

But, please, leave it until you have time. There is no urgency, other than I am losing my hair…

Regards

31

Hi,

All your issues are still related to the point I have been making all along about your fixed heights:)

You cannot resolve this until you remove all those heights.


#right,#content #box1,#content,#left,#boxNew{height:auto}
#content0{height:auto!important;position:static}

If you add that code at the end of the css then you will see that everything starts working properly and you get no overlaps. Of course that means that your layout is no longer in equal height columns but as I said in my earlier demo you can’t use heights to force columns to be equal you have to use the approach shown in my demo. Anything else you do along those lines is doomed to failure so you need to address those issues now.

Either forego the equal column effect or switch the structure to the one provided in my demo.

Regarding the globe then when you make the switch to the small column you should think about reducing the font-size of the country tags so that they still fit on the screen or perhaps if you have too many words then replace them with numbers and use a legend underneath the menu to show which countries they are. You can do this in the media query quite easily by hiding and showing content as already explained in this thread.

To be honest the red background around your columns looks awkward anyway and I would have used a solid white background to encompass al three columns for a crisp and clean look but of course that is more of a design issue than a css one.:slight_smile:

I realise its hard for you to go back on the design at this stage but unless you start addressing the height issues you will run into issues at every turn.

32

Hi Paul

many thanks. The question of equal columns does not seem to be an issue now as I an not including the side bar (for the time being, anyway).

I am about to go out and will not be back until around 10 pm.

I will change things tonight and i hope you will keep an eye on this thread.

many thanks

33

Hi Paul

Sorry. Got back too late last night.

I’ve applied the code and as you said it solved the paddings and empty areas. The only main problems anow are the destination names in the globe appearing below the expanded text of Part2; and the footer which is hidden under the image of the sea, at the bottom.

many thank for your help. It’s getting there…

34

Hi,

I can’t see that you have added any of my fixes to the page? Are we still on the same page as in post #29?

Adding the fixes I gave fixes all those issues as I have it working on my view of your live site using Firebug to inject the css.

Why are you putting those country links below the globe? You have some of them at over:100% from the top which will place them below the globe. Or is that what you wanted?

35

Hi Paul

Yes, I did apply the code you gave me first thing this morning around 6.30 am. Maybe you are looking at the http://pintotours.net published page. I have not touched that yet. I am working on a test page http://pintotours.net/Pinto/try.html

After applying your fixes the widths and empty spaces successfully disappeared.

Why are you putting those country links below the globe?

Have a look at http://pintotours.net The country links do not show when the text expands into Part2. The position of the links in the full Desktop page are correct (at least they work as I hoped) and in the mobile they will have to be adjusted but that is a simple job that I can do later. The problem is that when you expand the text in both the mobile version and full versions of the try.html page the links are still visible.

Regards

36

Hi,

It’s still the same problems that I have been mentioning all along and already provided fixes for :slight_smile:

You haven’t removed the height from box1 so the content overlaps the read more link and cuts in half. You need to remove the height. I’ve given you this code about 4 times now lol.


#content #box1{height:auto}

Regarding the country links showing when you click the read more link then again I have given you a fix for that. You have made the expanded part position:absolute and it therefore just overlaps anything in the way and you really shouldn’t be doing it like that. You should make it expand but stay in the flow of the document so that it pushes the globe down and not cover it up. I gave you code to do that in my previous post to turn it into a static element and push the other content down when it is revealed (this is the usual way to do a hide and show like that).

If you still want to keep the behaviour you have now (which is a very awkward approach as it hides other content) then just raise the z-index on the revealed element.

e.g.


#content0{z-index:4}

Hope that helps :slight_smile:

37

Hi Paul

Thanks

You need to remove the height. I’ve given you this code about 4 times now lol.

I had removed the height by adding the code that you gave me at the very end of the css. In fact, I had there already in a more amateurish way.

#content #box1,#content,#left,#boxNew{height:auto}
#content0{height:auto!important;position:static}

All the paddings/margins, empty spaces have been sorted, and especially the destination names have disappeared when the text expands.

As always, new problems have come up:

a) the footer is not behaving as it should. In the full width (Desktop style) it should be identical to the footer in http://pintotours(dot) net, but now the height has shrunk and all the text gone. Of course, I got rid of the text for the @media code, but it should not have affected the main code.

My other new problem, which I kept for last is the sidebar. To make things easier as I was learning how @media works I deleted it from the try.html. In the published version there is a line in the <head> , which I don’t know how to deal with.

<style type="text/css">@import url("/Pinto/menubar1.css");</style>

many thanks for your help

38

Hi Paul

I am very sorry but I must have done something drastically wrong since my last post, as #box9 has gone hay-wire! box9 was not coming down enough and i gave it a height to correct it and it looked good. Now I’ve taken it out but still something has gone wrong in th @media code

sorry…

39

Sorry Paul

I’ve recovered from my messing around and things are back in shape. I’m going to vackup these files before I do it again!

Main problem is the sidebar.

Thanks

40

What is the problem with the sidebar exactly? You didn’t say as you seemed to change the subject to talk about some imported css instead :).