Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #285775
    HansH
    Participant

    Hello team,

    I now use the free version of Catch store, with the aim to buy the pro store if all is going well.
    Now I looked tot the website on the iPad.
    In landscape the header isn’t responsive.
    Both sites a part of the header doesn’t show up.

    Is there a solution for it?

    #285781
    HansH
    Participant

    Sometimes I don’t understand it. Now I made a new page and this new page is responsive. Now I gonna try it with a new image.
    I made this issue, because another page wasn’t responsive while using the theme image.

    Kind regards

    Hans Hagmeijer

    #285782
    HansH
    Participant

    I remark, that if I look at the iPad I see a bigger image with more content -also on shop page- then on the MacBook.
    So the theme doesn’t look fully responsive.

    Kind regards

    Hans Hagmeijer

    #285816
    Skandha
    Participant

    @hansh: Hello Hans,
    Can you please let me know on which page the Header Image is not responsive on iPad and mobile devices?

    Kind Regards,
    Skandha

    #285828
    HansH
    Participant

    Hello Skandha,

    IS it possible to send you screenshots explanation in case I was not clear?

    Kind regards

    Hans Hagmeijer

    #285827
    HansH
    Participant

    Hello Skandha,

    The page, among others is:
    https://laura.hagmeijer.nl/winkel/

    If you look at this page on the iPad, you see more of the legs of the girl at the right side.

    And this header is not the same as the header at the front page. This is bigger and the girl of the right site is much closer to the edge of screen.

    Problem is: of you show on the https://laura.hagmeijer.nl/winkel/ header baked products (website is mentioned to be for my daughters home bakery) it is necessary that you see the same image on the iPad as on the laptop or desktop.

    Kind regards

    Hans Hagmeijer

    #285842
    Skandha
    Participant

    @hansh: Hello Hans,
    The image can be made responsive as you would like but for that the text over the Header Image will shown below it.
    For that please use the following CSS Code.

    .custom-header-media img {
    	display: block;
    }
    .custom-header::before {
        background-image: unset;
    }
    .custom-header-content {
        padding: 20px !important;
        background: #fff;
    }
    .custom-header-content .entry-title {
    	color: #000;
    }

    Let me know if this helps you out!
    Kind Regards,
    Skandha

    #285845
    HansH
    Participant

    Hello Skandha,

    Now the text is under the header, but I don’t want to see the text.
    In the shopping page you can read now:
    Archives you can add products.

    For the visitors of the shop page, this is meaningless text.

    Is it possible only to remove the text?

    Kind regards

    Hans Hagmeijer

    #285868
    HansH
    Participant

    Hello Skandha,

    It is the element:
    <div class=custom-header-content sections header-media section”>
    </div>
    <!—- .custom-header-content —->
    </div>
    </div>

    I think this is the element, that must be invisible or deleted.

    #285887
    HansH
    Participant

    Hello Skandha,

    I added
    .custom-header-content {
    display: none;
    }

    and on the first sight: this givens the right result.

    Now I have a question:

    You gave me the following css:
    .custom-header-media img {
    display: block;
    }
    .custom-header::before {
    background-image: unset;
    }
    .custom-header-content {
    padding: 20px !important;
    background: #fff;
    }
    .custom-header-content .entry-title {
    color: #000;
    }

    Can I replace this by:
    .custom-header-content {
    display: none;
    }

    or is it necessary to do more?

    And another question:
    Can I use a different header for different pages by use the header image per page?

    Kind regards

    Hans Hagmeijer

    #285893
    Skandha
    Participant

    @hansh: Hello Hans,
    If you don’t want the text over the Header Image then you can use just the following Code.

    .custom-header-content {
        display: none;
    }
    .custom-header-media img {
        display: block;
    }

    To use different Header Image on different pages.
    Go to => Appearance => Customize => Header Media => Enable On => Select Entire Site,Page/Post Featured Image and Publish.
    Now, the featured image you set for each post/page will show up as the header image.

    Let me know if this works out!
    Kind Regards,
    Skandha

    #285894
    HansH
    Participant

    Hello Skandha,

    Thanks for excellent support. I think I can handle the pro version now.

    Kind regards

    Hans Hagmeijer

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘theme not responsive on iPad in landscape’ is closed to new replies.