Editing responsive without ruining main theme?

Hello,

I've set a website up and got it as I want it, but the responsive looks horrible - every time I try to adjust it though it completely messes up the main site. How can I adjust the responsive versions so they look decent on a mobile and tablet?

Thanks very much! Stacey

  • Sajid

    Hello Stacey,

    Hope you are doing good today!

    Could you please tell me what issues you are getting exactly ? If you could share the screencast of what you are trying to do and what is messing on desktop will help me understand quickly.

    Also, do you get same issue while customising the Scribe at online demo for mobile devices ?

    Take care and have a nice day!

    Best Regards,
    Sajid

  • Sajid

    Hello Stacey,

    Hope you are doing good today!

    I can see the issue now. That is because you might have added a custom CSS to make the first post of the feed prominent.

    I can understand that, but that custom CSS is effecting the mobile layout.

    To make it work on desktop version, you simply wrap that CSS with follow media query as below.

    @media and (min-width: 768px){
    div#page .upfront-output-region-container .upfront-output-module .default.uposts-object li:first-child {
        width: 960px;
        height: 100%;
        max-height: 400px;
        float: none;
        padding-bottom: 35px;
        border-bottom: 1px dashed #000000;
    }
    }

    This would not mess up the mobile layout now and would display the content under image instead of on right hand side.

    Take care and have a nice day!

    Best Regards,
    Sajid

  • Sajid

    Hello Stacey,

    Hope you are doing good today

    I am sorry for confusion about the custom CSS. That appears to be default layout of the theme. Any way, if you don't like that layout then you can change this layout by following the steps below.

    1. Launch Upfront editor.

    2. Click on the posts and then on gear icon (see screenshot).

    3. Now go to Appearance tab.

    4. Click on chose or create preset.

    5. Type the preset name in the field (e.g my posts layout).

    6. Click on add button.

    7. Under same settings tab the screen will change and you will see Custom CSS Edit Preset CSS button. Click on it.

    8. Copy the following CSS code and paste in code editor.

    .upfront_posts-list > ul, ul.uf-uposts {
        overflow: hidden;
    }
    .uposts-object ul {
        width: 100%;
    }
    .uposts-object li {
        width: 295px;
        float: left;
        margin: 0 15px 30px;
        padding: 0;
    }
    .uposts-object li:nth-child(3n+1) {
        margin-right: 0;
    }
    .uposts-object li, .uposts-object li > article {
        overflow: hidden;
    }
    .uposts-object li .date_posted {
        color: #ufc3;
        font-size: 15px;
        line-height: 30px;
        font-family: "Lato";
        font-weight: 300;
        text-transform: uppercase;
    }
    .uposts-object li .content {
        min-height: 175px;
    }
    .uposts-object li .read_more {
        margin-bottom: 0;
        text-align: right;
    }
    .uposts-object li .read_more a {
        width: 94px;
        height: 19px;
        overflow: hidden;
        display: inline-block;
        background: url("//localhost.dev/wordpress/wp-content/themes/uf-scribe/ui/arrows.png") no-repeat -3px -5px transparent;
        text-indent: 100%;
        white-space: nowrap;
    }
    .uposts-object li .read_more a:hover {
        background-position: -3px -35px;
    }
    .uposts-object li .thumbnail {
        max-height: 140px;
        position: relative;
    }
    .uposts-object li .thumbnail:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #ufc0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        -ms-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
    }
    .uposts-object li .thumbnail:hover:after {
        opacity: 0.8;
    }
    .uposts-object li .title h3, .uposts-object li .title a {
        max-width: 100%;
        overflow: hidden;
        display: inline-block;
        padding: 0;
        color: #ufc0;
        font-size: 20px;
        line-height: 35px;
        font-family: "Cantata One";
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .uposts-object li .thumbnail h3 {
        position: relative;
    }
    .uposts-object li .title h3:after {
        content: "";
        width: 60px;
        display: block;
        bottom: 2px;
        left: 17px;
        border-bottom: 1px solid #ufc0;
    }
    .uf-pagination {
        clear: both;
        overflow: hidden;
        margin: 30px -3px 0;
        padding: 15px 0;
        text-align: right;
    }
    .uf-pagination .page-numbers {
        float: left;
        display: inline-block;
        margin: 0 3px;
        color: #ufc3;
        font-size: 14px;
        line-height: 14px;
        font-family: "Lato";
        font-weight: 400;
        font-style: normal;
        transition: color 0.3s ease;
        -ms-transition: color 0.3s ease;
        -moz-transition: color 0.3s ease;
        -webkit-transition: color 0.3s ease;
    }
    .uf-pagination .page-numbers.current, .uf-pagination .page-numbers:hover {
        color: #ufc0;
    }
    .uf-pagination .prev.page-numbers, .uf-pagination .next.page-numbers {
        float: none;
    }
    .uf-pagination .prev.page-numbers {
        margin-right: 15px;
    }

    9. Save preset, element and upfront page before quitting the editor.

    Now, to change the text color only on mobile, follow below steps.

    1. Launch Editor (Oh you knew it Nice).

    2. Click on responsive button from bottom left panel.

    3. Select break point from top (tablet, mobile).

    4. Select Paragraph (P) from Type Element: (see screenshot).
    [image pos="2"]

    5. As always, save changes and you are done!

    Hope that helps! Feel free to post a reply if you need further assistance

    Best Regards,
    Sajid