CSS table override for mobile?

Hi folks,
I don't control the search results in this BC site. It lays out the images in a table.
Is there any way to collapse tables , rows and cells in CSS to make a table just display items one on top of another?
http://joden.businesscatalyst.com/catalog-search
This problem is only visible in mobile, which is using a different template.

Thanks Alex. The problem is only visible in phone views, but looks fine on larger monitors. While I have phone layouts in templates, I can't change either catalogs or search results only for the modules unless I create entirely separate pages.... so I'm looking for a CSS solution I think to modify only the phone layout. What is odd is that on the home page, e.g., the new items layout automatically drops images into a single column...

Similar Messages

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

WLC Applying cached RADIUS Override values for mobile

Hello!
We have a WiSM2 (version 7.4.110.0) with approx 200 APs. We are doing RADIUS authentication via a PacketFence backend. Everything usually works fine, but we are having an intermittent issue...
The WiSM2 gets its VLAN assignment for a client from the PacketFence server and does AAA override. If a client has not registered their device, go on one VLAN. Once they register, PacketFence disconnects them via RADIUS to the WiSM2, and then they should get their new VLAN assignment. This works fine in the majority of cases, but occasionally, after registering, the client disconnects and reconnects but is still put back on registration VLAN.
debug client mac shows this in the logs:
Applying cached RADIUS Override values for mobile 00:25:56:3d:f6:7b (caller pem_api.c:2210)
And I do not see the WiSM2 asking the PacketFence server for a VLAN assignment in the PacketFence logs.
Eventually, if the client stays disconnected long enough (5+ minutes), they can reconnect and get the proper VLAN assignment. I had previously opened a TAC about this, and they suggested a WiSM2 software upgrade and setting the Session Timeout on the WLAN to 900 seconds, which I did. This issue then disappeared for several weeks, but it has started happening again today (we saw it happen to about 15 clients throughout the day).
Anyone have any ideas on why this is happening, and how to stop the caching? Any thoughts would be greatly appreciated.
Here is the output from a show wlan of one of our WLANs we have seen this on:
WLAN Identifier.................................. 2
Profile Name..................................... BlitzNet
Network Name (SSID).............................. BlitzNet
Status........................................... Enabled
MAC Filtering.................................... Enabled
Broadcast SSID................................... Enabled
AAA Policy Override.............................. Enabled
Network Admission Control
Client Profiling Status ....................... Disabled
   DHCP ......................................... Disabled
   HTTP ......................................... Disabled
Radius-NAC State............................... Disabled
SNMP-NAC State................................. Disabled
Quarantine VLAN................................ 0
Maximum number of Associated Clients............. 0
Maximum number of Clients per AP Radio........... 200
Number of Active Clients......................... 538
Exclusionlist Timeout............................ 60 seconds
Session Timeout.................................. 900 seconds
User Idle Timeout................................ 300 seconds
User Idle Threshold.............................. 0 Bytes
NAS-identifier................................... WISM2_SDC
CHD per WLAN..................................... Enabled
Webauth DHCP exclusion........................... Disabled
Interface........................................ blitznet
Multicast Interface.............................. Not Configured
WLAN IPv4 ACL.................................... unconfigured
WLAN IPv6 ACL.................................... unconfigured
mDNS Status...................................... Disabled
mDNS Profile Name................................ unconfigured
DHCP Server...................................... Default
DHCP Address Assignment Required................. Disabled
Static IP client tunneling....................... Disabled
PMIPv6 Mobility Type............................. none
Quality of Service............................... Silver
Per-SSID Rate Limits............................. Upstream          Downstream
Average Data Rate................................   0                      0
Average Realtime Data Rate.......................   0                      0
Burst Data Rate..................................   0                      0
Burst Realtime Data Rate.........................   0                      0
Per-Client Rate Limits........................... Upstream          Downstream
Average Data Rate................................   0                      0
Average Realtime Data Rate.......................   0                      0
Burst Data Rate..................................   0                      0
Burst Realtime Data Rate.........................   0                      0
Scan Defer Priority.............................. 4,5,6
Scan Defer Time.................................. 100 milliseconds
WMM.............................................. Allowed
WMM UAPSD Compliant Client Support............... Disabled
Media Stream Multicast-direct.................... Disabled
CCX - AironetIe Support.......................... Enabled
CCX - Gratuitous ProbeResponse (GPR)............. Disabled
CCX - Diagnostics Channel Capability............. Disabled
Dot11-Phone Mode (7920).......................... Disabled
Wired Protocol................................... None
Passive Client Feature........................... Disabled
Peer-to-Peer Blocking Action..................... Drop
Radio Policy..................................... All
DTIM period for 802.11a radio.................... 1
DTIM period for 802.11b radio.................... 1
Radius Servers
   Authentication................................ ipofradiusserver 1812
   Accounting.................................... Global Servers
      Interim Update............................. Disabled
   Dynamic Interface............................. Disabled
   Dynamic Interface Priority.................... wlan
