Adjusting for mobile

hi guys,
the problem i am having is when i scale down my site to about 330X460 the page looks a bit untidy and I want to change this but I don't know how.
As you can see the logo needs to be scaled down and the text on the nav bar needs to change. I want the 2 words 'Casa Nerja' to go to the next line, also the nav bar has to be bigger to allow for 2 lines.
I have setup a 'mobile' media design but a s I said I am not sure what code to change here.
all my code below is divided into 3 sections, source code, css stylesheet.css and mobile.css. the mobile.css is set to be used when it hits 800
source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Untitled Document</title>
<style type="text/css">
@import url("CSS/stylesheet.css");
</style>

<link href="CSS/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
</head>
<body>
<div id="logo"><strong><img src="images/logo.png" width="300" height="212" alt="Casa Nerja"></strong></div>
<nav>home search about us contact us links</nav>
<section>
<p><strong>Casa Nerja was created in created in 2005 under our former name Easy Casa, in 2014 we changed out name to Casa Nerja.</strong></p>
<p><strong><br>
    We are devoted to finding the right property for the right person in and around the Nerja area. This includes Torrox, Velez-Malaga, La Herradura and Almuñéca.</strong></p>
<p><strong><br>
    Due to or long and successful reign as an real estate buisness we boast one of Nerjas bigest databases of properties for up for sale including, Re-sales, New Builds, Off Plan, Reformations and Plots of land. We also specialize in short and long-term rentals and holday lets based on a weekly rental.</strong></p>
<p><strong><br>
    Searching for a property can be a laborious affair trudging from one estate agent to another, repeating the same answers to the same questions every time. Casa Nerja can take the pain out of searching for your new home whether a Villa, Townhouse, Apartment or Cortjo.</strong></p>
