www.webdeveloper.com
Results 1 to 2 of 2

Thread: font size issue on samsung galaxy

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    2

    font size issue on samsung galaxy

    a webpage i worked on looks messed up on a samsung galaxy s4 but i cant figure out what the issue is. the fonts in the div are too big and then they're overflowing and push the rest of the divs down out of their respective boxes. i'm using percentage for the font-sizes so i don't know how they're all weird. any advice, i'd be greatful. link: http://nonasbali.com/rates.html

    here's the css:
    Code:
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans:700);
    
    /** EM css reset **/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    
    /*** COLORS
     * DARK-GREY: #0B0C0B
     * white-grey: #B7B8B7
     * mid-grey: #6A6A6A
     * light-grey: #D5D5D5   
     * green: #757B36 
     */
    
    body {
        background:#0B0C0B;
        font-size: 14px;
    }
    
    #wrap {
        position:absolute;
        width:1200px;
        left:50%;
        margin-left:-600px;
        margin-top:14px;
    }
    
    .clear {
        clear:both;
    }
    
    h1, h2, h3, h4, h5, h6, p, a {
        font-family: 'Noto Sans',Helvetica, Arial, sans-serif;
        font-size: 100%;
    }
    
    h1 {font-size:120%;color:#D5D5D5;}
    h3 {font-size:200%;color:#B7B8B7;}
    h4 {font-size:250%;color:#D5D5D5;}
    h5 {font-size:400%;color:#0B0C0B;}
    
    .green {color:#757B36;}
    .white {color:#ffffff;}
    .bold {font-weight:700;}
     
    /*** HEADER ***/
    #header {
        width:1200px;
        height:220px;
        margin-bottom:20px;
    }
    
    #logo {
        float:left;
        width:270px;
        margin-left:10px;
    }
    #nav {
        width:930px;
        height:40px;
        float:right;
        position:absolute;
        top:175px;
        right:0px;
    }
    #nav a{
        display:block;
        float:left;
        border-top: 1px solid #ffffff;
        width:140px;
        margin-left:15px;
        text-decoration:none;
        color:#B7B8B7;
        text-align:center;
        line-height:40px;
        font-size:120%;
    }
        
    #nav a:hover, #nav a.current {
        border-top: 5px solid #ffffff;
        color:#ffffff;
        position:relative;
        top:-4px;
    }
    
    
    /*** MAIN ***/
    #main {
        width:960px;
        margin:0 auto;
        background:#ffffff url('../images/grad.jpg') repeat-x;
        padding:40px 0 20px 20px;
    }
    #main p {
        width:700px;
        color:#0B0C0B;
        font-size:110%;
        line-height:1.4em;
        margin-top:20px;
    }
    #main div.roomboxes {
        width:900px;
        height:221px;
        background:#6A6A6A;
        margin-top:40px;
        margin-left:20px;
        position:relative;
    }
    #main div.roomboxes img {
        float:left;
        border-right:2px solid #000000;
    }
    #main div.roomboxes img.book {
        position:absolute;
        right:20px;
        bottom:20px;
        z-index:10;
    }
    /* button span style */
    
    #main div.roomboxes span.bttn {
        background:#ffffff;
        width:120px;
        height:32px;
        position:absolute;
        right:20px;
        bottom:20px;
    }
    #main div.roomboxes div.boxtext {
        float:right;
        width:580px;
        margin-top:30px;
    }
    #main div.roomboxes div.boxtext p {
        width:560px;
        font-size:80%;
        color:#ffffff;
        margin-bottom:20px;
    }

  2. #2
    Join Date
    Jul 2013
    Posts
    2
    it's the text in the div.roomboxes that i'm referring to

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles