Maximum screen width for posts #996

vignesh99 · 2022-06-12T10:22:59Z

vignesh99
Jun 12, 2022

Hello,
I want to increase the text space to 90% -100% width for my posts (not all pages of the blog), similar to what is asked here. I had a look at the _layouts/posts.html file and saw that it uses the base layout. It also had the following lines

<div class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %}">
  <div class="row">
    <div class="{% if page.full-width %} col {% else %} col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 {% endif %}">

......

                  <iframe src="https://ghbtns.com/github-btn.html?user={{ gh_user }}&repo={{ gh_repo }}&type=star&count=true" frameborder="0" scrolling="0" width="120px" height="20px"></iframe>
                {% when 'watch'%}
                  <iframe src="https://ghbtns.com/github-btn.html?user={{ gh_user }}&repo={{ gh_repo }}&type=watch&v=2&count=true" frameborder="0" scrolling="0" width="120px" height="20px"></iframe>
                {% when 'fork'%}
                  <iframe src="https://ghbtns.com/github-btn.html?user={{ gh_user }}&repo={{ gh_repo }}&type=fork&count=true" frameborder="0" scrolling="0" width="120px" height="20px"></iframe>
                {% when 'follow'%}
                  <iframe src="https://ghbtns.com/github-btn.html?user={{ gh_user }}&type=follow&count=true" frameborder="0" scrolling="0" width="220px" height="20px"></iframe>

It has if page.full_width condition, but don't know what the value of that variable is. I am looking for a simple change in a file like this to make this possible.

If not possible for only the posts, at least if you can suggest a change that makes white borders to a minimum across all pages of the blog, that would also be helpful. I am new to css/jekyll/html, and I need an urgent fix to put up my post. So any suggestions are welcome. Thanks.

EDIT :
I added the following commands to the beginning of my _layouts/posts.html file :

<head>
<style>
div {
  margin-right: 15px;
  margin-left: 15px;
}
</style>
</head>

Still no change.

Answered by daattali

Jun 12, 2022

See the advanced parameters section

Specifically, use full-width: true in the YAML parameters of a page you want to make full width.

This is a parameter that can get added on a per-page basis. If you want to apply it to all pages, read up on how to use default YAML values in jekyll (you can see an example in the config file that already exists, scroll to the bottom and you'll see a default section).

View full answer

daattali · 2022-06-12T14:32:25Z

daattali
Jun 12, 2022
Maintainer

See the advanced parameters section

Specifically, use full-width: true in the YAML parameters of a page you want to make full width.

This is a parameter that can get added on a per-page basis. If you want to apply it to all pages, read up on how to use default YAML values in jekyll (you can see an example in the config file that already exists, scroll to the bottom and you'll see a default section).

6 replies

vignesh99 Jun 12, 2022
Author

One small issue I observed @daattali . The headers do not take centre or go to the corners, but stay in the same place they were without full-width. Suggestions to fix this?

vignesh99 Jun 12, 2022
Author

Also, can I make the full-width option have some margin (90% page-width for example). Because right now if I insert a video, it is overshooting vertically. I saw this statement in the page.html :
<div class="{% if page.full-width %} container-fluid {% else %} container-md {% endif %}">
<div class="{% if page.full-width %} col {% else %} col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 {% endif %}">
Where can I modify this container-fluid or col variable to get 90% width? Can you please answer the above two questions @daattali

daattali Jun 12, 2022
Maintainer

I don't now off the top of my head, any answer I would give would require me to look into the CSS and HTML files in the same way you would need to.

vignesh99 Jun 12, 2022
Author

Ok, I understand. Can you tell me how to change the default width that you have set for the body paragraphs in all pages? I will modify that itself to 90% width if I can.
Below is a piece of code from /assets/css/beautifuljekyll.css where I found your parameters for body. I added margin-left: 1.5rem and margin-right: 1.5rem to try to change the default width on all pages, but did not work. I am quite certain that the default value for margin or page-width must be defined in this file. Please let me know if you can find it.

body {
  font-family: 'Computer Modern Serif','Droid Sans', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.125rem;
  color: {{ site.text-col | default: "#404040" }};
  position: relative;
  background-color: {{ site.page-col | default: "#FFFFFF" }};
  margin-left: 1.5rem
  margin-right: 1.5rem
  {% if site.page-img %}
  background-image: url({{ site.page-img | relative_url }});
  background-attachment: fixed;
  {% endif %}
}

Also, I very much appreciate the help you are providing, thank you.

BhargavRajGuru Dec 20, 2023

@vignesh99 If you have found the solution, please let me know. I also want to change the content width.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maximum screen width for posts #996

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Maximum screen width for posts #996

vignesh99 Jun 12, 2022

Replies: 1 comment · 6 replies

daattali Jun 12, 2022 Maintainer

vignesh99 Jun 12, 2022 Author

vignesh99 Jun 12, 2022 Author

daattali Jun 12, 2022 Maintainer

vignesh99 Jun 12, 2022 Author

BhargavRajGuru Dec 20, 2023

vignesh99
Jun 12, 2022

Replies: 1 comment 6 replies

daattali
Jun 12, 2022
Maintainer

vignesh99 Jun 12, 2022
Author

vignesh99 Jun 12, 2022
Author

daattali Jun 12, 2022
Maintainer

vignesh99 Jun 12, 2022
Author