Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #519405

    At present, blog posts appear side by side on mobile devices which makes them very small.

    How can I arrange them so they are only single column on a mobile?

    http://dev2.electrixinternational.com/about-electrix/videos/

    #519446

    Hey richardelectrix!

    Add this to your custom CSS.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .slide-entry {
        width: 100% !important;
        margin-left: 0px !important;
    }
    }

    Best regards,
    Elliott

    • This reply was modified 8 years, 5 months ago by Elliott.
    #519449

    Hi

    Thats doesnt appear to have worked.

    http://dev2.electrixinternational.com/about-electrix/videos/

    #519511

    Hi!

    Try it now.

    Regards,
    Elliott

    #519527

    Hi

    It’s still the same I’m afraid.

    #520249

    Hi!

    Your probably have a typo in your custom CSS then. Paste all of it here.

    Cheers!
    Elliott

    #520805

    Hi

    The whole of my css is in private …

    The bit relevant to the mobile blog posts …

    /* Attempt to make blog posts single column on mobile */
    @media only screen and (max-width: 767px) .responsive #top #wrap_all .slide-entry {
        width: 100% !important;
        margin-left: 0px !important;
    }

    On the enfold site they are single column on a mobile as standard?

    #521159

    Hey!

    That’s quite a lot of CSS. Make sure there are no typos. I looked over it real quick and found this.

    td.how-to-order-1st-column span.av-icon-char{
    /* display: none; */
    /* visibility: hidden; */
    color=’#007ab6′
    size=’60px’
    position=’absolute’
    top: 60px;
    }
    

    Which is going to cause problems. Make sure that every opening bracket has a closing bracket and that all of your comments are properly closed. Those are the most common CSS typos.

    Regards,
    Elliott

    #521457

    Thanks

    I have looked over the CSS and cant see anything else obvious.

    The blogs are now displaying as a single column.

    However I can’t figure out why this isnt working

    /* CT START Tick Box List */
    
    ul.list  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E822";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Tick Box List */
    
    /* CT START Lock Symbol List */
    
    ul.list-lock {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-lock li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-lock li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E839";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Lock Symbol List */
    
    /* CT START Phone Symbol List */
    
    ul.list-phone  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-phone li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E854";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Phone Symbol List */
    
    /* CT START Email Symbol List */
    
    ul.list-email {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-email li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E805";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Email Symbol List */
    
    /* CT START Fax Symbol List */
    
    ul.list-fax {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-fax li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-fax li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E886";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Fax Symbol List */
    

    This (ul list) is meant to display the fontello tick box as a bullet.

    But instead it is just displaying 822.

    http://dev2.electrixinternational.com/products/trunking-systems/flat-lid-trunking-system/

    #521551

    Hi

    I have fixed the above.

    Back to the blog posts on mobile.

    It is working as a single column but ther is a large gap between every other blog post (correct) and the rest are touching each other.

    INCORRECT – http://screencast.com/t/eEqn9XzuJjK

    CORRECT – http://screencast.com/t/3yWm855PWM

    http://dev2.electrixinternational.com/about-electrix/blog/

    #522477

    Hi!

    use this code to control it’s margin:

    @media only screen and (max-width: 736px) {
    article.slide-entry.flex_column.post-entry.slide-parity-odd.av_one_half.first.real-thumbnail {
    margin-bottom: 20px !important;
    }}
    

    and adjust as needed.

    Best regards,
    Andy

    • This reply was modified 8 years, 5 months ago by Andy.
    #532664

    Hi

    This is resolved.

    Thanks

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Make blog posts summary display as single item on mobile’ is closed to new replies.