Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Is my grid on my front page responsive ?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #188676
    iizag
    Participant

    Hi, I wanted to know if my grid of 6 boxes , is as responsive as possible ?

    When I look at my front page in my Ipad for example ( or when I shrink my window size) , it seems like the first 3 boxes in the first row flow good, but then there is one box in the middle followed by two. So the 2nd row is not flowing good ? I can post my code on how I made the six box’s, if firebug is not enough for anyone to help me.

    Thank you for any help.

    My front page: http://bitfiu.com/

    #188776
    iizag
    Participant

    I tried the following in firebug, but I noticed that when the screen shrinks (with the .homecont-box set at px ) the words dont stay inside and over flow out of its white container, but if i set it at anything else or just include a max or min height it does not look right.

    The white container box

    .homecont-box {
        background-color: #fbfbfb;
        border: 1px solid #eee;
        border-radius: 0 0 5px 5px;
        height: 235px;
        margin: 0 1%;
        transition: all 0.5s ease 0s;
    }

    The fontawesome icon

    .tabstyle-one {
        color: #444;
        display: block;
        font-size: 45px;
        margin: 23px 5px 5px;
        text-align: center;
    }

    The header in the box

    .hometext-boxhead {
        clear: left;
        color: #333;
        font-family: "Open Sans",sans-serif !important;
        font-size: 24px;
        font-weight: 400;
        line-height: normal;
        margin: 0 auto;
        padding-bottom: 5px;
        text-align: center;
        width: 100%;
    }

    The paragraph of text in the box

    span.hometext-boxp {
        clear: left;
        color: #666;
        display: table-cell;
        font-family: "Open Sans",sans-serif !important;
        font-size: 18px;
        font-weight: 300;
        height: 100%;
        margin: 0;
        overflow: auto;
        padding: 0 30px;
        width: 100%;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.