The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    css code for mobile , changes classic version

    mcdk
    avatar
    mcdk
    Forumember


    Male Posts : 135
    Reputation : 1
    Language : Greek
    • Post n°1

    In progress css code for mobile , changes classic version

    Post by mcdk November 2nd 2015, 2:16 pm

    hello there!
    I found some css code for mobile.
    And after searching in the source code ,
    I found that this specific code changes my desktop version also :
    Code:
    .post {
        padding: 0!important;
        line-height: 170%!important;
        margin: 0px;
        font-size: 12px!important;
        background: transparent!important;
    }
    .postbody .content {
        position: relative;
        padding: 15px!important;
        word-break: break-all;
        -moz-hyphens: auto;
        font-size: 12px!important;
        color: #555!important;
        line-height: 170%!important;
      background: #FFF!important;
    }

    You can see my forum before and after below :
    css code for mobile , changes classic version Before10

    css code for mobile , changes classic version After10

    Can you help me?

    thanks



    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°2

    In progress Re: css code for mobile , changes classic version

    Post by Ange Tuteur November 2nd 2015, 2:20 pm

    Hi @mcdk,

    For certain CSS rules that affect the desktop version also, I recommend adding the id #mpage-body before the selector set. For example :
    Code:
    #mpage-body .post {
        padding: 0!important;
        line-height: 170%!important;
        margin: 0px;
        font-size: 12px!important;
        background: transparent!important;
    }
    #mpage-body .postbody .content {
        position: relative;
        padding: 15px!important;
        word-break: break-all;
        -moz-hyphens: auto;
        font-size: 12px!important;
        color: #555!important;
        line-height: 170%!important;
      background: #FFF!important;
    }
    • Back to top
    mcdk
    avatar
    mcdk
    Forumember


    Male Posts : 135
    Reputation : 1
    Language : Greek
    • Post n°3

    In progress Re: css code for mobile , changes classic version

    Post by mcdk November 2nd 2015, 3:12 pm

    Thank you so much!
    I have one more question and I think the appearance of the mobile theme will be just perfect.
    I have this css code for the quotes into the desktop forum.
    And I get a mixed result in the mobile template.
    Check it in the photo.
    Here is the css code for the desktop.
    Code:

    .content blockquote, dl.codebox {
    background: none;
    border: 0!important;
    position: relative;
    overflow: hidden;
    min-height: 35px!important;
    margin: 10px 0;
    padding: 11px 0 6px 10px;
    font-size: 14px;
    line-height: 18px;
    color: #504536;
    font-family: Georgia;
    font-style: italic;
    }
    blockquote div {
    margin-top: 7px;
    margin-left: 6px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: solid 1px #D5DEE5;
    background: url(http://i58.servimg.com/u/f58/14/80/95/87/spback10.png) bottom left repeat-x #FFF;
    max-width: 91%;
    padding: 15px 20px 10px 23px;
    position: relative;
    }
    blockquote div:before {
    content: '';
    background: url(http://i58.servimg.com/u/f58/14/80/95/87/openq10.png) top left no-repeat transparent;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 3px;
    }
    blockquote cite {
    font-style: normal;
    font-weight: 700;
    display: block;
    font-size: 13px;
    color: #fff;
    background: url(http://i58.servimg.com/u/f58/14/80/95/87/qhm10.png) top left repeat-x transparent;
    height: 32px;
    position: absolute;
    z-index: 100;
    top: -15px;
    text-shadow: #000 1px 1px;
    left: 0;
    }
    blockquote cite:before {
    content: '';
    position: absolute;
    z-index: -1;
    background: url(http://i58.servimg.com/u/f58/14/80/95/87/qho10.png) no-repeat 0 0 transparent;
    width: 31px;
    height: 38px!important;
    left: -13px;
    top: 0;
    }
    blockquote cite:after {
    content: '';
    background: url(http://i58.servimg.com/u/f58/14/80/95/87/qhc10.png) no-repeat 0 0 transparent;
    position: absolute;
    right: -10px;
    width: 10px;
    height: 32px;
    top: 0;
    }

    css code for mobile , changes classic version Image10


    Thanks again!
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°4

    In progress Re: css code for mobile , changes classic version

    Post by SLGray November 2nd 2015, 10:04 pm

    Ange Tuteur wrote:For certain CSS rules that affect the desktop version also, I recommend adding the id #mpage-body before the selector set.



    css code for mobile , changes classic version Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°5

    In progress Re: css code for mobile , changes classic version

    Post by Ange Tuteur November 3rd 2015, 5:04 am

    Yes ^^

    You'll need to write overrides for the mobile version. For example, hide the cite pseudo-content :
    Code:
    #mpage-body blockquote cite:before, #mpage-body blockquote cite:after {
      display:none;
    }
    • Back to top

      Current date/time is November 11th 2024, 2:47 pm