Local EAP Authentication......................... Disabled
Security
   802.11 Authentication:........................ Open System
   FT Support.................................... Disabled
   Static WEP Keys............................... Disabled
   802.1X........................................ Disabled
   Wi-Fi Protected Access (WPA/WPA2)............. Disabled
   WAPI.......................................... Disabled
   Wi-Fi Direct policy configured................ Disabled
   EAP-Passthrough............................... Disabled
   CKIP ......................................... Disabled
   Web Based Authentication...................... Disabled
   Web-Passthrough............................... Disabled
   Conditional Web Redirect...................... Disabled
   Splash-Page Web Redirect...................... Disabled
   Auto Anchor................................... Disabled
   FlexConnect Local Switching................... Disabled
   flexconnect Central Dhcp Flag................. Disabled
   flexconnect nat-pat Flag...................... Disabled
   flexconnect Dns Override Flag................. Disabled
   FlexConnect Vlan based Central Switching ..... Disabled
   FlexConnect Local Authentication.............. Disabled
   FlexConnect Learn IP Address.................. Disabled
   Client MFP.................................... Optional but inactive (WPA2 not configured)
   PMF........................................... Disabled
   PMF Association Comeback Time................. 1
   PMF SA Query RetryTimeout..................... 200
   Tkip MIC Countermeasure Hold-down Timer....... 60
AVC Visibilty.................................... Disabled
AVC Profile Name................................. None
Flow Monitor Name................................ None
Call Snooping.................................... Disabled
Roamed Call Re-Anchor Policy..................... Disabled
SIP CAC Fail Send-486-Busy Policy................ Enabled
SIP CAC Fail Send Dis-Association Policy......... Disabled
KTS based CAC Policy............................. Disabled
Assisted Roaming Prediction Optimization......... Disabled
802.11k Neighbor List............................ Disabled
802.11k Neighbor List Dual Band.................. Disabled
Band Select...................................... Disabled
Load Balancing................................... Disabled
Multicast Buffer................................. Disabled
Mobility Anchor List
WLAN ID     IP Address            Status
802.11u........................................ Disabled
MSAP Services.................................. Disabled

There is nothing in the RADIUS server logs. It is as if the WiSM2 does not talk to it for the 2nd request. The flow for a problem client is like this:
1. New client associates
2. WiSM asks RADIUS server for VLAN
3. RADIUS Server hasn't seen it, so it puts it on VLAN 84 (our registration VLAN)
4. Client goes through captive portal
5. RADIUS server sends disconnect client message to WiSM
6. Client disconnects, reconnects
7. WiSM2 puts it back on VLAN 84, when it should put it on a VLAN determined by the SSID. The WiSM2 never asks the RADIUS server for the VLAN again, until the client has stayed disconnected for 5+ minutes, and I see the message in the wism2 log that I wrote above.
In the vast majority of cases, step 7 works properly. That is, when the client reconnects, it asks the RADIUS server what VLAN to put it on (I see it in the RADIUS server logs). I see the second request come in, and the RADIUS server replies with appropriate VLAN for the SSID.
After they get their proper VLAN, this doesn't occur again. It is as if the RADIUS server caches the client's VLAN override attribute somewhere and uses that, rather than asking the RADIUS server.

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.

