Mobile Site – Blog – Switching Title and Date

Homepage Forums Pro Support Forum Silverclean Pro Silverclean Pro Support Mobile Site – Blog – Switching Title and Date

Mobile Site – Blog – Switching Title and Date

This topic contains 3 replies, has 2 voices, and was last updated by  iceable 10 months, 4 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19905
    Mobile Site – Blog – Switching Title and Date

    John M.
    Participant

    On the mobile site, how can I put the title above the date, category, comment, and tag section?

    #19915
    Reply to: Mobile Site – Blog – Switching Title and Date

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    The reply to this question: https://www.iceablethemes.com/forums/topic/shifting-date-category-and-tags/ should do this as well.

    In case you decide not to use this code for desktop and only want to aply this on mobile, you can wrap it in a media query like so:

    @media only screen and (max-width:480px){
    
    [code for mobile only goes here]
    
    }
    #19920
    Reply to: Mobile Site – Blog – Switching Title and Date

    John M.
    Participant

    You’ve lost me with the (code for mobile only goes here).

    I’ve decided to only go with making the switch on mobile for the metadata and title. The site, I’ll leave the alignment alone, only making the font size changes.

    So what is it I’d have to insert for just the mobile change, exactly.

    THANKS SO MUCH FOR YOUR HELP.

    #19921
    Reply to: Mobile Site – Blog – Switching Title and Date

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Sorry if this was unclear. The code I was referring to was the one in the other reply. So if you want to make this change on mobile only, you can copy/paste this:

    @media only screen and (max-width:480px){
    
    .single .postmetadata {
      float: none;
      width: auto;
      padding: 0;
      margin: 0;
    }
    
    .single .postmetadata span {
      font-size: 14px;
      display: inline-block;
      line-height: 140%;
    }
    
    .single .post-content {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    
    .single .post-content .entry-title {
      margin-bottom: 10px;
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
    }
    
    .single .post-content .postmetadata {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
    }
    
    .single .post-content * {
      order: 3;
    }
    
    }

    This is quite a chunk of code, but that’s actually the easiest way to make this switch with CSS only. Make just you copy everything and don’t miss a bit, especially the latest }.

    If you want to change just the font size for the meta on desktop, you can add either this to change the size for all meta:

    .single .postmetadata span {
      font-size: 14px;
      line-height: 140%;
    }

    Or this alternative if you want to change the size for the date only but not the category and tags:

    .single .postmetadata .meta-date {
      font-size: 14px;
      line-height: 140%;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Mobile Site – Blog – Switching Title and Date’ is closed to new replies.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock