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
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with viewing on a mobile device

    Hi guys, Making a website for a mate at work for his business. However when I try and view the site on a mobile device such as Ipad or phone half the screen is cut out.

    Works perfectly on computer but not on the mobile device. I think it is something to do with the div boxes (if you view it you will see)

    http://www.cumbriacellarservices.co.nf/

    its just a temporary setup at the moment but any help will be great.
    thanks

    also tried embedding
    Code:
     <meta name="viewport" content="width=device-width, initial-scale=1" />
    yet had no effect in the HTML, Below is the CSS

    Code:
    html, body
    {
    	height: 100%;
    	width:100%;
    }
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    	background: #743D46;
    	font-family: 'Source Sans Pro', sans-serif;
    	font-size: 11pt;
    	font-weight: 300;
    	color: #6c6c6c
    	width:100%;
    }
    
    h1, h2, h3
    {
    	margin: 0;
    	padding: 0;
    	font-weight: 600;
    	color: #454445;
    }
    
    p, ol, ul
    {
    	margin-top: 0;
    }
    
    ol, ul
    {
    	padding: 0;
    	list-style: none;
    }
    
    p
    {
    	line-height: 180%;
    }
    
    strong
    {
    	color: #FFFFFF;
    }
    
    a
    {
    	color: #743D46;
    }
    
    a:hover
    {
    	text-decoration: none;
    }
    
    .container
    {
    	margin: 0px auto;
    	width: 1200px;
    }
    
    /*********************************************************************************/
    /* Image Style                                                                   */
    /*********************************************************************************/
    
    	.image
    {
    	display: inherit;
    }
    
    .image img
    {
    	display: block;
    	width: 100%;
    }
    
    .image-full
    {
    	display: block;
    	width: 100%;
    	margin: 0 0 2em 0;
    }
    
    .image-left
    {
    	float: left;
    	margin: 0 2em 2em 0;
    }
    
    .image-centered
    {
    	display: block;
    	margin: 0 0 2em 0;
    }
    
    .image-centered img
    {
    	margin: 0 auto;
    	width: auto;
    }
    
    /*********************************************************************************/
    /* List Styles                                                                   */
    /*********************************************************************************/
    
    	ul.style1
    {
    	margin: 0;
    	padding: 0em 0em 0em 0em;
    	overflow: hidden;
    	list-style: none;
    	color: #6c6c6c
    }
    
    ul.style1 li
    {
    	overflow: hidden;
    	display: block;
    	padding: 2.80em 0em;
    	border-top: 1px solid #D1CFCE;
    }
    
    ul.style1 li:first-child
    {
    	padding-top: 0;
    	border-top: none;
    }
    
    ul.style1 .image-left
    {
    	margin-bottom: 0;
    }
    
    ul.style1 h3
    {
    	padding: 1.2em 0em 1em 0em;
    	letter-spacing: 0.10em;
    	text-transform: uppercase;
    	font-size: 1.2em;
    	font-weight: 600;
    	color: #454445;
    }
    
    ul.style1 a
    {
    	text-decoration: none;
    	color: #525252;
    }
    
    ul.style1 a:hover
    {
    	text-decoration: underline;
    	color: #525252;
    }
    
    ul.style2
    {
    	margin: 0;
    	padding-top: 1em;
    	list-style: none;
    }
    
    ul.style2 li
    {
    	border-top: solid 1px #E5E5E5;
    	padding: 0.80em 0 0.80em 0;
    	font-family: 0.80em;
    }
    
    ul.style2 li:before
    {
    	display: inherit;
    	padding: 4px;
    	background: #DB3256;
    }
    
    ul.style2 a
    {
    	display: inherit;
    	margin-left: 1em;
    }
    
    ul.style2 li:first-child
    {
    	border-top: 0;
    	padding-top: 0;
    }
    
    ul.style2 .icon
    {
    	color: #FFF;
    }
    
    ul.style3
    {
    	margin: 0;
    	padding-top: 1em;
    	list-style: none;
    }
    
    ul.style3 li
    {
    	border-top: solid 1px rgba(255,255,255,.2);
    	padding: 1em 0 1em 0;
    	font-family: 0.80em;
    }
    
    ul.style3 li:before
    {
    	display: inherit;
    	padding: 4px;
    	background: #FFF;
    }
    
    ul.style3 a
    {
    	display: inherit;
    	margin-left: 1em;
    	font-size: 1em !important;
    	color: #FFF;
    }
    
    ul.style3 li:first-child
    {
    	border-top: 0;
    	padding-top: 0;
    }
    
    ul.style3 .icon
    {
    	color: #DB3256;
    }
    
    /*********************************************************************************/
    /* Social Icon Styles                                                            */
    /*********************************************************************************/
    
    	ul.contact
    {
    	margin: 0;
    	padding: 2em 0em 0em 0em;
    	list-style: none;
    }
    
    ul.contact li
    {
    	display: inherit;
    	padding: 0em 0.30em;
    	font-size: 1em;
    }
    
    ul.contact li span
    {
    	display: none;
    	margin: 0;
    	padding: 0;
    }
    
    ul.contact li a
    {
    	color: #FFF;
    }
    
    ul.contact li a:before
    {
    	display: inherit;
    	background: #3f3f3f;
    	width: 40px;
    	height: 40px;
    	line-height: 40px;
    	border-radius: 20px;
    	text-align: center;
    	color: #FFFFFF;
    }
    
    ul.contact li a.icon-twitter:before
    {
    	background: #2DAAE4;
    }
    
    ul.contact li a.icon-facebook:before
    {
    	background: #39599F;
    }
    
    ul.contact li a.icon-dribbble:before
    {
    	background: #C4376B;
    }
    
    ul.contact li a.icon-tumblr:before
    {
    	background: #31516A;
    }
    
    ul.contact li a.icon-rss:before
    {
    	background: #F2600B;
    }
    
    /*********************************************************************************/
    /* Button Style                                                                  */
    /*********************************************************************************/
    
    	.button
    {
    	display: inherit;
    	padding: 1.3em 3em;
    	background: #743D46;
    	-moz-transition: opacity 0.25s ease-in-out;
    	-webkit-transition: opacity 0.25s ease-in-out;
    	-o-transition: opacity 0.25s ease-in-out;
    	-ms-transition: opacity 0.25s ease-in-out;
    	transition: opacity 0.25s ease-in-out;
    	letter-spacing: 0.20em;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-weight: 600;
    	color: #FFF;
    }
    
    .button:hover
    {
    }
    
    .button:active
    {
    }
    
    .button-big
    {
    	padding: 1.6em 4em;
    	font-size: 1.4em;
    	font-weight: 900;
    }
    
    /*********************************************************************************/
    /* Heading Titles                                                                */
    /*********************************************************************************/
    
    	.title
    {
    	margin-bottom: 3em;
    }
    
    .title h2
    {
    	font-weight: 400;
    	font-size: 2.8em;
    	color: #323232;
    }
    
    .title .byline
    {
    	letter-spacing: 0.15em;
    	text-transform: uppercase;
    	font-weight: 400;
    	font-size: 1.1em;
    	color: #6F6F6F;
    }
    
    /*********************************************************************************/
    /* Header                                                                        */
    /*********************************************************************************/
    	
    #header-wrapper
    {
    	background: #FFF;
    }
    
    #header
    {
    	position: relative;
    	height: 100px;
    }
    
    /*********************************************************************************/
    /* Logo                                                                          */
    /*********************************************************************************/
    
    #logo
    {
    	position: absolute;
    	top: 2em;
    	left: 0;
    	width: 100%;
    }
    
    #logo h1
    {
    	display: inherit;
    	font-size: 2.5em;
    	text-transform: uppercase;
    	font-weight: 700;
    	color: #2C383B;
    	padding-right: 0.50em;
    	border-right: 1px solid rgba(0,0,0,.3);
    }
    
    #logo span
    {
    	position: absolute;
    	top: 1.4em;
    	display: inherit;
    	padding-left: 1.50em;
    	letter-spacing: 0.10em;
    	text-transform: uppercase;
    	font-size: 0.90em;
    }
    
    #logo a
    {
    	text-decoration: none;
    	color: #743D46;
    }
    
    /*********************************************************************************/
    /* Menu                                                                          */
    /*********************************************************************************/
    
    #menu
    {
    	position: absolute;
    	right: 0;
    	top: 1em;
    }
    
    #menu ul
    {
    	display: inherit;
    }
    
    #menu li
    {
    	display: block;
    	float: left;
    	text-align: center;
    	line-height: 60px;
    }
    
    #menu li a, #menu li span
    {
    	display: inherit;
    	margin-left: 1px;
    	padding: 0em 1.5em;
    	letter-spacing: 0.1em;
    	text-decoration: none;
    	font-size: 1em;
    	text-transform: uppercase;
    	outline: 0;
    	color: #FFFFFF;
    	background: #743D46;
    }
    
    #menu li:hover a, #menu li.active a, #menu li.active span
    {
    }
    
    #menu .current_page_item a
    {
    	background: #E24E2A;
    	color: #FFF;
    }
    
    #menu .icon
    {
    }
    
    /*********************************************************************************/
    /* Banner                                                                        */
    /*********************************************************************************/
    	
    	#banner-wrapper
    {
    	overflow: visible;
    	padding: 3em 0em;
    	background: #743D46;
    }
    
    #banner
    {
    	overflow: visible;
    	width: 100%;
    	padding: 0px 100px;
    	text-align: center;
    	color: rgba(255,255,255,.7);
    }
    
    #banner a
    {
    	color: rgba(255,255,255,.9);
    }
    
    #banner .box-left
    {
    	float: left;
    }
    
    #banner .box-right
    {
    	float: right;
    }
    
    #banner h2
    {
    	margin: 0em;
    	padding: 0em;
    	font-weight: 400;
    	font-size: 3em;
    	color: #555555;
    }
    
    #banner span
    {
    	display: block;
    	padding-top: 0.20em;
    	text-transform: uppercase;
    	font-size: 1.2em;
    	color: #A2A2A2;
    }
    
    /*********************************************************************************/
    /* Page                                                                          */
    /*********************************************************************************/
    
    #wrapper
    {
    	background: #FFF;
    }
    
    #page
    {
    	overflow: visible;
    	padding: 6em 0em;
    	border-bottom: 2px solid #E3E3E3;
    	text-align: center;
    }
    
    #page .button
    {
    	margin-top: 2em;
    }
    
    /*********************************************************************************/
    /* Content                                                                       */
    /*********************************************************************************/
    
    #content
    {
    	padding: 0em 7em;
    }
    
    /*********************************************************************************/
    /* Sidebar                                                                       */
    /*********************************************************************************/
    
    	#sidebar
    {
    	float: right;
    	width: 100%;
    }
    
    #stwo-col
    {
    	margin-top: 2em;
    }
    
    #stwo-col h2
    {
    	display: block;
    	padding-bottom: 1.5em;
    	letter-spacing: 0.10em;
    	text-transform: uppercase;
    	font-size: 1.2em;
    	font-weight: 600;
    	color: #454445;
    }
    
    #stwo-col .sbox1
    {
    	float: left;
    	width: 210px;
    }
    
    #stwo-col .sbox2
    {
    	float: right;
    	width: 210px;
    }
    
    /*********************************************************************************/
    /* Copyright                                                                     */
    /*********************************************************************************/
    
    #copyright
    {
    	overflow: hidden;
    	padding: 5em 0em;
    	border-top: 1px solid rgba(255,255,255,0.08);
    }
    
    #copyright p
    {
    	letter-spacing: 0.20em;
    	text-align: center;
    	text-transform: uppercase;
    	font-size: 0.80em;
    	color: rgba(255,255,255,0.3);
    }
    
    #copyright a
    {
    	text-decoration: none;
    	color: rgba(255,255,255,0.6);
    }
    
    /*********************************************************************************/
    /* Featured                                                                      */
    /*********************************************************************************/
    
    #featured-wrapper
    {
    	overflow: visible;
    	padding: 6em 0em;
    	background: #383838;
    	text-align: center;
    }
    
    #featured
    {
    	overflow: hidden;
    }
    
    #featured .major
    {
    	overflow: visible;
    	margin-bottom: 3em;
    	padding-bottom: 2em;
    	border-bottom: 1px solid #E8E8E8;
    }
    
    #featured .major h2
    {
    	font-size: 3em;
    }
    
    #featured .major .byline
    {
    	font-size: 1.3em;
    }
    
    #featured .title
    {
    	margin-bottom: 1.5em;
    	padding-bottom: 1.5em;
    	border-bottom: 1px solid rgba(255,255,255,.1);
    }
    
    #featured .title h2
    {
    	font-size: 1.2em;
    }
    
    #featured h2
    {
    	text-align: center;
    	color: #FFF;
    }
    
    #featured .icon
    {
    	position: relative;
    	display: inherit;
    	width: 100px;
    	height: 100px;
    	background: #E24E2A;
    	margin: 0px auto 20px auto;
    	line-height:  100px;
    	font-size: 3em;
    	text-align: center;
    	color: #FFF;
    }
    
    .column1,  .column2,  .column3,  .column4
    {
    	width: 282px;
    }
    
    .column1,  .column2
    {
    	float: left;
    	margin-right: 24px;
    }
    
    .column3
    {
    	float: left;
    }
    
    .column4
    {
    	float: right;
    }
    
    
    	#header-featured
    	{
    		height: 30em;
    		background-image: url(images/cellar3s.jpg);
    		background-position: center;
    		background-size: cover;
    	}
    
    
    #slider-wrapper
    {
    	padding: 6em 0em;
    	background: #DB3256;
    }
    
    #slider
    {
    	margin: 0em auto 0em auto;
    	width: 100%;
    	position: relative;
    }
    
    #slider .button
    {
    }
    
    #slider .button:hover
    {
    }
    
    #slider .viewer
    {
    	width: 100%;
    	height: 375px;
    	margin: 0 auto;
    	overflow: visible;
    }
    
    #slider .viewer .reel
    {
    	display: none;
    	height: 375px;
    }
    
    #slider .viewer .reel .slide
    {
    	position: relative;
    	width: 1000px;
    	height: 375px;
    }
    
    #slider .viewer .reel h2
    {
    	position: absolute;
    	top: 130px;
    	left: 0;
    	width: 1200px;
    	height: 80px;
    	line-height: 80px;
    	background: #111111;
    	text-align: center;
    	opacity: 0.85;
    	font-weight: normal;
    	color: #ffffff;
    	font-size: 2.25em;
    }
    
    #slider .viewer .reel p
    {
    	position: absolute;
    	top: 210px;
    	left: 0;
    	width: 1200px;
    	height: 40px;
    	line-height: 40px;
    	background: #0074C6;
    	text-align: center;
    	opacity: 0.85;
    	font-weight: normal;
    	color: #ffffff;
    	font-size: 1.1em;
    }
    
    #slider .icon
    {
    	font-size: 4em;
    	color: #FFF;
    }
    
    #slider .previous-button
    {
    	position: absolute;
    	top: 150px;
    	left: 0;
    }
    
    #slider .next-button
    {
    	position: absolute;
    	top: 150px;
    	right: 0;
    }
    
    #slider .indicator
    {
    	margin: 30px auto 0 auto;
    }
    
    #slider .indicator ul
    {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	text-align: center;
    }
    
    #slider .indicator ul li
    {
    	display: inherit;
    	width: 12px;
    	height: 12px;
    	text-indent: -9999em;
    	background: #c8c8c8;
    	margin: 0 2px 0 2px;
    	border-radius: 8px;
    	border-bottom: solid 1px #ffffff;
    	border-top: solid 1px #909090;
    }
    
    #slider .indicator ul li.active
    {
    	background: #505050;
    	border-top: solid 1px #505050;
    }
    
    /*********************************************************************************/
    /* Footer                                                                        */
    /*********************************************************************************/
    
    
    #footer-wrapper
    {
    	overflow: hidden;
    	padding: 6em 0em;
    	background: #383838;
    	text-align: center;
    }
    
    #footer
    {
    	overflow: hidden;
    }
    
    
    #footer .title h2
    {
    	font-size: 1.6em;
    	font-weight: 300;
    	color: #FFF;
    }
    
    #footer .title .byline
    {
    	display: block;
    	padding-top: 1em;
    	text-transform: uppercase;
    	font-size: 0.80em;
    	color: rgba(255,255,255,0.5);
    }
    
    #footer .button
    {
    	margin-top: 2em;
    }
    
    #extra
    {
    	overflow: visible;
    	margin: 0em auto 0em auto;
    	padding: 5em 0em 5em 0em;
    	text-align: center;
    }
    
    #extra h2
    {
    	margin: 0em;
    	padding: 0em;
    	font-weight: 400;
    	font-size: 2.4em;
    	color: #555555;
    }
    
    #extra span
    {
    	display: block;
    	padding-top: 0.20em;
    	text-transform: uppercase;
    	font-size: 1.2em;
    	color: #A2A2A2;
    }
    
    
    #extra .button
    {
    	margin-top: 2em;
    }
    
    #extra2
    {
    	overflow: hidden;
    	padding-bottom: 5em;
    }
    
    #extra2 .button
    {
    	margin-top: 2em;
    }
    
    #extra2 .title h2
    {
    	font-size: 2em;
    }
    
    #extra2 .title .byline
    {
    	font-size: 0.80em;
    }
    
    #extra2 #ebox1,
    #extra2 #ebox2
    {
    	width: 560px;
    }
    
    #extra2  #ebox1
    {
    	float: left;
    }
    
    #extra2 #ebox2
    {
    	float: right;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Your .container width is set to 1200px. Way too wide, especially if people are viewing this on smaller screens like laptops etc. Not everybody has their browser window maximized, either. Something in the range from 900–1000 pixels has proven viable for most audiences. Of course, you will either need to employ CSS media queries with a different width for smaller devices or scrap the fixed width altogether.

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can I not just set it at 100% ?

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Changed it to 100% and made no difference to the picture or colours

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    You might be seeing the issue with #banner, which is defined to be 100% wide PLUS 100px on each the left and right side. So regardless of the window size, that banner is 200px wider.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Tracknut, that did a little but not much. Fixed some issues with viewing on PC. However on mobile its still messing up

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Problem with viewing on a mobile device-img_0008.jpg
    Turns out like this

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Meekyman47,
    Looks like that on my phone too. When I remove your position: relative; from #header, it acts a little better. I think the mobile is choking on your absolute positioning?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Meekyman47,
    Looks like that on my phone too. When I remove your position: relative; from #header, it acts a little better. I think the mobile is choking on your absolute positioning?
    thanks for the reply, I followed stephans advice before and changed the container to auto, which has done wonders..... however if you look at this picture. I know need a little help getting the whole thing center alligned

    thanks

    Problem with viewing on a mobile device-img_0009.jpg


  •  

    Posting Permissions

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