Sorry Paul
I meant navbar and not sidebar!
When I started playing with the @media on this page I did not know how to deal with the sidebar, so I decide to delete it from the copy html and leave it until I got everything sorted out. The page try.html in the Desktop width must look identical to the published index page, which has a navigation bar.
Sorry…
Hi,
Fort the navigation on smaller pages you just want to remove the float from the list and let the width be auto.
e.g.
In the media query you would do something like this:
#navbar ul{height:auto;width:auto}
#navbar ul li, #navbar ul li a{display:block;float:none}
That will allow each item to spread full width on small screens so that they can easily be clicked. The usual approach is also to hide the nav on smaller devices but add the infamous “hamburger icon” so that the menu can be opened when required and then tucked out of the way when not needed. Of course this needs a little bit of js to accomplish the hide and show.
http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites
Hey qim,
There are three type of responsive
1 - phone portrait / Landscape
2 - Tablet
3 - desktop
after using this code in HTML file
<meta name=viewport content="width=device-width, initial-scale=0.5">
you will edit css file and insert these media query
For any Kind of Tablet
@media screen and (min-width:768px) and (max-width:1024px) {
Code Here
}
For any Kind of Phone Landscape
@media screen and (min-width:480px) and (max-width:768px) {
Code Here
}
For any Kind of Phone Portrait
@media screen and (min-width:320px) and (max-width:480px) {
Code Here
}
if you need more help then let SP member know
That’s a little bit too simplistic and not really related to the way this topic has evolved.
Thank you very much. Paul
I spent weeks trying to understand @media queries and now aftet this very instructive thread I feel as if I can sort many things out myself.
By the way, you may recall that the thread started with a puzzle regarding the Samsung mobile phone. In the last couple of days, when I had the max-width set to 500, the Samsunf did not respond. As sson as I icreased it to 550, it did. That is surprising because surely yh width of a Samsung Galaxy Mini is not more than 500!!!
I still have a couple of problems with the page we have been working on: the footer is still mixed up with the sea image, although I can solve it, hopefully, by simply deletinbg the image for the mobile version. And in the fuller Desktop width the Box9/sea image are short of the necessary height. I suppose I can playaround witht the main css without affecting the @media.
What I am rather stuck on, on ideas, is how to get the header, which at the moment only shows the clock to minimize it and get some text to appear also “Travel Advice”.
You have spent a lot of time with this and I am happy to end the thread here and thank you once again for your very kind help.
Regards
Hi Paul
Sorry to reopen the thread.
I’ve sorted out most things in the @media but I cannot understand what is happening with the footer. I used the same code for the bottom image and gave a height to the footer, but as I narrow the width the footer koves aup and down…
http://pintotours(dot)net/Pinto/try.html
Help…
Hi,
You are adding too much padding for the smaller footer image and you also need to remove the negative top margin from the footer/
e.g.
.img-container2{padding-top:22%}
footer{margin-top:0}
Great! Thanks
How do you decide on the percentage (in this case 22%)?
May I take the opportunity to ask what can be done to reduce in size the clock, so that some of the header text shows in smaller dimensions? I want the clock to remain this size in the large Desktop css.
Thanks again
It depends on the ratio of the image width to image height. The ratio commonly used for videos (where this technique came from) is usually 16 :9 which equates to 56.25% of padding being added. However if the ratio to image true width and image true height is different then the padding needs to be adjusted. To be honest we don’t really need this technique here as you could simply have set the image to width:100% and height auto and non positioned for a similar effect…
May I take the opportunity to ask what can be done to reduce in size the clock, so that some of the header text shows in smaller dimensions? I want the clock to remain this size in the large Desktop css.
As you are using an external resource then it is not under your control to restyle it.
I suppose you could go to the ‘time now’ site and make yourself another widget in a smaller size and then in the media query for the smaller display you hide the original widget code and show the new smaller widget code.
e.g.
Normal css:
#clock1{display:block}
#clock2{display:none}
Then in the media query:
#clock1{display:none}
#clock2{display:block}
many thanks, Paul
I’ll work on that !
Regards