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

Viewing 7 posts - 1 through 7 (of 7 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

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