I have a website http://xi-spain.com/. It is responsive too. But I have got some problems while putting a world map with country links in it. The map looks good at my computer resolution but when i re-size the browser, the links goes besides the country locations. I have put all the links by absolute positioning using percentage values but it is not working responsive properly. Do you have any idea to solve this?
I would look at reapproaching the way you're looking at executing this.
On smaller screens it doesn't make sense to have the map showing with a bunch of labels, the room just won't be there.
By default, from a mobile first perspective, I would list all of the country/locations in an alphabetical list. Then once the viewport is large enough to allow a world map with labels to appear then load in the map and position the labels. An example can be seen here http://www.imiplc.com/graduates
Related
I am working on my first full-page map screen. I am adding a couple custom controls on the map. One being a legend, the other a way to query our system and place pins on the map. I have been able to place the controls on map and it works well. I have one in the TOP_RIGHT and one in the TOP_LEFT. I would like to make this responsive now. I would like the legend to take up the entire bottom of the map, and the inquiry control to go to the top. I can't find anything on how to make this responsive. How do I go about accomplishing this? Online resources would be great.
Update: I realized I didn't make this clear. On PC/tablet, I want the legend in the upper right and on the phone, I want this to be all the way across. Similar to how this page works.
It's quite simple, set the width of the HTML-elements to 100%.
Be sure that these controls dont overlap with the default-controls.
Demo: http://jsfiddle.net/doktormolle/16r1777q/
There are lots of website themes that have a slideshow or image frame that is styled to look like it's a device such as a mobile screen or tablet screen or computer monitor. Please see below:
I have spent the last 4 hours looking for some code or an open source plugin that would enable me to show images this way. All I have found in 4 hours is yootheme and hostmoog that both charge for the plugin.
How does everyone else get these device style frames around images please? Do I need graphics software?
This question should help others too. I've spent ages searching under every conceivable combination.
Thanks in advance.
First, create your device "background". Then, divide the images into four pieces:
The part of the background that appears above the top of the screen image
The part that appears below the bottom of the screen image
The part that appears to the left of the image between the top and bottom
The part that appears to the right of the image between the top and bottom.
Then, create three <div>s. Place the top and bottom pieces in <div>s 1 and 3, and divide the 2nd into three smaller <div>s. Render the left and right pieces in the left and right sub-<div>, and finally, render your slideshow in the center piece.
I don't know if I understand your question perfectly, and I may be way off, but I'm going to try to answer it to it from what I think your asking. Responsive Design is what you're looking for. Displaying the page perfectly across all devices.
There is also a tool that I use to see my webpages in different resolutions, Resize my browser that lets me see how my page will look on different size browers, iphones, etc... If your code is correct this is a very useful site.
Hope I somewhat answered this question.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.
since 6 hours I'm trying to produce the following output on my different mobile devices:
As you can guess there are two different pictures: The background of a joystick and the joystick itself that should be draggable.
Whatever I try: It looks different on other devices or if I turn my device or something..
What I wish to achieve: The picture like you see it should have a width of 70%. That seems to work.. but I can't place my stick exactly into the middle.
I was trying with images, divisons with backgrounds, percentage-values, absolute and relative positions but now its time for me to ask some guys that could know how to do it.
I have tested to much code to post here but please give me any advices.