Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom CSS - Width of text rendered on Desktop Browser #667

Open
yonz2 opened this issue Dec 12, 2023 · 1 comment
Open

Custom CSS - Width of text rendered on Desktop Browser #667

yonz2 opened this issue Dec 12, 2023 · 1 comment
Milestone

Comments

@yonz2
Copy link

yonz2 commented Dec 12, 2023

I would like to change the width of the rendered text (on desktop). Right now it's centered and uses only ca. 33% of the width. Yes, I have tried adding a custom CSS File. (assets/ananke/css/custom.css) And reference it in the param section of my hugo.yaml:

params:
  custom_css:
    - custom.css
  text_color: black

My Initial test was simple:

p {
    text-align: left;
  }

But nothing happens. So my question is: What (exactly) do I have to put in my custom.css file to a) let the text (article) use more of the screen, and b) Left Align the Body Text

Any help will be much appreciated!
Yonz

@roshanwaa
Copy link

Custom CSS Contribution

Purpose:
This custom CSS aims to address the issue where the rendered text width on desktop browsers
is not utilizing enough screen space. The following changes have been implemented:

  1. Left-align the body text for better readability.
  2. Remove constraints on the maximum width of the body content to allow it to use the full width.

Note:
It's important to test these changes thoroughly on different browsers and screen sizes to
ensure a consistent and visually appealing experience.

Author: Roshan Kumar
Date: 09 Jan 2024

Feel free to review and provide feedback. Thank you!

body {
    max-width: none; /* Removes the maximum width constraint */
}

article {
    max-width: 100%; /* Use the full width of the parent container */
    margin: 0 auto;  /* Center the content if needed */
}

p {
    text-align: left !important; /* Left-align the text */
}

@davidsneighbour davidsneighbour added this to the unplanned milestone Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants