Mobile version display issues

Home › Forums › Technical Theme Support › STAX Theme › Mobile version display issues

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 11, 2023 at 9:07 pm #451145
    Manu
    Participant

    Hello,

    Any page of my website that has plain text right after the header when viewed on mobile has the page title and first couple of lines covered by the header (if I turn the phone in landscape it shows normally)!
    Here is a page as example https://www.ashtangayogacheltenham.com/tips-for-a-good-practice/

    Can you please help me fixing it?

    Also is there a way to make the image in the Hero block scale down automatically to display fully on mobile? At the moment I can see only a little square piece of the image.

    Thank you.
    Manu

    January 16, 2023 at 8:43 pm #451322
    Manu
    Participant

    Hello,

    Can someone please reply to my message?

    Thank you

    January 17, 2023 at 7:47 am #451331
    David Morgan
    Keymaster

    Hi Manu,

    I apologize for the delay. We have been working on some plugin and theme updates to resolve the site title issue, providing a new option in the Header Block for a mobile font size for the site title.

    However, in the meantime, I can provide some CSS to help resolve these issues. Try adding the following CSS to resolve the site title / header overlap issue in mobile:

    @media screen and (max-width: 768px) {
  h1.obb-site-title {
    font-size: 2.0rem !important;
  }
  .obb-header .obb-site-identity {
    flex-basis: 75%;
  }
}

    And try the following code for the home page Hero Block image in mobile:

    @media screen and (max-width: 768px) {
  .obb-hero {
    min-height: 440px !important;
  }
}

    Alternatively, you could try the following style for the Hero Block background image in mobile. However, this will scale the image to fit the width of the container, and not the height, which may produce unwanted results:

    @media screen and (max-width: 768px) {
  .obb-hero {
    background-size: contain;
  }
}

    I hope this helps.

    Thanks!

    January 18, 2023 at 9:04 pm #451377
    Manu
    Participant

    Thank you David,

    after adding the CSS, the text is all visible but the page title is still covered.
    The image is still showing a very small part of the all image, ie. https://www.ashtangayogacheltenham.com/yoga-essentials/ (please see pc vs mobile)
    The font in the header is so big and the logo so small. Why?

    Best,
    Manu

    January 23, 2023 at 3:41 pm #451466
    David Morgan
    Keymaster

    Hi Manu,

    No problem. 🙂

    1. Did you get this issue resolved? The titles are now all visible for me.

    2. Try adding the following style:

    @media screen and (max-width: 768px) {
  .obb-hero.obb-featured-img-parallax {
    background-attachment: scroll;
  }
}

    3. As for the font size, you may just need to adjust the size for the previously provided style:

    @media screen and (max-width: 768px) {
  h1.obb-site-title {
    font-size: 1.4rem !important;
  }
}

    I hope this helps.

    Thanks!

    January 23, 2023 at 10:02 pm #451476
    Manu
    Participant

    Thank you so much David 🙂
    It works when I visit the site with the phone in portrait but when I turn it to landscape the image is wrong again.

    Would you mind to have another look please?

    Thank you
    Best wishes,
    Manu

    January 30, 2023 at 6:04 am #451642
    Manu
    Participant

    Hi David,

    Did you have chance to look into the mobile (landscape view) issue?

    Thanks

    January 30, 2023 at 7:40 am #451648
    David Morgan
    Keymaster

    Hi Manu,

    I think this issue is related to the media query size. Adjusting the screen size for the media query should resolve the issue:

    @media screen and (max-width: 950px) {
  .obb-hero.obb-featured-img-parallax {
    background-attachment: scroll;
  }
}

    Let us know if this works. If not, you may just need to increase the max-width size a bit more.

    I hope this helps.

    Thanks!

    February 1, 2023 at 8:31 pm #451710
    Manu
    Participant

    That worked perfectly, thank you.

    Is there a way to reduce the font size in the mobile version?

    Best wishes,
    manu

    February 6, 2023 at 5:59 am #451810
    Emily Morgan
    Keymaster

    Hi Manu, which font specifically are you trying to reduce? All font or certain font?

    Thanks,
    Emily

    February 6, 2023 at 6:28 am #451811
    Manu
    Participant

    Yes,sorry!

    The menu font. Please 🙂

    February 8, 2023 at 3:17 pm #451892
    David Morgan
    Keymaster

    Hi Manu,

    No problem. If you’re using the latest version of the Organic Blocks plugin, you can change the font size within the Header block settings.

    Follow these steps:

    1. Navigate to Appearance > Editor > Template Parts.
    2. Select the “Header” template part and click the “Edit” button.
    3. Click on the Header block. The option should appear on the right, but you may need to toggle open the options panel.
    4. Locate the “Mobile Primary Navigation” tab, and click on it.
    5. Select a menu for you mobile menu (You can choose the same menu as your Primary navigation).
    6. Once a menu is selected, the font options will be revealed.

    I attached a screenshot for reference.

    I hope this helps. Thanks!

    Attachments:
    You must be logged in to view attached files.
  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.