Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2472386
Mobile version costumize
Closed

Comments

  • chimiamamisegua started the conversation

    Hello.

    Today i'd like to costumize the mobile version:

    1- mobile top bar menu font size and icon size (i'd like all in one line)

    2- mobile pencislider adapted to the the mobile widt

    3- mobile logo space bigger, changing the hight of the white band

    4- mobile single post, author, date etc... in one line

    5- mobile single page title with less white space bottom and changing the size of font title

    6- mobile category page title with less white space up and changing the size of font title

    Thank you

  •  2,699
    PenciDesign replied

    Hi,

    1 & 4/ It doesn't enough space to display in one line, so we don't provide support for this feature.

    2/ If you want to do that, please go to Customize > Featured Slider Options > on "Custom Fixed Ratio Height/Width of Images on Penci Slider. Unit is %. E.g: 50" > fill  "43"

    3/ Please try add more this code to Customize > Custom CSS to do that:

    @media only screen and (max-width: 960px){
    #navigation.header-11, #navigation.header-11 .penci-menuhbg-toggle, 
    #navigation.header-10, #navigation.header-10 .penci-menuhbg-toggle, 
    #navigation.header-6, #navigation.header-6 .penci-menuhbg-toggle,
    #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search, 
    #navigation.header-6 .main-nav-social, #navigation.header-11 .show-search, 
    #navigation.header-10 .show-search, #navigation.header-9 .show-search, 
    #navigation.header-6 .show-search, 
    #navigation.header-6 .show-search #searchform input.search-input {
        height: 80px;
    }
    #navigation .button-menu-mobile, #navigation.header-6 #top-search > a, 
    #navigation.header-6 .show-search a.close-search, 
    #navigation.header-6 .main-nav-social{ 
        line-height: 80px;
    }
    #navigation.header-6 #logo img{ 
        max-height: 80px;
    }
    }
    

    Change all values 80 on the above code to value as you want.

    5/ The theme support an option for change the font size for single post title on mobile via Customize > Single Post Options > Custom Font Size for Posts Title on Mobile

    For the white space bottom - Can you show me a screenshot & URL for this issue?

    6/ For category title font size on mobile, I see you're using a Custom CSS:

    @media only screen and (max-width: 960px){
    body.category .archive-box h1 {
        font-size: 35px;
    }
    }
    

    Let's find this code and change it.


    Best Regards,

    PenciDesign

  • chimiamamisegua replied

    HELLO. THANKYOU. Somethings worked and somethings not.
    I attacchi a file to explain what i mean.
    Thank you so much!!

  •  2,699
    PenciDesign replied

    Hi,

    1/ For the logo issue, please replace the code I sent to this code to fixed it:

    @media only screen and (max-width: 960px){
    #navigation.header-11, #navigation.header-11 .penci-menuhbg-toggle, 
    #navigation.header-10, #navigation.header-10 .penci-menuhbg-toggle, 
    #navigation.header-6, #navigation.header-6 .penci-menuhbg-toggle,
    #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search, 
    #navigation.header-6 .main-nav-social, #navigation.header-11 .show-search, 
    #navigation.header-10 .show-search, #navigation.header-9 .show-search, 
    #navigation.header-6 .show-search, 
    #navigation.header-6 .show-search #searchform input.search-input {
        height: 95px;
    }
    #navigation .button-menu-mobile, #navigation.header-6 #top-search > a, 
    #navigation.header-6 .show-search a.close-search, 
    #navigation.header-6 .main-nav-social{ 
        line-height: 95px;
    }
    .is-sticky #navigation .button-menu-mobile {
        line-height: 60px;
    }
    #navigation.header-6 #logo img{ 
        max-height: 95px !important;
    }
    }
    

    2/ For change the size for page titles, this issue caused by you've enabled the "Page Header" - please check and disable it via Customize > Page Header Options

    3 & 4/ Please try add more this code to Customize > Custom CSS to do that:

    @media only screen and (max-width: 960px){
    body:not(.home) #header, .archive-box, .penci-page-header{ margin-bottom: 20px; }
    .post-box-meta-single > span:before{ display: inline-block; }
    }

    Change value 20 to value as you want.


    Best Regards,

    PenciDesign

  • chimiamamisegua replied

    Hello.
    About the page header, I'd like it to be the same of the category page header. See the attached file.

    the last code about the post-box-meta-single doesn't work.

    Thank you

  • chimiamamisegua replied

    Also in the mobile version I'd like the have the same header both for category and single page.The one that now works well is the category mobile header. Is it possible to have the same layout?
    See the attached files.

  •  2,699
    PenciDesign replied

    Hi,

    As I said in my previous comment. Please disable the page header via Customize > Page Header Options

    I've said on point 2/ in my previous comment.


    Best Regards,

    PenciDesign

  • chimiamamisegua replied

    Hi,

    i did it but this is not what i want. I want the header in the page, and i want it the same aspect of the header in the category page. Phase look at the screen shoots.

    Also the last code about the post-box-meta-single doesn't work.

    Thank you

  •  2,699
    PenciDesign replied

    Hi,

    1/ Disable the Page Header doesn't make your page title removed. So, let's disable the page header. And check it.

    2/ Please change the code I sent to this code:

    @media only screen and (max-width: 960px){
    body:not(.home) #header, .archive-box, .penci-page-header{ margin-bottom: 20px; }
    .post-box-meta-single > span:before, .post-box-meta-single span{ display: inline-block !important; }
    }
    

    Best Regards,

    PenciDesign

  • chimiamamisegua replied

    Hi, 

    I did it, I don't know how to explain me... I attached the result. The title DESTINAZIONI that is the single page title, is now black and small, should have the same aspects of the title ITALIA in the category page.
    Sorry for my English... I hope it's clear now.

    The other code now works,
    Thank you

  •  2,699
    PenciDesign replied

    Hi,

    You can add more this code to Customize > Custom CSS to make it like others:

    .penci-page-header h1{ font-size: 50px; color: #db0812; }
    @media only screen and (max-width: 960px){
    .penci-page-header h1{ font-size: 35px; }
    }
    

    Best Regards,

    PenciDesign