Jump to content

Search the Community

Showing results for tags 'mobile'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL




Found 40 results

  1. Hi all Probably a post that is rather popular and futile, but I'm start out freelance web designer and I'm creating my first large static website and I have come up with a few issues surrounding making the website responsive on different devices. From the start, I have created 7 different stylesheets. One, a generic style.css file, then 6 sheets that are designed purely for the different device sizes. I've then in the <head> section set the limitations to each sheet (e.g. <link rel="stylesheet" media="(min-device-width: 377px) and (max-width: 480px)" href="css/style-xsmall.css" />). 1. This has worked, to varying levels of success, however, I'd like to get people opinions on whether this is best practice as I'd really like to understand and get the fundementals right from the start. I have thought about having one stylesheet with the @media sizes bit but that one stylesheet becomes unbearably long. 2. Furthermore, I've hit a snag. On one of the stylesheets I have hidden an element (using display: none;) as the text doesnt work well on a specific device size, this is then inherited on all the different device views as it is picking it up first, even when the device size is not set to that stylesheets parameters. So my question is, have I linked the stylesheets to the device widths correctly? and why do they pick up all 7 stylesheets? I apologise if this is a reoccurring and futile topic for web designers, but I've been teaching myself for 6 years and it's something I'm looking to make my full time job so any advice for a young, start out freelancer would be much appreciated. My website in question FYI is: https://biobreakwebdesign.co.uk Thanks, Tom.
  2. Seth

    Menu to show on mobile

    My friend and client had a custom coded WordPress site done. She now wants me to take over the implementation of it. https://ashleyassists.mystagingwebsite.com/ I figured out what the previous developer did for the most part, but since it's not developed on a framework, I'm at a loss on some things. The latest is show to make the menu show up on a mobile device. Can someone help? Thanks in advance.
  3. Demonolith

    Keep hover colour after tap on phones

    Hi all, I have an SVG map and would like to have it so that when on a phone if a user taps a region the colour will change and remain that colour until another colour e.g. Region begins as #ff0000 When tapped changes to #ffff00 Stays that colour until another region is tapped Here is the map (towards the bottom of the page) - excuse how it looks on screens larger than 640px, right now I'm focusing on phones. And here's my CSS: a svg:focus #brackaghnorth { fill: #ff0000; pointer-events: none; } a svg:hover #tievebrack { fill: #ffff00; pointer-events: none; } a svg:hover #tievenameena { fill: #0000ff; pointer-events: none; } a svg:hover #liggins { fill: #ff3366; pointer-events: none; } a svg:hover #ligatraght { fill: #009900; pointer-events: none; } a svg:hover #keerin { fill: #ff00ff; pointer-events: none; } a svg:hover #oaghmonicrory { fill: #ff9900; pointer-events: none; } a svg:hover #teebaneeast { fill: #9933cc; pointer-events: none; } a svg:hover #carnanransy { fill: #ccff00; pointer-events: none; } a svg:hover #crouck { fill: #0033cc; pointer-events: none; } a svg:hover #alwories { fill: #00ffff; pointer-events: none; } a svg:hover #monanameal { fill: #cc0000; pointer-events: none; } a svg:hover #aghascrebagh { fill: #ccffff; pointer-events: none; } a svg:hover #crockanboy { fill: #ff9900; pointer-events: none; } a svg:hover #sheskinshule { fill: #ffff99; pointer-events: none; } a svg:hover #formil { fill: #33ff00; pointer-events: none; } a svg:hover #binnafreaghan { fill: #cc0000; pointer-events: none; } a svg:hover #cashel { fill: #9966ff; } a svg:hover #backan { fill: #00ff00; } a svg:hover #brackaghsouth { fill: #ffff00; } a svg:hover #leaghan { fill: #00ffff; } a svg #brackaghnorth, a svg #tievebrack, a svg #tievenameena, a svg #liggins, a svg #ligatraght, a svg #keerin, a svg #oaghmonicrory, a svg #teebaneeast, a svg #carnanransy, a svg #crouck, a svg #alwories, a svg #monanameal, a svg #aghascrebagh, a svg #crockanboy, a svg #sheskinshule, a svg #formil, a svg #binnafreaghan, a svg #cashel, a svg #backan, a svg #brackaghsouth, a svg #leaghan { transition: 200ms; transition-timing-function: ease-in-out; -webkit-transition: 200ms; -webkit-transition-timing-function: ease-in-out; }
  4. Hi all, I created an interactive map using Raphaël JS and although it appears on desktops it doesn't on mobiles - I am using a customised version of the Jetpack mobile theme. The map appears toward the bottom of this page. http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/raphael.js http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/map.js Can anyone help out please?
  5. Hi all, Each page on my site uses its own specific header image relevant to it. I did this via WP Display Header plugin, but I don't know how to do this for the mobile version of the site i.e. the same banner appears on every page. Is this possible? If so, how? Any help is appreciated, Niall
  6. I am using the following code to make an opaque Back to Top button appear on mobile devices when the user scrolls down. It fades in as the user scrolls, and fades away when the user scrolls back up - or touching the button glides the page to the top (obviously!) But mob devices are limited space, so to avoid the button covering the footer content, I would like it to fade away when the user stops scrolling or hits the bottom of the page, to reappear when the user scrolls again - is this possible/simple to do? HTML <a href="#" class="back-to-top">Back to Top></a> CSS .back-to-top { position: fixed; bottom: 1em; right: 0px; text-decoration: none; color: #000; background-color: rgba(235, 235, 235, 0.80); font-size: 90%; padding: 1em; display: none; font-family: 'open_sansbold', Arial, Helvetica; z-index: 999; border-radius: 14px 0 0 14px; moz-border-radius: 14px 0 0 14px; webkit-border-radius:14px 0 0 14px; o-border-radius: 14px 0 0 14px; } .back-to-top a { color: #000!important;} /* .back-to-top:active { color: #000!important;} */ .back-to-top:hover { /* background-color: rgba(135, 135, 135, 0.50); */ color: #000!important; } footer { z-index: ;} JS jQuery(document).ready(function() { var offset = 420; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) });
  7. NeonLabsUK

    Stop WebKit Animations on Mobile

    Hi. I am currently developing my own personal website and so far I am enjoying it until recently when I have run into a issue regarding webkit animations on mobile device. Basically, my website at http://www.daniel-chaplin.co.uk has a color changing animation on the text "Food and Beverage Park Host at Dreamland Margate" and "HNC in Computing and Systems Development graduate from Canterbury Christ Church University" which looks great on desktop, but on mobile it really messes up as the text goes onto another line, the animation doesn't go with it - basically I have this code that I want to be run when it goes mobile so there are no animations if that makes sense. The current code which is making the animation is: .animate-rounded { background: linear-gradient(253deg, #43cea2, #185a9d); background-size: 300% 300%; height: 100%; width: 100%; border-radius: 10px; border: 0px; -webkit-animation: Background 10s ease infinite; -moz-animation: Background 10s ease infinite; animation: Background 10s ease infinite; } I would like it to be the below on mobiles - you'll see why if you can make it work as it's just a static single color so it looks better. h1 span { background-color: #86BF57; padding: 10px; } I can't seem to get the animations to stop on a mobile device. If anyone has any help or advice, please do share as I have tried methods which just don't work, I made it disappear by using display:none; but nothing else. I'm not a expert it web design, I enjoy doing this basics so that's why i need the help now. Many thanks in advance. Dan
  8. Hello, I just landed on JQuery Mobile and I was thinking whether to include it or not in normal web design works that I do with BootStrap. http://www.w3schools.com/jquerymobile/default.asp Is it necessary to use it under normal conditions. If not then when to use it? Do I need it when I am doing total from scratch custom work like custom slider, custom navigation etc.? Gen. I use plugins like flexslider and bxslider and cycle for sliders and various other js and jquery plugins for various works. In that case I don't need it ... Right? Thanks
  9. I need to convert a website to the mobile version. It has so many sections and the basic thing is a complex layout. Any suggestion if it can be and how easily be converted to a mobile friendly layout? The website address is http://www.webtoolhub.com/ Also I know how to convert an article (specially WP based site ) to a mobile friendly version and there is an ‘article’ section that I can thinking of converting without much trouble, but don’t sure about the other sections.
  10. Hi, I have a html5 page using <video> tag and running .webm files. It all works quite smoothly. However, I would like to not run the video on mobile devices and instead replace it with the jpeg poster. This is the setup now: <video id="video" preload="auto" poster="video1.jpg" autoplay muted loop> <source src="video1.webm" type="video/webm" /> <source src="video1.ogv" type="video/ogv" /> <source src="video1.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser. </video> Any ideas? Thanks!
  11. I have been working on fixing this bug for two days now and hair has nearly been ripped out from this bug. I am using Hammer.js to make the image zoom,pinch,pan and everything works fine and dandy. However the client has come back saying that on a landscape device you cant scroll to get to the bottom of the image. I have tested this and my senior has tested it and he says it something to do with Hammer.js. I have used the overflow scroll on the element thats containing the image but the image is 100% width so no matter where I scroll it will be on top on that image. Has any other Hammer js users came across this problem? if so please advise. Cheers!
  12. Hi, I'm trying to display webpages from several sources on my website. I'd like them to be displayed in ~mobile-sized-ish iframes, so I'm looking for a way to automatically direct to mobile version inside the iframe (if existent). End result: user provides URLs to surf websites on their mobile version even though he is on web. Any ideas?
  13. DavidAndrewReilly

    Website Mobile Problem

    Hello, I could do with your help. I have a Moto G phone with Google Chrome, but when I view my website, my main text has been cut off, and the front is a default not the one I want (AR Destine). I am using a responsive web design. I have been messing about in style.css, but still can’t fix it. www.aspirationscotland.co.uk
  14. robertnorgren

    Mail signature retina/svg

    Hi, I've got a html e-mail signature with a hyperlinked logo. The issue I'm having is that when it's a jpg/png it's blurry on iPhone and when I use svg it doesn't show in Outlook/Hotmail... I also cannot get it to work with resizing a bigger jpg file using the width and height parameters in the href code. Is there a way to over come these issues? Thank you
  15. I originally posted to get help with our sliders because the images weren't showing up on our mobile devices, but now someone told me that the sliders work fine on his device. If you have a couple of minutes to spare, please go to our website with your mobile device and see if the sliders are showing up for you. Then let me know which device and OS version you were using. The main slider is here. The gallery slider is here (please indicate whether you see the thumbnails, the big images, or both). Many thanks for your help!
  16. We have two sliders on our website--one on the main page (http://www.cloud29cab.com) and a gallery slider at http://www.cloud29cab.com/about/taxis.html. They show up fine on desktop computers but not at all on mobile devices (the gallery thumbnails on the Taxis page are displaying but not the big images). I have tried a number of things to get the slider images to display, with no success. Any help would be greatly appreciated!
  17. DavidAndrewReilly

    Mobile Website Version Issue

    Hello, I am having a problem with the mobile version of a website. I have uploaded two screenshots to show you. One is a YouTube video width being too long. The other being at the very top, I want all the menus on one line. I would be grateful for any help. www[]dianneinglis[]com Thanks,
  18. DavidAndrewReilly

    Mobile Website YouTube Issue

    Hi, I am continuing to have an issue with YouTube Embed video on mobile. I have included a screenshot. I believe it is in my core.css where the problem is. It is fine on the desktop version just not the mobile version. www[]dianneinglis[]com Thanks,
  19. 1clickweb

    Responsive theme problems

    Good Morning, One of the themes I have been using for a site was not responsive, So I decide to make my own responsive style for it, I have added @media only screen and (max-width: 480px) { } and put all the styles I require in the brackets which is fine. I have tested it on the sceenfly mobile device testing site and the responsive style loads up fine. Now checking the site on my mobile it still shows me the desktop version and not the mobile style, am I missing something? Do I need to add anymore code to WP to trigger it to load the responsive style on mobile devices? Thanks
  20. Hi there, This website used to work fine with mobiles/tablets: mylittlescootercrew.com Now, it displays a very plain-looking website on mobiles etc. - unless you scroll right to the bottom and choose to display the full version.. How can I automatically display the responsive design for handheld devices (like it used to)? Is this something in my CSS..? I have tried & tried with no luck in changing it back to how it used to work- and don't know how it changed in the first place.
  21. I am working on an ecommerce site in wordpress 2012 with the wp-ecommerce plugin and I need to stop it being responsive. I want to do all of the responsive stuff myself but I cant seem to get rid of the default setting when at mobile pixels. I have tried removing the media queries from the style.css but it didnt work. Any advice? Thanks
  22. ProShark Mobile Application Development Just in case you missed some of the pertinent facts regarding application development for mobile platforms, here are a few that may catch your attention. 72% of adult Cellphone users text messages 65% of adult Cellphone users sleep with their phones 50% of US Cellphones will be smart phones by Christmas 2011 1 out of 3 Yelp searches is from mobile Apple Will Sell $2B in Apps in 2011 Approximately 40% of social media users access their accounts through mobile devices. One billion mobile applications were downloaded in the week between Christmas Day and New Years Day - Flurry Analytics The total global mobile applications market is expected to be worth $25 billion by 2015 (up from about $6.8 billion in 2010) – Marketsand Markets Go to::>> http://proshark.com/
  23. I'm trying make a website with a similar design to this site http://johnaugust.com/2009/wherefore-does-not-mean-where The two things I want is navigation fixed to the left, whilst content is scrollable vertically on the right. I've tried this html, body { height: 100%;} .left { position: fixed; height:100%; left:0; top:0; bottom: 0; right: 0; width: 250px; float: left; right:0; height: 100%; background: url('../img/bg.gif') repeat; border-right: 10px solid #C9CACE; } .right { padding: 10px 10px 0 270px; border-top: 10px solid #C9CACE; } Which gives me the desired layout on desktop browsers, but on mobile the following layout changes take place (before and after the user zooms on mobile browser) http://imgur.com/a/NKc1v I've been trying to fix this for three solid days... This is my first site and I'm really running out of time. Any help at all is greatly appreciated
  24. In my site, (techhamlet.com) I have the top category links (web, linux, all, other, windows) aligned well. In a desktop browser it work perfectly. But in Android, in both custom and dolhpin browsers, it won’t. Check this screenshot : What is wrong in here? How to fix it? Is there a firebug like tool for android?
  25. Hi there, I'm currently making a portfolio for an illustrator friend and was wondering whether it was worth making it responsive? I've done a few responsive designs in the past but for small local business (something that a personal would actually look up on their mobile). Would it be a bit pointless to make my friends site responsive? After all, the whole point of it, is for him to showcase his artwork, so you would never really get the intended experience on a mobile, responsive or not. I was just wondering what your thoughts were on the subject. Cheers!