Mobile Site

  • Author
    Posts
  • #132597

    hudsonblonde
    Member

    Hi There,

    I just had a few requests regarding my the mobile versions of the Olsen Theme:

    1) Is it possible to only have the sidebar visible on the home page of mobile site instead of the sidebar and the footer which have the same widgets ? Or rather, only pick certain widgets visible on the mobile site?

    2) Secondly, would I be able to have only the footer visible on the individual pages instead of the footer and the sidebar?

    3) Is it possible to have the content of the entire blog enlarged so the photos and widgets fit the full screen of a mobile browser ?

    4) Centre the social icons in the “Lets be Friends” Widget

    5) The featured slider on the home page seems to be disproportionate. Is it possible to have the title, leave a comment and continue reading overlap as it does on the desktop version? As well as centre the content.

    6) Can i change the “continue reading” font on the featured slider

    7) Change colour of the submit button under the “contact” page (for both mobile and desktop)

    8) Can I remove the “category” on the blog posts and have it so its the date and number of comments underneath the solid black line?

    9) is it possible to put the social menu and the primary menu directly underneath each other like in americanfille.com ?

    10) Additionally can I remove the grey box and just have plain grey text to match the social menu ?

    11) Can i change the colour of the “comments” on each blog post

    12) Is it possible to have a “Continue reading” link inserts at the right hand bottom side of each blog post with the social media icons on the bottom right hand side like in the americanfille.com mobile site?

    Thanks for all your help !

    The blog I need help with is hudsonblonde.com.

    #132599

    fotispapafotiou
    Theme Author

    1. Picking certain widgets in mobile can be tricky, but you can try this
    Find the Widget ID, and add

    @media(max-width:768px){
    #widget-id{
    display:none;
    }
    }

    For example for your instagram widget ID is (#wpcom_instagram_widget-9). Let me know which you need so I can provide there ID’s.
    2.
    To remove completely the widgets and leave only the footer you can add this

    @media(max-width:768px){
          .single  #secondary{
                display:none;
        }
    }

    in your custom CSS box.
    3. Try this

    @media(max-width:768px){
        .container{
           width:100%;
        }
    }

    in your custom CSS box.
    4.
    Add this

    #secondary .widget{
    text-align:center;
    }

    in your custom CSS box.
    5. Try this

    
    @media(max-width:768px){
        .featured-post-content{
            min-width:100%;
        }
    }

    6. I am afraid you cannot change fonts for specific elements in WordPress.com
    7. Add this

    .contact-submit input{
        background:green;
    }

    in your custom CSS box. This will be the same for both mobile and desktop

    8. You can remove category like this

    @media(max-width:768px){.entry-header .entry-categories{
    display:none;
    }
    }
    

    but you cannot move meta elements or reposition them.
    9.
    No I am afraid this is not possible with the WordPress.com version of Olsen.
    10. Try this

    .menu-toggle{
        color:gray;
        background:transparent;
    }

    11. You can change it for all off them, but for each you will need different selector each time, which is not really easy to achieve nor recommended. To change them in general try this

    .comments-link a{
    color:red;
    }

    this again will apply in mobile and desktop.
    12. Again this is not possible in WordPress.com since it requires code changes which are not permitted.

    Let me know if these work, or if I can help out more.

    #132619

    hudsonblonde
    Member

    Thanks so much,

    1) Id like the search widget, the instagram widget, the image widget and the archive widget visible on the home page of the mobile site

    2) didnt seem to work, the sidebar is still visible on the individual pages (fashion, lifestyle, travel)

    5) Can I remove the “category” listed above the title on the featured slider on the mobile version as well?

    6) my apologies, can I change the colour of the font in the “continue reading” link

    8) can I add a date link on the desktop version too to all blog posts?

    *Additional question: Can I remove the category from the blog posts on the desktop version too ?

    **Is it possible to increase the font on the featured slider for the mobile page ?

    **Lastly, can i change the hover colour of the menu pages on the mobile version ?

    Thanks !

    #132645

    fotispapafotiou
    Theme Author

    Hi there.
    1. Try this

    @media(max-width:768px){#blog_subscription-7,#jetpack_widget_social_icons-7,#grofile-11{
     display:none;   
    }}

    in your custom CSS box.
    2. It works only in single pages. Try this to add it everywhere

    @media(max-width:768px){
        #secondary{
                display:none;
        }
         .home #secondary{
            display:block;
        }
    }

    5. Add this

    @media(max-width:768px){
        .featured-post-content .entry-categories{
            display:none;
        }
    }

    6. Try this

    @media(max-width:768px){
        .featured-post-content a.more-link{
        background:red;
        color:white;
        }
    }

    in your custom CSS box.
    8. Replace this

    .entry-date {
        display: none;
    }

    with this

    @media(max-width:768px){
        .entry-date {
            display: none;
        }
    }
    

    in your custom CSS box

    Try this

     .entry-categories{
            display:none;
        }

    to remove categories from everywhere.

    Also add this

    .featured-post-content .entry-title{
    font-size:30px;
    }

    in your custom CSS box.

    For the hover in mobile menu add

    
    @media(max-width:768px){
    .menu-toggle:hover{
    background:red;
    color:white;
    }
    .main-navigation a:hover{
        color:red;
    }
    }
    

    in your custom CSS box.

    Let me know if this works, or if I can help out more.

    #132656

    hudsonblonde
    Member

    1. I think I may have understood wrong – I would like to remove the search bar, the instagram and the two images from the mobile site (originally in the sidebar of the desktop site). What are the ID’s for those widgets?

    8: Can I also insert the date on the mobile version blog posts?

    *Am i able to centre the desktop title, date and leave a comment so that it is proportionate to the pictures on the opposite side?

    ** Can I remove the date on the feature slider (both mobile and desktop) ?

    *** Can I remove the solid bar thats underneath the primary menu on the mobile site only

    **** Can I increase the space between the blog posts and the solid bars separating them ( mobile site and desktop)

    Thank you so much for your help ! My blog is nearly perfect thanks to you !

    #132660

    hudsonblonde
    Member

    Also, CSS to change the font colour and boldness of the side bar widget titles?

    #132662

    hudsonblonde
    Member

    Last one!

    Can I remove the solid bar between the featured slider and the first blog post ?

    #132668

    fotispapafotiou
    Theme Author

    Hi there,
    1. My bad try this.

    @media(max-width:768px){
    #search-5{
     display:none;   
    }
    #media_image-7,
    #media_image-5,
    #wpcom_instagram_widget-9{
     display:none;   
    }    
    }
    

    2. Remove and occurance of

    .entry-date {
        display: none;
    }

    from your custom css but add this

    .featured-post-content .entry-date{
    display:none;
    }

    to remove it from the slider only.

    Add this

    @media (max-width: 991px)
        .main-navigation {
            border-bottom:none;
        }
    }

    to hide the border in the mobile menu.

    Remove this

    .home .hentry {
        margin: 0 0 10px;
        padding-bottom: 10px;
    }

    from your custom css.
    Also add this

    #secondary .widget .widget-title{
    color:#000;
    font-weight:bold;
    }

    to change the widget title.
    Finally add this

    .featured-posts-wrapper{
        border-bottom:none;
    }

    to remove the border under the slider.
    Let me know if you need additional help on this.

    #132693

    hudsonblonde
    Member

    1. Can I remove the social media widget on the sidebar for the mobile site too?

    Is there a CSS to centre the featured post content (title, date, comments) on the desktop version?

    Lastly, can i increase the space between the above solid bar and the second blog (and future blog posts) on the featured page (mobile version and desktop)? They seem to be very close together.

    Thanks !

    #132695

    hudsonblonde
    Member

    Disregard the last one ! The space between the solid line and the blog post increased on the mobile site but not the desktop site. CSS for that ?

    Also I must not have explained properly, Im looking to remove the solid line underneath the primary menu and above the featured slider on the mobile version.

    #132714

    fotispapafotiou
    Theme Author

    Hi there,
    You can add this

    
    @media(max-width:768px){
    #jetpack_widget_social_icons-7{
        display:none;
    }
    }
    

    in your custom CSS box.

    I noticed everything is centered in the featured slider.

    Did this

    @media (max-width: 991px){
        .main-navigation {
            border-bottom:none;
        }
    }

    not helped on removing the border?

    #132727

    hudsonblonde
    Member

    Yes this all worked perfectly ! Thank you :)

    #132728

    hudsonblonde
    Member

    Can I increase the size of the mobile site “Menu” font?

    Can I also remove the solid bar between the logo and the menu on the mobile site ?

    Lastly, there is a lot of white space between the primary menu and the blog post title on the mobile site. CSS to decrease that ?

    Thanks :)

    #132729

    fotispapafotiou
    Theme Author

    Hi there,
    try this

    .menu-toggle{
    font-size:18px;
    }

    for the menu font in mobile.
    Try this

    @media(max-width:768px){
    .main-navigation{
    border:none;
    margin:0;
    }
    
    }

    for your menu border and white space.
    Let me know if you need additional help on this.

You must be logged in to reply to this topic.