5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Standard site on mobile device - please help

by Guy G.
4 replies
  • WEB DESIGN
    • |
Hi everyone,

I'm having trouble with this site and how it loads on an iphone and an ipad.

Index

The borders are non existent - anyone know how I can fix it?

Also, there are two products on the following page that don't line up properly. The first word of each description appear at the right side of the image near the top and the image itself is pushed down. These are the two products that aren't lining up on this product page:
Index

1. Single Mounting
Bracket for Jumbo
Filter Housings
with Screws

2. Melt Blown
Polypropylene
Cartridges

Is there a quick fix before we take the step to create a mobile site?

Any help is greatly appreciated.

Thanks,

Guy
P.S. the site is built in php using wordpres cms
#device #mobile #site #standard
  • Profile picture of the author Enfusia
    2 things.
    1. It doesn't fit the screen now on my desktop. You may wish to start by fixing that.

    2. This won't load properly because it cant. It does not appear that tweaking will help because the fundamentals are wrong.

    You can build a mobile site for it in 1-3 hours depending on many factors so why not just do that.

    Patrick
    Signature
    Free eBook =>
    The Secret To Success In Any Business
    Yes, Any Business!
    {{ DiscussionBoard.errors[6585793].message }}
    • Profile picture of the author Guy G.
      Hey Patrick, thanks for your comments.

      1. It's loading fine on my desktop... what's your screen resolution? What os are you using...this will help me figure things out.

      2. I've never built a mobile site... how is that done?

      Guy
      Signature

      Business Relations and Marketing Manager
      Angulus Marketing

      http://www.angulusmarketing.com

      {{ DiscussionBoard.errors[6585962].message }}
  • Profile picture of the author FizixRichard
    It's not been created perfectly, but it works here and fits on my screen, which is pretty high resolution mind. Is it a wp template you purchased/downloaded or is it self made?


    Firstly To create a mobile site you need to detect the device type and load a separate stylesheet or even a whole UI for the mobile version.

    You can do this using media query to load a stylesheet based on the users device, which is a nice, simple approach.

    Code:
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile_style.css" />
    So you can use min and max width (with a value) to load different stylesheets, so you can have two totally separate stylesheets for different devices. So if you wanted you could have one for iPhone and similar smartphones, one for tablets, one for desktops and one for other devices if that was important to you.


    Onto your questions:

    1. Borders being non-existent:
    Elaborate, I'm not sure where you mean, which borders?

    I notice on iPhone its left aligned as opposed to centered.
    If that's what you mean, just check that you have margin-left: auto; and margin-right: auto; set on the wrapper class and that you're floating is correct.


    2. The product descriptions
    Not getting that, but am getting your products lead to a contact page which isn't great.


    I know you haven't asked for a review, but if you want some honest advice. I'd really look at the design of the site as it looks very antiquated; and make your products lead to a description page; not a contact form. People would expect information when they click them.
    {{ DiscussionBoard.errors[6588922].message }}
  • Profile picture of the author crissie
    On my iPhone, your left border needs a little padding. Agree with FizixRichard, turn margins to auto.

    Works perfectly fine on my desktop. I notice it opens centered on the desktop but left-aligned on the iPhone.

    You need to check on the padding of your product texts. For example, product description "Single Mounting Brackets for Standard Filter Housings & Screens" aligns to far to the right.

    If you add a little color to your logo, the whole page will come to life, because the rest looks great. Colours are great. Fonts are well selected. layout is fine.

    hope i've helped a little.
    Signature
    {{ DiscussionBoard.errors[6589018].message }}

Trending Topics