</section>
<header>
<h1>about <span class="casa">Casa Nerja</span></h1>
</header>
<p><strong><br>
</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1> </h1>
<p> </p>
</body>
</html>
stylesheet.css:
@font-face {
    font-family: 'CaviarDreams';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
        url('CaviarDreams-webfont.woff') format('woff'),
        url('CaviarDreams-webfont.ttf') format('truetype'),
        url('CaviarDreams-webfont.svg') format('svg');
body,td,th {
    color: #f7941d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
body {
    background-color: rgba(214,214,214,1);
    background-image: url(../images/about-background.jpg);
    background-attachment: fixed;
    background-size: cover;
a:link {
    color: #f7941d;
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #f7941d;
a:hover {
    text-decoration: underline;
    color: rgba(255,255,255,1);
a:active {
    text-decoration: none;
    color: #f7941d;
h1 {
    font-size: 36px;
    color: rgba(255,255,255,1);
    text-shadow: 5px 5px 10px rgba(0,0,0,.5);
.casa {
    font-family: CaviarDreams;
h2 {
    font-size: 24px;
    color: rgba(255,255,255,1);
#logo {
    position: absolute;
    left: 5%;
    top: 0px;
    width: 382px;
    height: 197px;
    z-index: 200;
nav {
    position: absolute;
    left: 5%;
    top: 190px;
    width: 90%;
    height: 31px;
    z-index: 01;
    background-color: #000000;
    text-align: right;
section {
    position: relative;
    top: 380px;
    width: 60%;
    z-index: 201;
    background-color: rgba(0,0,0,.8);
    padding: 5px;
    border-radius: 0px 30px 0px 30px;
    float: right;
    right: 5%;
header {
    position: absolute;
    left: 5%;
    top: 275px;
    width: 85%;
    height: 101px;
    z-index: 202;
    border-radius: 30px;
    background-color: rgba(0,0,0,.8);
    padding-left: 5%;
    padding-right: 0%;
mobile.css:
@charset "utf-8";
section {
    position: relative;
    top: 380px;
    width: 90%;
    z-index: 201;
    background-color: rgba(0,0,0,1);
    padding: 5px;
    border-radius: 0px 30px 0px 30px;
    float: none;
    right: 5%;
    left: 5%;
header {
    position: absolute;
    left: 5%;
    top: 275px;
    width: 85%;
    height: 101px;
    z-index: 202;
    border-radius: 30px;
    background-color: rgba(0,0,0,1);
    padding-left: 5%;
    padding-right: 0%;
Can you explain to me what needs changing and not just change it for me, I want to learn.
thanks
James

Instead of creating a separate CSS file for mobile, which I have to admit doing with my first mobile project a few years back, you can just use media queries and modify existing selectors for each of your breakpoints. A quick search on Google produced the following tutorials:
Introduction to media queries – Part 1: What are media queries? | Adobe Developer Connection
Introduction to media queries – Part 2: Building a responsive design | Adobe Developer Connection
I haven't gone through these to see if they contain any outdated methods, but David is an exceptionally reliable source.

Similar Messages

Redirect code to different css file for mobiles

i need some code that i can use to detect mobiles and then change to a css file for the page so it looks good on mobiles. ive been looking around and i can only find redirect codes to mobile versions on websites and i dont want that, i want to stay on the same page but just use a different css file. Thanks to anyone that can help me.

What you want are CSS Media Queries. They can be incorporated into your main CSS file like so. Feel free to adjust breakpoint values as required.
/* Special Styles for Mobiles. */
@media only screen and (max-width: 480px) {
    body { font-size: 75% }
/* Special Styles for Tablets */
@media only screen and (min-width: 481px) {
     body { font-size: 100%; }
/* Special Styles for Desktops */
@media only screen and (min-width: 1025px) {
     body { font-size: 135%; }
Nancy O.

Designing for Mobile Applications

I have a basic 6 page web site for our organization. Since many of our members now use their smart phones for web browsing I am thinking of adjusting my site to accomodate them. Since I have never designed for mobile applications I just wanted to get some professional feedback so I know the proper path to take. The site is a simple three-column layout with header and footer, primarily text with scattered graphics.
My first thought is to just redesign the site with a smaller overall size so it would be viewable in smaller devices, such as smart phones and IPods. Although it would require a total re-design change as far as layout and reduced use of graphics, it wouldn't take me long to create since the site is small to begin with.
My second option is to use a mobile template via jQuery. However, I have never used jQuery and am wondering if re-designing my site using jQuery would be the preferred route to go, or overkill due to the small size of my site.
I guess my question is this: At what point does it become preferable to use jQuery to design mobile web sites, as opposed to just re- creating a smaller physical version of my current web site? Or does using jQuery for mobile design the accepted common practice?
I'd appreciate anyone's professional opinion on the subject. Thanks.

Your application's main module structure can contain different sub-modules like common/base, BCC/versioning and other sub-modules. As you mentioned all of your common piece of server-side functionality, common components and repository definitions can go in the common/base sub-module within your main module structure. There can be one common-ui kind of a sub-module also which can hold common front-end stuff like JS, common CSS, images etc. Then there can be one sub-module for the actual customer facing application. These sub-modules can declare dependency on the common/base sub-module.
I would also go with having a single EAR for the customer facing app sub-module. Now within that EAR you can have different web-apps (WARs) with different context-roots as per your requirements. Having different web-apps will also allow you to bring in device specific changes to the application e.g. adding a device specific filters in case required.

Bandwidth adjustment for streaming video to server

I am trying to adjust for available bandwidth at a mobile device sending live video to a server. I am currently using the total upload bytes per second and the video loss rate as the parameters to detect when I need to change the camera parameters. I am using the video size and framerate to estimate the required bandwidth. (bandwidth = height * width * framerate / [encoding contant] )
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/NetStreamInfo .html
When the available upstream network capacity is low, I adjust the maximum video upload bandwidth and the framerate for the reduced capacity.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Camera.html
The problem I am having is that even after adjusting the camera parameters, the video loss rate can be very high ~0.6-0.7. This is even for values that seem to work normally if the camera is initially set with these values.
Can anyone explain why what causes the video loss rate to be high? I may need to use a different parameter to indicate when the camera parameters need to be changed.

CharlyV wrote:
...... Is that possible?
Welcome to the Apple Community.
Unfortunately not.

Creating a site for mobile devices

Good morning,
I have a number of questions relating to the creation of a
site for mobile devices. My client has given me the assignment to
re-design his current website, and to also create a sub-site
suitable for mobiles. I have spent a number of hours looking around
on the Internet and trying to gain a better understanding of these
issues. Still, a number of questions remain. if you can give me any
additional understanding, that would be great.
Question 1:
Is my understanding correct: I basically need to create two
sites, one for the wide-screen browser, and one for the mobile
browser? I can direct visitors to the mobile site using a CSS or
javascript link - if their browser identifies them as a mobile
browser?
Question 2
Mobile devices come in all sorts of shapes and sizes and
versions. PDA\s and iPhone's have different screensizes and
resolutions that smart--phones, which in turn are different again
from older and simpler phones. Should I design a site for a number
of different types of phones? That would a huge amount of work...
Question 3
I also own Device Central, an App which I should think is
very useful in this situation. But I fail to understand it! OK, so
I can see what my photo or website or flash file looks like on my
Nokia N73 - but I am not designing specifically for that phone. I
also want my design to look good on all the other phones! My client
needs a website that is not tailored to one phone, but to all
phones.
Question 4
And why does Device Central not have profiles for the iPhone?
I would think it is popular enough to warrant its own profile... (I
post this from the Netherlands, where the iPhone is not carried
yet, and so I have only ever held one in my hand). Is this because
the iphone can see regular sites just fine?
Question 5
How does Dreamweaver help me build a mobile site?
Question 6
My client wants to show video on his website. In fact, that's
what this website is all about: showing sports-videos from high
profile sporting events. Which video-formats are most suitable?
Question 7
Do all mobile phones support flash? Or only a few? Or none?
It seems to me that a flash website would allow for more creativity
in the design.
Thanks for any help you can give. Any resources you could
point me to are also very welcome...
Sincerely,
Rogier Bos
Rotterdam, The Netherlands

Macnimation wrote:
> Hi,
>
> I'm experimenting with creating a small site off a
standard site, for mobile
> phone/devices.
>
> Basically, I want to load a basic list page, which has
links to pages that
> will display and run flash movies.
>
> The flash movies, in FLV format are already at 640 x 480
which run fine in the
> main site.
>
> Is it simply to resize the movies to fit the mobile
content size , or will
> they "auto" resize?
>
> Do I have to chnage the webserver configuration in
anyway, its a standard IIS
> site at the moment, but MySQL with apache is also an
option.
>
> Would standard html do or would the pages have to be
done using xhtml or wml?
>
> I would like if possible to get this infomration first
before starting it, so
> I can possibly reduce delays.
>
> Any help or pointers to tutorials would be grateful
>
I'd like to check out the PDA scene some day soon, too. In
the meantime,
there's a recent discussion of this topic here:
http://www.sitepoint.com/forums/showthread.php?p=3288343#post3288343
www.geobop.org - Family Websites
www.invisible-republic.org - Adult political websites (Mature
adults only)

How to Configure the Buttons on the QAF for Mobile UI Screens...

Hi Experts,
I am in a serious need of help from the experts who already designed the Mobile UI screens.
I have built a add-on where now we are looking this add-on to be available to use in mobile applications also. Now here what I did is I have developed OWL and QA floor plans which will be used for Mobile Only. This option of selecting only for mobile is available to us while we are creating screens. In this way I have designed the screens and attached them to the work center views.
These views are attached to the work center floor plan and this is been assigned to my user. When I tried of viewing the designed screens using my android mobile I am able to see the screens owl and Qaf as of designed, but now the problem is existing here.
When I am trying to perform one of the custom action which i have configured on the QAF floor plan the button which is configured with this custom actions is not visible at all. Not only this the standard action button on the tool bar of the Qaf like "Save" "Close" those are also not visible. I am not at all seeing any of the button on my QAF screens. With out these button I cannot go further to complete my process and complete transaction will not be done untill unless some of the custom actions which were configured on the screen. These custom actions are the action which I have declared in the custom Bo and developed with some code over there with the help of ABSL script.
I have followed the SAP 1402 documentation but there it is not clear how to do it. I have done every step of the document but no use with it. Please needed any other real time expertise help who worked already on this mobile screens.
Regards..
Hanu K

Sorry but your posting is pretty confused for me.
At first you wrote:
>I can use Play/Pause, Stop, Forward and Back in Winamp
Later you wrote:
>and WINAMP to the MEDIA BUTTON
What now? Can you use media buttons with Winamp or not. As far as I know something like this is not possible because Toshiba has designed tool that controls WMP only

Text-input component with auto-complete functionality for mobile

Hey guys,
I wonder if there is a text-input component with auto-complete functionality optimized for mobile development with AIR like the one that Android provides natively as you can see here http://developer.android.com/reference/android/widget/AutoCompleteTextView.html and here http://developer.android.com/resources/tutorials/views/hello-autocomplete.html.
At least I didn't find it in the latest SDK and I think such a component is pretty standard nowadays. Or did I simply overlook it?
Thank you guys for any advice.
Regards,
Thilo

Hi relaxtraja,
thanks for your reply!
I knew that there are a lot of auto-complete scripts on the web. What I was hoping was, that Adobe provides an officially supported auto-complete component optimized for mobile as part of the SDK (like in the Android SDK as I pointed out), but that doesn't seem to be the case. It's sad, because it's an essential part of modern UIs in mobile applications.
I've already created an auto-complete component by myself based on Spark components and I will end up using it. But I will have to optimize it for mobile applications beforehands. I just think something this essential should be provided by the SDK.
However, thanks for posting!
Regards,
Thilo

HT4597 My password works for mobil me but not my mail account.

I have had a mac account for years. For some reason it is not accepting my password. It is the same password for Mobil Me. My mobil Me works, my iPhone mail works but all of a sudden my mail on my MacBook Pro does not work. Please help.

On your phone: Settings>Store...tap the Apple ID shown, sign out, then sign back in with the ID you want to use.

PDF or HTML for mobile Technical Documentation and Newsletters

Hi,
I've been reviewing the pros and cons for PDF and HTML for mobile technical documentation and newsletters and wanted to get your honest thoughts on this.
Here's the scenario:
I need to create mobile technical documenation and newsletters that are interactive, i.e. video, commenting/annotating, links, forms, etc.
Given how the mobile publishing market is rapidly evolving, what is the most practical format, (with minimum format issues) to use for both short term and long term? PDF or HTML? Why?
Based on your choice, which format would you use for non-interactive documents that offers the most creative options and usability? Why?
Paul

Hyper Text Markup Language ( HTML ) is going to work better. Mainly because the way mobile is setup, the interface has to conform to the device and with the other elements coded into the interface, HTML is far better. You keep referring to usability, so even in non-interactive scenarios in mobile documentation, you're better off using HTML.

Not able to access content for Mobile course

Hi Team,
I am trying to access content available for open SAP course for mobile Course: Introduction to Mobile Solution Development for the Enterprise
But once i click on a Video link, it directs me to this below page. Also not able to view any PDF.
Obviously, not even able to download.
Not sure if this is the right place to raise this question. So mentioning SCN Support
Regards,
JK
PS: I was able to view and download the contents before 12 hours.

Hi Jitendra,
The hosting server for pdf's is not working at the moment and the server technical team is currently working on the issue.
You can still stream the videos but this might not be suitable for you at this time.
Apologies for any inconvenience caused. The technical team have advised us that this issue will be resolved shortly so please check back later.
Kind regards,
Claire

How can I specify a different css file for mobile browsers?

I'm experimenting with updating our website to be "mobile friendly". I could use some help.
We use a lot of static HTML landing pages for things like links from email ads, etc. What I'm trying to do is have 1 landing page so the content/html page is always the same, but the page will detect what browser/device you are using and then load a different css file depending on what it is. But, we don't want to have to load the style info from the PC version if you're not on a PC.
What I'm doing now is specifying the media type in the css link, like this..
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css">
What's happening is it's loading the main stylesheet first, and then the 2nd one changes some styles if you're on a device with a max width of 480 pixels (like an iPhone). But since it's loading the PC styles first, it's making some things look screwy.
So, is there a way to say "If you're on a PC, load this stylesheet. If you're on an iPhone, load this one instead." .. without javascript? I don't trust javascript too much on mobile devices. I feel like this some simple little thing that I'm missing that will make it all automagically work.
We don't want to have different content depending on the browser, just different stylesheets. Can anyone help?

Hi
Would it be better to do 2 different stylesheets, or just one big one and add a section at the bottom like:
@media only screen and (max-device-width: 480px) { .styles {whatever: styles;} }
2 separate style sheets are recommended. The reason for this is that the Safari mobile browser, (as used in iPhone etc) will download any/all images specified in a style sheet even if they are not used or specified in a media-query rule, this is a know bug with that browser.
I'm also having a new issue where the style "clear: both;" doesn't seem
to be working right. I set up my top horizontal menu using float: left,
and there's a lot of links so on the smaller screen it wraps, which is
fine but now the wrapped links are floating over the page content...
This is one of the reasons that floats should not be used in style sheets for mobile devices, the only exception I know of is for small typographical feature such as 'pull-quotes', (and never use float: right;). It is also recommended to include a menu at the bottom of the page, (or at least a link back to the top).
It works, if I have the iPhone as portrait it looks great, but if I turn
it to landscape, everything is zoomed in. But if I switch back to
portrait, everything is the right size. Is there any kind of way to get
the landscape to have the normal zoom level? I know I can do
"initial-scale=1.0", but that is just for when the page loads, not if
you change it afterwards...
I have heard of only one recommendation to fix this and that is a page refresh on resize, but due to bandwidth limits now being implemented by many providers it is probably not a good idea, you could try setting -
maximum-scale = 1.0
as well.
PZ

One Folio for mobile and web

A client wants to use one publication (a magazine) for mobile devices (iOS, Android, Windows Store) and the web. The latter should also be usable on non-touch devices. The current solution for viewing the publication in the browser (desktop) is based on a pdf and flash.
Is using Adobe DPS/Folio a viable solution to this problem? What is your experience with embedding Adobe Folio publications within websites? Is this possible with the Professional Edition? As the magazine is free: Do the downloads/views deduct from my 5,000 included downloads?

You can enable social sharing to display content in the "web viewer" so that it can be viewed on non-touch computers.
http://helpx.adobe.com/digital-publishing-suite/help/using-social-sharing.html
You can embed this web viewer content within your website by specifying a Hosting URL. It's possible with a Professional or Enterprise DPS subscription.
Whether this is a viable solution depends on your content and your needs. Look at different web viewer examples or build a test app if you already have a Pro account.
Yes, the downloads/views of web viewer content counts against your fulfillment download bundles.

How to rotate a text in the adobe reader for mobile ios ?

how to rotate a text in the adobe reader for mobile ios ?

There's no rotate command to rotate the document. Instead, rotate the iPad. If it doesn't rotate, turn off the Rotation Lock switch on the side of your iPad.

Where can I find a good tutorial for mobile game developement with J2ME ?

Hi All,
I'm completely new to J2ME programming. But I have past experience on J2SE developement. Now I would like to know that where can I find a good tutorial for mobile game developement with J2ME ?
I'll be very greatful if I can find a useful step-by-step tutorial (eg. "The Java Tutorial" for J2SE)
Please point me ot the direction.
Thanks
ZuriJAckshoT

ibook-widgets.com have a free tutorial book in the iBooks store. Search for "Create your first interactive book using iBooks Author" they also sell widgets.
I dont have any connection - I found their eBook in the store long ago and used it to learn more about iBA.
The best advice though, is be patient, go back over the process step by step, I cannot access the Help files for some reason.. but i am sure its in their.

I would like to see sliding menu widgets for mobile devices.

I would like to see sliding menu widgets for mobile devices.

You can tell Apple at the link below.
http://www.apple.com/feedback/iphone.html

Adjusting for mobile

Similar Messages

Maybe you are looking for