JavaFX Table for mobile..

Hello All,
I would like to display product details in a Table in Mobile. I think, presently JavaFX is supporting Table in Mobile. Am I Correct?.
1. Is it possible to display Product details in Table format in Mobile?
2. Is there any another way to display table in Mobile?
Thanks in advance.

Hi wisconsin,
During the conference of JavaFX 2.0 . Some of the Oracle member staff of JavaFX have given demo of JavaFX running inside I Pad, Android phones. The deal of oracle with Apple is still in progress. So currently I don't think there is any fixed decision of running Javafx inside all mobile phones. But as per the javafx roadmap the JavaFX is intended to be mostly for Tablet Device than phones. 'Multi-touch', 'Accelerator' and many other features are on the pending for developing of JavaFX still .
Thanks.
Narayan

E-commerce for Mobile Interface

Hi
This is my first attempt at have an existing shopping cart at BC to offer its customers the ability to view and order through their mobile phone. I have been doing regular, non-commerce pages for quite some time now. But when I apply the support for MOBILE and redirect everything to the /mobile folder, I can't find the means to over-ride the click-through to the standard pages of the shop.
Here is the site's store home page with the catalog list on it
http://www.copenhagenpastry.com/our-pastries
Here a page in the mobile folder with the same file name, but nothing happens
http://www.copenhagenpastry.com/mobile/our-pastries
I thought that was all I had to do along with setting a new set of styles for the mobile device. How does one override the Modulestylesheet.css?
Please advise and many thanks in advance!
Teejay

In my opinion the mobile/tablet redirect option isn't the best option for you if you use a lot of built-in modules that have their own URLs like the shop. You have to have every page that is on your regular site have a version in the /mobile/ folder and that's not possible with the eCommerce module. There's no way to setup an alternate layout for your shop. You can create unlimited module templates for {module_catalog} and {module_shop} (http://helpx.adobe.com/business-catalyst/partner/using-custom-templates-modules.html) in which case you'd have to build separate pages for your shop manually and not rely on the default shop view which is controlled by your overall shop layout.
And, even then, you cannot have multiple product detail layouts-- you can only use one.
I think your best bet is to make your site responsive so that you can use the same layouts but they flex based on media queries in CSS if you are going to be using a lot of BC's modules. The mobile/tablet redirection script works great for sites that are just static HTML with maybe some incontext editing, etc. but not advised for eCommerce functionality.

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

HTML for Mobile

