Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    Hello I am making a client's web template responsive but I am still learning and having some issues getting the headings responsive.

    Initially they are all ok and inline but as the page gets smaller the second heading moves to the edge of the page on the left, but the top heading doesn't so they are not inline.

    Then when the page is mobile size, the heading font does not downscale.

    Can anyone help me please, website dev link is here to look at

    Thanks in advance

  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Could you send me the link to the site issues? Also what framework are you using?
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  4. #3
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Just found the link, could you screenshot th issue? Im currently on an ipad and its a bit difficult to diagnose at the mo.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  5. #4
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    Hi Thanks for replying.


    As you can see the first and second header is sitting differently even though I think the same CSS is applied. This seems to happen between 768px - 1180px wide.

    Hope this helps

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    I think im blind, it looks fine from that screenshot, just checked it on my iphone, and although u havnt got a declaration saying that its a cell device. Are u able to highlight the area please?
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  7. #6
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    No wait, ive just seen it. *facepalm* i thought u were talking about the 3column box's. okay could u send me the css and the html for that section pls? Ill get back to my laptop in about 1hour
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  8. #7
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    Yes of course, thanks for looking. I am using the 1140px grid system. I have attached most of my html and css as I am wondering if there's something else kicking it out of place that I can't see.

    The html is:-

    HTML Code:
    <div id="header">
            <div class="container row">
                <div class="cover twelvecol last">
                    <h1>Onlywhat.com - the Request Engine</h1>
                </div><!--/Cover-->
            </div><!--/Container-->
        </div><!--/Header-->
    
        <div id="wrapper" class="container row">
    
            <div class="cover twelvecol last">
                <h2>Channel based request engine, integrated with social media. Lead generating platform for business.</h2>
    
                <div class="box_cover">
    
                    <div class="box fleft fourcol">
                        <div class="container">
                            <h3 class="you">For You</h3>
                            <ul>
                                <li>Post requests into channels</li>
                                <li>Receive replies</li>
                                <li>Share posts</li>
                                <li>Save time (and money)</li>
                              </ul>
                        </div><!--/Container-->
                    </div><!--/Box-->
    
                    <div class="box fleft fourcol">
                        <div class="container">
                            <h3 class="business">For Business</h3>
                            <ul>
                                <li>Generate leads</li>
                                <li>Business and consumer channels</li>
                                <li>Filter channels and reply to posts</li>
                                <li>Save time (and money)</li>
                              </ul>
                        </div><!--/Container-->
                    </div><!--/Box-->
    
                    <div class="box fright fourcol last">
                        <div class="container">
                            <h3 class="what">What You Can Do</h3>
                            <ul id="whatdo">
                              </ul>
                        </div><!--/Container-->
                    </div><!--/Box-->
    
                    <div class="clear"></div>
    
                    <div class="box-button fleft twelvecol last">
                        <div class="container">
                            <a href="https://www.onlywhat.com" target="_blank" class="btn" rel="nofollow">Get Started</a>
                          </div>
                    </div><!--Box-->
    
                    <div class="clear"></div>
    
                </div><!--/box_cover-->
    
                <div id="footer">
    
                    <span class="fleft">
                        <a href="http://www.onlywhatmedia.com/" target="_blank">Onlywhat Media Ltd</a>
                    </span>
    
                    <span class="socials fright">
                        <a href="https://plus.google.com/102142983833488119170" target="_blank"><img src="images/gplus.jpg" alt="" /></a>
                        <a href="http://www.linkedin.com/company/onlywhat-media-limited" target="_blank"><img src="images/linkedin.jpg" alt="" /></a>
                        <a href="http://www.twitter.com/OnlywhatMedia" target="_blank"><img src="images/twitter.jpg" alt="" /></a>
                        <a href="http://www.facebook.com/OnlywhatMedia" target="_blank"><img src="images/facebook.jpg" alt="" /></a></span>
                          <div class="clear"></div>
    
                    </div><!--footer-->
    
            </div><!--/Cover-->
    
        </div><!--/Wrapper-->
    Code:
    #header{
        background:url(../images/head_bg.jpg) repeat-x left top;} /* Applies background to header */
    
    #header h1{
        font-size:24px;
        color:#fff;
        font-weight:bold;
        line-height:80px;}    /* This styles your H1 Main Heading */
    
    body{
        background:url(../images/bg.jpg) repeat;
        font-family:Arial, Helvetica, sans-serif;} /* Generic styles for your page as whole */
    
    #wrapper{
        padding:20px 0;} /* This div keeps all your content in place by wrapping them */
    
    #wrapper h2{
        font-size:20px;
        color:#696767;
        font-weight:bold;
        line-height:20px;
        margin-bottom:20px;}    /* This styles your H2 Heading which sits just under your top H1 Heading */
    
    .cover{
        margin:0 auto;} /* This class works in the same way as the wrapper above and keeps the content inside it in place*/
    
    .btn{
        font-size:20px;
        color:#fff;
        text-decoration:none;
        background-color:#036dbe;
        display:inline-block;
        padding:0 20px;
        line-height:40px;}    /* This styles the large blue button */
    
    .box{
        padding-bottom:20px;} /* Baseline styles for your content boxes */
    
    .box-button{
        padding-bottom:0px;} /* Baseline styles for your button boxes */
    
    .box_cover{
        background-color:#fafafa;
        box-shadow:0 0 5px #b1afaf;
        position:relative;
        behavior:url(js/PIE.htc);
        padding-top:20px;
        padding-bottom:20px;} /* This class works in the same way as the wrapper above and keeps the content inside it in place */
    
    .box_cover p{
        font-size:13px;
        color:#858585;
        line-height:20px;
        margin-bottom:10px;} /* This styles the paragraphs within the box_cover class */
    
    .box.fright{
        margin-right:0;} /* This class says that the .Box class must float to the right */
    
    .box ul{
        padding-left:40px;} /* Baseline style for your unordered lists (ticked bullet points) */
    
    .box ul li{
        list-style:none;
        background:url(../images/right_icon.png) no-repeat left 5px;
        padding-left:25px;
        font-size:13px;
        color:#5e5d5d;
        line-height:25px;} /* This is the style that is applied to each item in your unordered list individually */
    
    #whatdo{}
    
    #whatdo li{
        width:263px;} /* This is the style that is applied to each item in your unordered list individually in the "What you can do" box */
    
    .box h3{
        font-size:18px;
        font-weight:bold;
        color:#000;
        line-height:28px;
        padding-left:40px;
        margin-bottom:10px;} /* Baseline styles for the H3 heading tags in your content boxes */
    
    .box h3.you{
        background:url(../images/you_icon.png) no-repeat left top;} /* Applies You icon to content box */
    
    .box h3.business{
        background:url(../images/business_icon.png) no-repeat left top;} /* Applies Business Icon to content box */
    
    .box h3.what{
        background:url(../images/what_icon.png) no-repeat left top;} /* Applies What Icon to content box */
    
    #footer{
        padding-top:15px;} /* Baseline Footer Style */
    
    #footer a{
        text-decoration:none;
        color:#5c5c5d;
        font-size:13px;} /* Styles Footer Links */
    
    #footer a:hover{
        text-decoration:underline;} /* Styles Footer Links when they are hovered over */
    
    .socials img{
        margin-left:5px;} /* Styles each social icon individually */
    
    .fleft{
        float:left;} /* When applied this class makes items float to the left */
    
    .fright{
        float:right;} /* When applied this class makes items float to the right */
    
    .right {
        text-align:right;} /* When applied this class makes text align to the right */
    
    .clear{
        clear:both;} /* This class is used to reset floats and ensure floated divs/classes sit correctly */
    
    /* ========================================================================  */
    /* CSS Resets - helps web page display consistently across browsers          */
    /* ========================================================================= */
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
    
    /* ========================================================================  */
    /* The 1140px Grid V2 - visit http://cssgrid.net for more information        */
    /* ========================================================================= */
    .container {padding-left: 20px; padding-right: 20px;}
    .row {width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto;}
    .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right: 3.8%; float: left; min-height: 1px;}
    .row .onecol {width: 4.85%;}
    .row .twocol {width: 13.45%;}
    .row .threecol {width: 22.05%;}
    .row .fourcol {width: 30.75%;}
    .row .fivecol {width: 39.45%;}
    .row .sixcol {width: 48%;}
    .row .sevencol {width: 56.75%;}
    .row .eightcol {width: 65.4%;}
    .row .ninecol {width: 74.05%;}
    .row .tencol {width: 82.7%;}
    .row .elevencol {width: 91.35%;}
    .row .twelvecol {width: 100%; float: left;}
    .last {margin-right: 0px;}
    img, object, embed {max-width: 100%;}
    img {height: auto;}
    .cf:before, .row:before, .cf:after, .row:after { content: ""; display: table; }
    .cf:after, .row:after { clear: both; }
    .cf, .row { *zoom: 1; }
    *{margin:0; padding:0; border:0; outline:none;}
    
    /* Smaller Desktop screens - Media Queries to make website downscale */
    @media only screen and (max-width: 1023px) {
    body {line-height: 1.5em;}
    }
    
    /* Mobiles & Tablets - Media Queries to make website downscale */
    @media handheld, only screen and (max-width: 767px) {
    body {font-size: 16px; -webkit-text-size-adjust: none;}
    .row, body, .container {width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;}
    .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {width: auto; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px;}
    }

  9. #8
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Hmm, I think its due to your framework, and the resets not working properly padding issues etc.

    I suggest start again but use the Skeleton Framework or the Twitter Bootstrap Although Skeleton is easy to implement and play with, twitter BS has quite a few decent extra features that might be useful. For my static projects though I use Skeleton as its very easy to use and work with.

    The Skeleton layout would be something like this

    HTML Code:
    <div class="container">
    <div class="row">
    <h1>Your Title here</h1>
    </div>
    </div>
    
    <div class="container">
    <div class="row">
    <h2>Your sub heading here</h2>
    </div>
    </div>
    And Skeleton will do the rest, should be easier for you to work with.

    Keep me posted.

    Marc
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  10. #9
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    Hi thanks for having a look and for your advise.

    I discovered it was the padding in the wrapper, took this out and applied it slightly differently and it all works just fine. Also amended the text line height which sorted the big gaps and messy text.

    Thanks for your help anyway :-)
    m3n0tu18 likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com