Layout and Centering Issue on iPhone Browsers in Hugo Blox Résumé Theme

[vljlangen]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/HugoBlox/hugo-blox-builder/issues?q=is%3Aissue
• This issue is not a question, feature request, or anything other than a bug report directly related to Hugo Blox Builder. Please post those things on Discord: https://discord.gg/z8wNYzb

Description

Hi,

I’ve encountered an issue with the Hugo Blox Résumé theme when viewing pages on an iPhone. The text in the "role," "organizations," and biography (reading e.g.: "I am currently Director...") sections does not properly fit within the iPhone browser window. This problem occurs on both Safari and Chrome browsers.

Additionally, there is no centering applied to the "role" and "organizations" sections, causing the text to appear left-aligned instead of centered, which further affects the layout.

This issue can be easily demonstrated by visiting the official demo page of the Hugo Blox Résumé theme on an iPhone, or by checking my MWE GitHub repo and its counterpart web page on an iPhone.

Current Workaround: These issues can be fixed manually by adding custom CSS to adjust padding and centering. The edits can be made in the custom.css file located in the assets/css directory, as follows:

.mb-1 {
  padding: 0 20px 0 20px;
  text-align: center;
}


.mb-2 {
  padding: 0 20px 0 20px;
  text-align: center;
}


.bio-text {
  padding: 0 20px 0 20px;
}

However, this solution is cumbersome and outside the scope of what most users would expect to have to do.

I believe addressing this would greatly improve the mobile user experience for the Hugo Blox Résumé theme.

Thanks for your time!

Reproduction Link

https://github.com/vljlangen/resume-mobiletest

Steps to Reproduce

1. Open the official demo page of the Hugo Blox Résumé theme on an iPhone, or check my MWE GitHub repo and its counterpart web page on an iPhone.
2. Navigate to the sections for "role," "organizations," and biography.
3. Observe that the text in these sections does not fit within the browser window on iPhone and is left-aligned with no padding.

Expected Result

Proper padding and alignment for text in the "role," "organizations," and biography sections on mobile devices.
The layout should adapt smoothly to smaller screens like those on iPhones.
The text in the "role" and "organizations" sections should be centered.

Actual Result

No padding is applied to the "role" and "organizations" sections on mobile devices.
The "role" and "organizations" sections are not centered and are left-aligned instead.
As a result, the text is barely readable, as it is about to run off the screen.

What Hugo Module versions does your site use?

module github.com/HugoBlox/hugo-blox-builder/starters/blog

go 1.19

require (
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2-0.20231125200520-804c70f7efb8
github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.3.1
)

What operating system(s) are you seeing the problem on?

iOS

What browser(s) are you seeing the problem on?

Safari

Which Hugo Blox template are you using?

Hugo Blox Résumé Theme

What version of Hugo are you using?

hugo v0.140.2+extended+withdeploy darwin/arm64