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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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

    #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.

    #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?

    #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.

    #127110
    Lavita
    Participant

    Hello,

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

    #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.

    #127452
    Lavita
    Participant

    Hello,

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

    https://paste.pics/9FSS6

    #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!

    #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.

    #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!

    #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.

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