Home › Forums › Pro Themes › Musicsong Pro › Header on mobile and tablet issue

Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 22, 2020 at 9:55 am #126897
    Lavita
    Participant

    Hi there,

    The header (background picture) is not showing properly on mobile and tablet. Default picture measurements are used. Could you please help? See details below.

    Website: https://heffo.nl/
    Printscreen mobile: https://paste.pics/9DBTE

    June 22, 2020 at 7:46 pm #126909
    wensolutions
    Keymaster

    Hello,

    Regarding your query, actually, the image size is the problem for the image to fit as per the devices. Also, this is the CSS we have given below is by reducing the height of the image so you can use this following the path Admin Panel > Appearance > Customize > Additional CSS,

    @media(max-width: 991px){
    #page-site-header{
        height: unset;
        padding: 405px 0 162px;
        background-attachment: unset;
    }
}
@media(max-width: 575px){
    #page-site-header{
        padding: 271px 0 162px;
    }
    #page-site-header .wrapper{
        top: 63%;
    }
}

    Hope this helps.

    Regards.

    June 23, 2020 at 6:36 am #126988
    Lavita
    Participant

    Hello,

    Thank you, it works vertically good now on mobile and tablet! But if you switch the device to horizontally the same issue appears.

    Maybe you can fix this aswell?

    June 23, 2020 at 8:25 am #127009
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS,

    @media(max-width: 767px) and (min-width: 576px){
    #page-site-header{
        padding: 186px 0 162px;
    }
    #page-site-header .wrapper{
        top: 60%;
    }
}

    Hope this helps.

    Regards.

    June 24, 2020 at 9:49 am #127110
    Lavita
    Participant

    Hello,

    Unfortunately this code does not work out 🙁
    So if you switch the device to horizontally the same issue still appears.

    June 25, 2020 at 12:02 am #127134
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS, for the menu to appear in the right position.

    @media only screen and (max-width: 575px){
    .site-title{
        font-size: 32px;
    }
    .menu-toggle{
        position: absolute;
        right: 20px;
    }
}

    If this previous CSS doesn’t work as per your requirement then please provide us with the screen record of how it appears and we can fix it for you.

    Regards.

    June 30, 2020 at 5:04 am #127452
    Lavita
    Participant

    Hello,

    Unfortunately this code does not work. Please see printscreen below:

    https://paste.pics/9FSS6

    July 7, 2020 at 10:08 am #128166
    Lavita
    Participant

    Hello,

    The last code did not work. Could you please help with this pending issue?

    Please see printscreen below:

    https://paste.pics/9FSS6

    Thanking you in advance!

    July 8, 2020 at 2:11 am #128247
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS, 

    @media(max-width: 767px){
    div#page-site-header {
        padding: 248px 0;
        height: auto;
        background-attachment: inherit;
    }
}
@media(max-width: 575px){
    .site-title {
        font-size: 21px;
    }
    .menu-toggle{
        height: 42px;
    }
    div#page-site-header {
        padding: 0;
        height: 290px;
    }
    #page-site-header .page-title{
        font-size: 18px;
        margin-top: 36px;
    }
}

    Regards.

    July 8, 2020 at 10:17 am #128326
    Lavita
    Participant

    Thanks for your new code, unfortunately also this new code does not work:

    – Vertically perfect on mobile
    – Horizontal same issue on mobile
    – Vertically same issue on tablet
    – Horizontal same issue on tablet

    Could you please have a look one more time ? 🙂
    THanks so much!

    July 13, 2020 at 6:18 am #128603
    wensolutions
    Keymaster

    Hello,

    This code that we have provided works on our side and this is the best we could for now. Also, since your request is small and in bulk we suggest you hiring the professional designer for further enhancement.

    To hire one, you can refer to below given link:

    https://themepalace.com/hire-a-customizer/

    Thank you.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.