12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Could someone help me out? trying to get website to work on mobiles

by MikeFranks
9 replies
  • WEB DESIGN
    • |
Hey guys, currently I got this website - Circl Apps

My question: is there a line of code etc. I can implement to make it fit the size of the mobile/tablet screen its viewed on?

This website is temp - it's an image, lol. I'm just making it to hopefully get people interested.


thanks

mike.
#mobiles #website #work
  • Profile picture of the author Delta90
    I'm not totaly sure what it is that you want but the first step for setting a mobile page up is adding the meta tag for device width.

    Code:
    <meta name="viewport" content="width=device-width">
    That scales your site accordingly to the size of the mobile screen. So that someone visiting on a mobile doesn't feel that eveything is so small and zoomed out.
    {{ DiscussionBoard.errors[8638348].message }}
    • Profile picture of the author clintK
      If it's just a background image set it at 100%
      {{ DiscussionBoard.errors[8638567].message }}
      • Profile picture of the author MikeFranks
        Originally Posted by Delta90 View Post

        I'm not totaly sure what it is that you want but the first step for setting a mobile page up is adding the meta tag for device width.

        Code:
        <meta name="viewport" content="width=device-width">
        That scales your site accordingly to the size of the mobile screen. So that someone visiting on a mobile doesn't feel that eveything is so small and zoomed out.
        Where would I put that in the code? i tried to add it in the HTML page but it doesn't change. Basically, when you resize your browser by pressing the button with two windows at the top right, the image is smaller. Is there a way to make it so regardless of the size, that image will stay ...like full screen?

        Originally Posted by clintK View Post

        If it's just a background image set it at 100%
        Hey Clint, I've already got this:
        Code:
        body{
		
			background-image:url(bgg.png) ;
			background-repeat:no-repeat;
			background-size: 100%;
		
		}
        is that what you mean?

        Thanks a lot guys.
        Signature

        basiczen.net

        {{ DiscussionBoard.errors[8638808].message }}
  • Profile picture of the author Delta90
    I looked at your code, the meta tag needs to go in the header not at the bottom. Your code should look like this:

    Code:
    <!DOCTYPE HTML>
<html>
<head>
        <meta name="viewport" content="width=device-width">
	<title>Circl Apps</title>
	<style type="text/css">body{
		
			background-image:url(bgg.png) ;
			background-repeat:no-repeat;
			background-size: 100%;
		
		}
	</style>
</head>
<body>

</body>
</html>
    But the thing is as you have the image scaled to 100% it'd fit anyway without the meta code I suggested. I don't really know what you want to do here. If you think the image is to zoomed out and that it's small what I would do is creating an image with just the phone and the button and have that display at 100% instead and add the background color separately.
    {{ DiscussionBoard.errors[8639950].message }}
    • Profile picture of the author MikeFranks
      Originally Posted by Delta90 View Post

      I looked at your code, the meta tag needs to go in the header not at the bottom. Your code should look like this:

      Code:
      <!DOCTYPE HTML>
<html>
<head>
        <meta name="viewport" content="width=device-width">
	<title>Circl Apps</title>
	<style type="text/css">body{
		
			background-image:url(bgg.png) ;
			background-repeat:no-repeat;
			background-size: 100%;
		
		}
	</style>
</head>
<body>

</body>
</html>
      But the thing is as you have the image scaled to 100% it'd fit anyway without the meta code I suggested. I don't really know what you want to do here. If you think the image is to zoomed out and that it's small what I would do is creating an image with just the phone and the button and have that display at 100% instead and add the background color separately.
      Thanks it works now, all i wanted was the whole whole page to fit on over devices. It worked by changing BG color. Thank you.
      Signature

      basiczen.net

      {{ DiscussionBoard.errors[8642525].message }}
  • Profile picture of the author vermadenish
    In which platform - This site is ?
    There are many tools - which they can make your website mobile friendly.

    Choose one like dudamobile, mobstac etc.

    Cheers !
    Signature
    Cheap SEO Services at $100 Only | SEO Experts | Free Guest Posting Service | Cheap Web Development services
    {{ DiscussionBoard.errors[8642631].message }}
    • Profile picture of the author DailyIncome
      This is the css you need:

      @media screen and (max-width:1440px) {ENTER YOUR CSS HERE FOR DESKTOP OR IPAD}

      @media only screen and (max-width:640px) {ENTER HERE FOR MAYBE LARGESCREEN PHONE}

      @media only screen and (max-width:480px) {ENTER CSS FOR THIS 480PX DEVICE}


      @media only screen and (max-width:320px) {CSS FOR FEATUREPHONE}

      offermobi has a screenshot tool.

      hope this helps!
      {{ DiscussionBoard.errors[8648748].message }}
  • Profile picture of the author MikeFranks
    Thanks guys
    Signature

    basiczen.net

    {{ DiscussionBoard.errors[8655664].message }}
    • Profile picture of the author DailyIncome
      You're welcome mate, happy designing
      {{ DiscussionBoard.errors[8657101].message }}

Trending Topics