Mobile version display issues

[Manu]

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

[Manu]

Hello,

Can someone please reply to my message?

Thank you

[David Morgan]

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!

[Manu]

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

[David Morgan]

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!

[Manu]

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

[Manu]

Hi David,

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

Thanks

[David Morgan]

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!

[Manu]

That worked perfectly, thank you.

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

Best wishes,
manu

[Emily Morgan]

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

Thanks,
Emily

[Manu]

Yes,sorry!

The menu font. Please 🙂

[David Morgan]

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