Header image on mobile - Acme Themes
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #40100
    Jan Salava
    Participant

    I have an issue with the header image which is not visible correctly on mobile devices. I would like to either find out how to adjust it so that header image size responses accordingly based on the device of the website viewer or how to leave header image for example on desktop and tablets and hide header on mobile devices? Thank you.

    #40193
    acmesupports
    Moderator

    Dear Jan,
    If you send us the URL of your site, we shall observe it and provide you with possible solution.
    Best Regards!

    #40986
    Jan Salava
    Participant

    salavaphotography.com

    • This reply was modified 3 years, 9 months ago by Jan Salava.
    #41042
    acmesupports
    Moderator

    Dear Jan,
    Here is the solution of your query, please go through it.
    Site URL: http://salavaphotography.com/:
    1.) To adjust the image height add the following css

    /*for adjusting height in mobile devices add both css and chage the value at comment mention below*/

    @media (min-width: 992px){
        .slider-feature-wrap .at-front li {
            height: 40vh !important;
        }
    }
    .slider-feature-wrap .at-front li {
        height: 30vh !important;
        /*change the value of height here to adjust as per your need*/
    }

    2.) To remove image in mobile devices add the following code
    /*if you want to hide on mobile devices*/

    @media (max-width: 768px){
        .slider-feature-wrap .at-front li{
        }
    }
    • This reply was modified 3 years, 9 months ago by acmesupports.
    #41208
    Jan Salava
    Participant

    I have decided to use code which should remove header image on mobile devices however I didnt see any change after applying the code. I am not expert so I could of missed something important.Is there anything that have to be done with the code before saving?

    Thank you very much for help.

    #41279
    acmesupports
    Moderator

    Dear Jan,
    Could you please inform us where did you added the provided code ?.For quick solution, you can add the code in customize additional css. (Dashboard => Customize => Additional CSS)

    #41505
    Jan Salava
    Participant

    I added the code as recommended however when I check the website on my phone I still can see the header image. Thank you

    #41675
    acmesupports
    Moderator

    Dear Jan,
    Please add the given CSS code in Additional CSS.
    Appearance->Customize->Additional CSS.
    ` @media (max-width: 768px){
    .slider-feature-wrap .at-front li{
    display:none !important;
    }
    }`

    Best Regards!

    #41787
    Jan Salava
    Participant

    thank you that worked !

    #41853
    acmesupports
    Moderator

    Dear Jan,
    You are Most Welcome 🙂

    Best Regards!

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