Hey Gang,
I've seen a few retialers adding links to their HTML email
promotions saying
"To view this on your PDA click here"
Which basically takes them to an HTML page designed and
developed to fit in
a PDS screen.
Using device central (great tool in CS3), I can get a sense
of some of the
common mobile screen resolutions and differnces between PDA's
and flip
phones ect.
My question is, (I looked but couldn't find), are there any
good online
resources for mobile HTML best practices for development?
From what I understand, most devices use a version of Opera.
BUt are there
restrictions such as "Can't use certian CSS tags", "or can't
use background
images", "can't nest tables".
Thanks
-Dave

.oO(Dave Bar)
>My question is, (I looked but couldn't find), are there
any good online
>resources for mobile HTML best practices for development?
>From what I understand, most devices use a version of
Opera. BUt are there
>restrictions such as "Can't use certian CSS tags", "or
can't use background
>images", "can't nest tables".
You could start with a simple test. Get Opera, open a website
and press
shift+F11 to switch to small screen rendering mode ...
Micha

Does CS5 have tools for creating websites for mobile devices?

Does DW CS5 have any built in tools for creating web pages for mobile devices, iPads, iPhones, etc?
Thanks.

This will go back to your other post about the CSS tables, it depends on how much you know. CSS3 is a style language and while support is growing in Dreamweaver and within browsers it is taking some time so the more you understand the code the better off you will be. With regards to HTML5 animations, you will find that no tool out there can do this easily outside of some Apple developer tools and if you are serious about programming to work with the iPhone/iPad you will want to sign up (registration is free) and download their developer tools. Adobe has mentioned making some strides and trying to use their existing tools (ie: Flash) to help transition to HTML5 animations from Flash and Illustrator has also gained some HTML5 vector tools to help out.
To find out more about what Adobe is doing for HTML5 there was a post made on John Nack's blog not too long ago that you might want to read over (and follow the links).
http://blogs.adobe.com/jnack/2010/11/so-what-has-adobe-actually-done-for-html5-lately.html
Dreamweaver is not going to hand you everything though. To get the most out of it you have to put something into it. It is easily the most advanced tool in the PHP and ColdFusion realms (ASP/.NET goes to Visual Studio). But in order to do more and customize things to your needs, understanding the code is a must in the world of web design.

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)

Creation of a database engine for mobile devices using j2me

am trying to develop a database engine for mobile devices.. it is to develop a miniature version of the DBMS that
can be deployed on a mobile phone..I have to develop my own code for performing tasks such a s creating a table,
inserting values into it, selecting from it etc..
I limited my self to develop the software so that it can perform 3 functionalities of create, insert,select..
I should be taking the details such as table name and its parameters from the user and then should be able to
create a suitable data structure for it(i tried to develop a class)...
Usage of RMS package helps me partially in this.. I did that and ll be doing that..
I got stuck while developing the code for creation of a table.. I am facing problems in creating a dynamic data
structure for a table and also to use such data structure else where in my project..
I need help in developing an algorithm for this..
I would be very grateful to u all if u help me out in developing the code for this project..

I'm sorry for the amount of time it took me to get back. Derby is an open source database written entirely in Java. I do not know if it can support resource constrained devices like MIDP compliant, but may work okay with CLDC.
But outside of Derby being a solution, let me give you a few ideas off the top of my head.
Set up a database server in a separate thread. This server will really be your controller for RMS access.
Since RMS is just a big sequential 'pipe' you will have to think of data as 'frames' - (starttable) (tableID) (tablename) (data) (tablename) (data).....(endtable).
When you need to write additional data, just append it to the end of the RMS object.
When you need to retrieve data, thing are more complex.
1. Read in all data, looking for your particular tableID. This may be made much easier using RMS filters - (I'm not sure, I've never used them)
2. Once start of table of interest is found, stick the data elements in either a java vector or array until you reach the table end identifier. I think vector will be a better choice - trust me. (I think its available in J2ME...)
3. Package this into a do while loop until the element you are searching for is read. If you need to do some sorts on the data or something else that requires the all the data to be present then you need all the data for that particular table. One thing will always be clear. The first data you grab will always be some start table identifier and the last data you grab will be an end table identifier. We just don't know which table because of how we put stuff in the RMS resource.
This provides you a few positives as well as negatives:
Positive:
1. Fast data writes, no need to search for a particular table before accessing it, nor do you need to search for an index in that table.
2. When looking for data, data may* be found without searching through the entire table. This is accomplished with RMS filters or logic test within the RMS read loop.
Negative:
1. Slow when all data of a table is needed (i.e. compute sums or averages of entries). The entire RMS database must be read to ensure all the entries are searched. An example of how this is a problem is as follows: You have 5000 entries in you RMS database resource and you are looking to compute the average of a value in some table. When you first wrote the data to the table, it was done sequentially and no other data for that table exist. But we can't tell if that's the case, so we have to read through all 5000 entries to make sure we looked for every piece of data.
Beacuse of this issue, this database structure, performance may be fine for 50K - 100K entries (depending on table element size), if the reading requirements don't force full data reads. Otherwise, 25K may be an upper limit.
I hope this helps.
Edited by: estarkey on Mar 17, 2009 9:15 PM
Edited by: estarkey on Mar 17, 2009 10:01 PM

"Error [10151] The LCP Port on CCM Admin for Mobile Agent is not Configured or misconfigured"

We are running into a problem which we have noticed on UCCE 8.5 and havent seen on earlier 7.5 release.
If we setup a CTI port as agent device target and if we try to login the agent using Cisco Desktop (Not CAD, just CTI OS Client) then we get following error:
"Error [10151] The LCP Port on CCM Admin for Mobile Agent is not Configured or misconfigured"
But this wasnt the issue with 7.5 and we were able to do agent login with CTI Port as device target. We dont intend to use Mobile Agent feature but just login UCCE agent to CTI port as the device.
Do we know if this is a known issue or if something has changed between 7.x and 8.x release which could be is causing this?

So you can ping and nslookup from your ms to these agents and vice versa right? I wouldn't do a manual install, I would push the agent from the management server. You can uninstall the agent manually, or use cleanmom to get rid of them. Then
do an install from the console. When you initiate the install from the console (management server), should it run into any issues it will dump out an error which will give you an idea of where the problem may be.
From Holmans post on this:
e MOM Server could not execute WMI Query "Select * from Win32_OperatingSystem" on
computer “servername.domain.com”
Operation: Agent Install
Install account: DOMAIN\account
Error Code: 800706BA
Error Description: The RPC server is unavailable.
The MOM Server could not execute WMI Query "(null)” on
computer “servername.domain.com”
Operation: Agent Install
Install account: DOMAIN\account
Error Code: 800706BA
Error Description: The RPC server is unavailable.
8004100A
800706BA
1. Ensure agent push account has local admin rights
2. Firewall is blocking NetBIOS access. If Windows 2008 firewall is enabled, ensure “Remote Administration (RPC)” rule is enabled/allowed. We need port 135 (RPC) and the DCOM port range opened for console push through a firewall.
3. Inspect WMI service, health, and rebuild repository if necessary
4. Firewall is blocking ICMP (Live OneCare)
5. DNS incorrect
http://blogs.technet.com/b/kevinholman/archive/2009/01/27/console-based-agent-deployment-troubleshooting-table.aspx
Regards, Blake Email: mengotto<at>hotmail.com Blog: http://discussitnow.wordpress.com/ If my response was helpful, please mark it as so, if it answered your question, then please also mark it accordingly. Thank you.

Photo Gallery for mobile devices

I am updating my web pages with HTML5 + CSS3 mainly with Dreamweaver.
I would need advice how to create photo gallery for mobile devices, please.

If you are using a Studio VII product, you get excellent tech support with them. Just send them a message via email. I had an issue with mobile devices and Studio VII's Slide Show Magic. They create a slide show that has a drop-down navigation system that one may move in all browsers except mobile browsers. So, if you are on a mobile device, the navigation (small icons of the pictures in the slide show) will be in the way of the slide show if you activate the menu.
I had a back-and-forth with Al Sparber where I requested help. He very quickly identified the problem and told me exactly what to change in the CSS for the drop-down navigation system. Boom! Done. As a result, I highly recommend his tools. They solve problems and, if there is a problem with the solution, he's there to solve any issues that arise. If you buy something from him, you get him to address any issues you have.
So, in my experience, you're safe in buying their products. They host very good tutorials for their products on their website and they'll hand-hold you for anything you throw at them and help you to manage stuff.
-Mark

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.

How can i load a specific CSS style sheet for Safari?

Okay, So I have some structure issues when viewing my website on Safari compared to Firefox. Is there a way to put a code in the <head> tag to load a specific CSS style sheet for Safari like you can do with IE?
Thanks.

I took a screenshot of your page from Firefox (shown below). I assume you're seeing the same problem in Safari. If you increase text size one click, the keyboard image drops below the #contact division.
1) Height is a restiction in all browsers except IE. Avoid using height values on containers with text in them. If needed to show a background image, use the min-height property.
2) Fix your code errors. Some browsers are very sensitive to errors.
3) Your #content lacks cohesion. You need 3 columns, each with a width in pixels. Or simply use a 3-column table.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS table override for mobile?

Similar Messages

Maybe you are looking for