Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 05-03-2013, 08:25 AM
TarHeel's Avatar
TarHeel TarHeel is offline
Contributing Member
 
Join Date: 09-25-12
Location: California
Posts: 163
iTrader: 0 / 0%
Media Query CSS

Hello,

I am building a website for a restaurant using WordPress. I am also using a WP Restaurant menu plugin to build their menu online. It allows for 1 or 2 column layouts. The 2 column layout looks wonderful on the computer, however it looks very crowded when loaded on a phone. I'm looking to force the mobile version to change from 2 columns to 1 column, but am completely at a loss for where to start. If anyone can point me in the right direction, or give me any pointers, that would be much appreciated.

Thank you for your assistance.
 

Advertisement

Advertisement

  #2  
Old 05-04-2013, 02:17 PM
Frankie GTH Frankie GTH is offline
Junior Member
 
Join Date: 03-14-13
Posts: 18
iTrader: 0 / 0%
How about this tutorial: mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ ?
 
  #3  
Old 05-06-2013, 11:46 AM
smanaher's Avatar
smanaher smanaher is offline
v7n Mentor
 
Join Date: 03-04-13
Location: Oneonta, NY
Posts: 329
iTrader: 0 / 0%
Tarheel,

You would want to have some sort of JavaScript or PHP function that detects a user’s device and determines which page (i.e. mobile or non-mobile) to show to them first.

Here is a good post on detecting mobile users,

http://www.designyourway.net/blog/re...-mobile-users/

Hope that helps,

Shawn
 
  #4  
Old 05-06-2013, 07:41 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
There are some people who do not like being served a different version of a website when they use their mobile device. They find it confusing when they are use to the desktop version. Hence, the make stuff disappear or totally different approach can annoy visitors.

Of course there is also the maintenance problem (and possible duplicate content problem if you believe duplicate content by the same site is penalized) of running two versions of your site.

An easier way to deal with the whole desktop vs mobile issue to to make sure your original design is built using fluid/flexible/liquid design.
Quote:
Using a flexible design (also known as liquid design) accommodates a variety of browsers, screen resolutions, operating systems and monitors. As more and more people use phones and other mobile devices to surf the web the ability of your site to adjust to the visitor's device will become more and more important. There is nothing more annoying than visiting a site where the designer has used a fixed width design that doesn't fit the visitor's browser window. Just because monitors have gotten bigger on the home use front does not mean the user has their browser window maximized.
Flexible Design (Liquid Design)

Once you have that working down to around 640 or 600 pixels wide you can then use a special CSS file to do minor tweaks for those who have even smaller screens and not so smart mobile devices.

Goes in the head:
HTML Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" /> <!--[if IEMobile]> <link media="screen" rel="stylesheet" type="text/css" href="css/mobile.css" /> <![endif]-->
In the example above for devices up to 480px wide screen/device the special CSS file mobile.css is fetched and used.

So to answer the orginial question:
  1. Add the lines above to the head of your pages.
  2. Make a separate mobile CSS file and include minor style changes. These will override the original CSS if done properly.
  3. Set the width of the main content and navigation containers to 100%. Might need tweaking depending on the original CSS file.

Last edited by HTMLBasicTutor; 05-06-2013 at 10:04 PM.
 
Go Back   Webmaster Forum > Web Development > Coding Forum

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Hello Everyone and also a query mrb1129 V7N Forum Support 1 02-03-2013 08:54 PM
Sql Query itHighway Web Design Lobby 1 03-17-2008 12:09 PM
SQL Query Sketch Coding Forum 9 12-13-2006 12:26 PM
SQL Query Sketch Coding Forum 2 10-13-2004 03:48 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:54 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC