Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is the best way to turn a website into mobile for tablets, smartphones etc?

    hi!

    I was just wondering what is the best way to turn a finished website into mobile (for smartphones, tablets etc)

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Well, you could use media queries to program different versions of your sites for different screen sizes. Or you could use percentages to make your website still readable after being resized to fit different monitors.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, you could use media queries to program different versions of your sites for different screen sizes. Or you could use percentages to make your website still readable after being resized to fit different monitors.

    I´ve tried media queries and it didn´t work out so well.

    how do I use the percentages part?

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, starting at the @media is where the CSS is specific for the mobile/smaller browsers, etc.

    Code:
    /* THIS IS PART OF MY CSS */
    .body {
    	margin: 0 auto;
    	width: 70%;
    	clear: both; /*Makes container with no floating elements*/
    }
    .mainheader img {
    	display: block;
    	height: auto;
    	margin: 2% auto 2% auto;
    }
    										/* Nav */
    .mainheader nav {
    	background-color: #303030;
    	height: 40px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    }
    /* THIS IS PART OF MY Mobile CSS in the same document. Change the % to better fit if it were a small screen/resolution */
    
    @media only screen and (min-width: 150px) and (max-width: 600px) {
    	.body {
    		width: 90%;
    		font-size: 95%;
    	}
    	.mainheader img {
    		width: 100%;
    	}
    	.mainheader nav {
    		height: 160px;  /* Multiply by 4 */
    	}
    }
    So basically, you have your classes (.body, .mainheader img, etc.) in the CSS set for normal viewing. Then you create the previous code at the bottom for what it should look if you start to shrink the document. The only things you need to add to the @media part is the stuff that is changing when viewed on a smaller screen. Don't add lines that aren't changing, such as colors, etc.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    11
    Thanked 0 Times in 0 Posts
    You could create completely seperate HTML and CSS stylesheet for mobile and put a redirect script at the top of your pages to the mobile site. I found one of the internet that I have used with success and can post if you like.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Christos1979 View Post
    I´ve tried media queries and it didn´t work out so well.
    It’s actually really easy to make a site mobile friendly with CSS media queries, you just have to do it right. I don’t understand what wouldn’t work there.

    We could probably help you but you have to be a bit more specific than “it didn’t work out well”.

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Hustle: Thank you for your help. That´s exactly how I did it. Then went to a simulator that I found on the net, to see if it worked... but everything looked weird instead.

    @VIPStephan: Sorry about that, must have missed it. as I said to Hustle. I had done it exactly as he recommended in his reply but when i tried them out on a simulator that I found on the net, nothing seemed to work accordingly to my media queries

    @Rcoleman25: yes, please. Thank you.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    How do you expect us to help you if you (still) don’t provide any code or link to your site? All you have been asking is what is the best way to turn a website into mobile. And the answer is clearly media queries. Then all you said is that it didn’t work and looked weird. That’s nothing we can work with. Please help us to help you.

  • #9
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the website isn´t up yet...

    here´s a part of code

    Code:
    
     
    
     
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    *
    {
        margin: 0;
        padding: 0;
    }
    
    body
    {
        font-size: 14px;
        color: #6a6272;
        font-family: Tahoma;
        background: #B0CEFF;
    }
    
    .wrapper
    {
        width: 0 auto;
        margin: 0 auto;
        background-color: #B0CEFF;
    }
    
    /*Company Logo*/
    .header {
    	padding: 2px 0px 2px 0px;
        font-size: 60px;
        color: #666666;
        background-color: #528CE0;
        text-align:left;
    }
    
    /*Menu*/
    .nav {
    	position: -webkit-sticky;
    	padding: 10px 0;
       	background-color: #528CE0;
    	color: #FFFFFF;
        font-size: 18px;
        width: 0 auto;
       	text-align:left;
        text-transform: uppercase;
    
    } 
    
    .nav ul{
       border-style: solid;
        border-width: 1px 0px 1px 0px;
        border-color: #FFFFFF;
        padding: 5px;
        list-style-type: none; 
    }
    
    .nav ul li
    {
        display: inline;
        padding: 10px;
    }
    
    .nav a
    {  
        padding: 5px;
        color: #FFFFFF;
        text-decoration: none;
    }
    
    .sticky {
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      border-top: 0;
    }
    
    
    /***********************************************************************************************/
    /* Button */
    /***********************************************************************************************/
    .go-top {
    	position: fixed;
    	bottom: 2em;
    	right: 2em;
    	text-decoration: none;
    	color: white;
    	//background-color: rgba(0, 0, 0, 0.3);
    	background-color: #528CE0;
    	font-size: 12px;
    	padding: 1em;
    	display: none;
    	opacity:0.6;
      	filter:alpha(opacity=60);
    }
    
    .go-top:hover {
    	//background-color: rgba(0, 0, 0, 0.6);
    	background-color: #528CE0;
    	opacity:0.6;
      	filter:alpha(opacity=60);
    }
    
    
    /*Header on Menu*/
    .head-menu{
    	position: absolute;
    	top:1px; 
    	left:700px;
    	position: -webkit-sticky;
    	z-index: 200;
    
    	/*top:1px;
    	margin:auto; /* Required */
    	/*position:absolute;*/ /* Required */
     	/*left:0;right:0;*/ /* Aligns horizontal center */
    	/*text-align:center;*/
     
    }
    
    /*Pages*/
    #home { 
    	text-align: left;
    	height: 1000px;  
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    
    #about { 
    	text-align: left;
    	height: 1000px;
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    
    #apps { 
    	text-align: left; 
    	height: 900px;  
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
    }
    
    #contact{ 
    	text-align: left;
    	height: 1000px;
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    
    /*HeaderText*/
    .HeaderText{
    	 margin-left: 200px;
    }
    
    /*News*/
    .NewsH1{
    	color: #006eff;
    }
    
    .NewsDate{
    	color: #528CE0;
    	font-size: 10px;
    }
    .News{
    	
    	text-align: left;
    	font-size: 36px;
    	color: #000022;
    }
    
    /*About*/
    .AboutH1{
    	color: #006eff;
    }
    
    .About{
    	
    	text-align: left;
    	font-size: 36px;
    	color: #000022;
    }
    
    /*Apps*/
    .AppsH1{
    	color: #006eff;
    }
    
    /*ContactForm*/
    .ContactFormH1{
    	color: #006eff;
    	font-size: 13px;
    }
    
    /*Slider on app page*/
    .sp-slideshow {
        position: relative;
    	margin: 10px auto;
    	width: 80%;
    	max-width: 0 auto;
    	min-width: 0 auto;
    	height: 660px;
    }
    
    .sp-content {
       
    	position: relative;
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    }
    
    .sp-parallax-bg {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 0 auto;
    	height: 100%;
    	overflow: hidden;
    }
    
    .sp-slideshow input {
        position: absolute;
    	bottom: 15px;
    	left: 50%;
    	width: 9px;
    	height: 9px;
    	z-index: 1001;
    	cursor: pointer;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
    }
    
    .sp-slideshow input + label {
        position: absolute;
        bottom: 15px;
    	left: 50%;
        width: 6px;
    	height: 6px;
    	display: block;
    	z-index: 1000;
    	border: 3px solid #fff;
    	border: 3px solid rgba(255,255,255,0.9);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: background-color linear 0.1s;
        -moz-transition: background-color linear 0.1s;
        -o-transition: background-color linear 0.1s;
        -ms-transition: background-color linear 0.1s;
        transition: background-color linear 0.1s;
    }
    .sp-slideshow input:checked + label {
    	background-color: #fff;
        background-color: rgba(255,255,255,0.9);
    }
    
    .sp-selector-1, .button-label-1 {
        margin-left: -36px;
    }
    
    .sp-selector-2, .button-label-2 {
        margin-left: -18px;
    }
    
    .sp-selector-4, .button-label-4 {
        margin-left: 18px;
    }
    
    .sp-selector-5, .button-label-5 {
        margin-left: 36px;
    }
    
    .sp-arrow {
        position: absolute;
    	top: 50%;
    	width: 18px;
    	height: 38px;
    	margin-top: -19px;
    	display: none;
    	opacity: 0.8;
    	cursor: pointer;
    	z-index: 1000;
    	background: transparent url(../img/arrows.png) no-repeat;
    	-webkit-transition: opacity linear 0.3s;
        -moz-transition: opacity linear 0.3s;
        -o-transition: opacity linear 0.3s;
        -ms-transition: opacity linear 0.3s;
        transition: opacity linear 0.3s;
    }
    .sp-arrow:hover{
    	opacity: 1;
    }
    .sp-arrow:active{
    	margin-top: -18px;
    }
    .sp-selector-1:checked ~ .sp-arrow.sp-a2,
    .sp-selector-2:checked ~ .sp-arrow.sp-a3,
    .sp-selector-3:checked ~ .sp-arrow.sp-a4,
    .sp-selector-4:checked ~ .sp-arrow.sp-a5 {
        right: 15px;
    	display: block;
    	background-position: top right;
    }
    .sp-selector-2:checked ~ .sp-arrow.sp-a1,
    .sp-selector-3:checked ~ .sp-arrow.sp-a2,
    .sp-selector-4:checked ~ .sp-arrow.sp-a3,
    .sp-selector-5:checked ~ .sp-arrow.sp-a4 {
        left: 15px;
    	display: block;
    	background-position: top left;
    }
    
    .sp-slideshow input:checked ~ .sp-content {
        -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
        -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
        -o-transition: background-position linear 0.6s, background-color linear 0.8s;
        -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
        transition: background-position linear 0.6s, background-color linear 0.8s;
    }
    
    .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
        -webkit-transition: background-position linear 0.7s;
        -moz-transition: background-position linear 0.7s;
        -o-transition: background-position linear 0.7s;
        -ms-transition: background-position linear 0.7s;
        transition: background-position linear 0.7s;
    }
    
    input.sp-selector-1:checked ~ .sp-content {
        background-position: 0 0;
    	background-color: #B0CEFF;
    }
    
    input.sp-selector-2:checked ~ .sp-content {
        background-position: -100px 0;
    	background-color: #B0CEFF;
    }
    
    input.sp-selector-3:checked ~ .sp-content {
        background-position: -200px 0;
    	background-color: #B0CEFF;
    }
    
    input.sp-selector-4:checked ~ .sp-content {
        background-position: -300px 0;
    	background-color: #B0CEFF;
    }
    
    input.sp-selector-5:checked ~ .sp-content {
        background-position: -400px 0;
    	background-color: #B0CEFF;
    }
    
    input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
        background-position: 0 0;
    }
    
    input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
        background-position: -200px 0;
    }
    
    input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
        background-position: -400px 0;
    }
    
    input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
        background-position: -600px 0;
    }
    
    input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
        background-position: -800px 0;
    }
    
    .sp-slider {
        position: relative;
    	left: 0;
        width: 500%;
    	height: 100%;
    	list-style: none;
        margin: 0;
    	padding: 0;
        -webkit-transition: left ease-in 0.8s;
        -moz-transition: left ease-in 0.8s;
        -o-transition: left ease-in 0.8s;
        -ms-transition: left ease-in 0.8s;
        transition: left ease-in 0.8s; 
    }
    
    .sp-slider > li {
    	color: #fff;
    	width: 20%;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
    	height: 100%;
    	padding: 0 60px;
        float: left;
    	text-align: center;
    	opacity: 0.4;
        -webkit-transition: opacity ease-in 0.4s 0.8s;
        -moz-transition: opacity ease-in 0.4s 0.8s;
        -o-transition: opacity ease-in 0.4s 0.8s;
        -ms-transition: opacity ease-in 0.4s 0.8s;
        transition: opacity ease-in 0.4s 0.8s; 
    }
    .sp-slider > li img{
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
    	display: block;
    	margin: 0 auto;
    	padding: 40px 0 50px 0;
    	max-height: 100%;
    	max-width: 100%;
    }
    input.sp-selector-1:checked ~ .sp-content .sp-slider {
        left: 0;
    }
    
    input.sp-selector-2:checked ~ .sp-content .sp-slider {
        left: -100%;
    }
    
    input.sp-selector-3:checked ~ .sp-content .sp-slider {
        left: -200%;
    }
    
    input.sp-selector-4:checked ~ .sp-content .sp-slider {
        left: -300%;
    }
    
    input.sp-selector-5:checked ~ .sp-content .sp-slider {
        left: -400%;
    }
    
    input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
    input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
    input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
    input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
    input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
    	opacity: 1;
    }
    @media screen and (max-width: 840px){
    	.sp-slideshow { height: 345px; }
    }
    @media screen and (max-width: 680px){
    	.sp-slideshow { height: 285px; }
    }
    @media screen and (max-width: 560px){
    	.sp-slideshow { height: 235px; }
    }
    @media screen and (max-width: 320px){
    	.sp-slideshow { height: 158px; }
    }
    
    /* Contact Form*/
    
    /* ===========================
       ======= Body style ======== 
       =========================== */
    
    label {
    	display:block;
    	margin-top:20px;
    	letter-spacing:2px;
    }
    
    h2 {
    	margin-bottom: 20px;
    	color: #474E69;
    }
    
    /* ===========================
       ====== Contact Form ======= 
       =========================== */
     
    form {
    	width:459px;
    	margin:0 auto;
    } 
    
    input, textarea {
    	width:439px;
    	height:27px;
    	background:#efefef;
    	border-radius:5px;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border:1px solid #dedede;
    	padding:10px;
    	margin-top:3px;
    	font-size:0.9em;
    	color:#3a3a3a;
    } 
    
    	input:focus, textarea:focus {
    		border:1px solid #97d6eb;
    	}
    
    textarea {
    	height:213px;
    	font-family:Arial, Helvetica, sans-serif;
    }
     
    
    /* ===========================
       ====== Submit Button ====== 
       =========================== */
      
     #submit {
    	background:url(../img/submit_flat.png);
    	width:127px;
    	height:38px;
    	text-indent:-9999px;
    	border:none;
    	margin-top:20px;
    	cursor:pointer;
    }
    
    	#submit:hover {
    		opacity:0.9;
    	}
    	
     #reset {
    	background:url(../img/clear_flat.png);
    	width:127px;
    	height:38px;
    	text-indent:-9999px;
    	border:none;
    	margin-top:20px;
    	cursor:pointer;
    }
    
    	#reset:hover {
    		opacity:0.9;
    	}
    
    }


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •