Adjust KOH Terminal width?
I'm testing Blundit at the moment, and right not KOH Terminal is my favorite theme. However, I'd prefer that it made better use of screen real estate and was wider. Actually, this is my general problem with a lot of themes.
Is there a way to adjust the width of KOH Terminal? Even better, is there a general universal trick for adjusting the width of any theme? I tried the suggesting in this old thread but it didn't work:
viewtopic.php?p=8956
Is there a way to adjust the width of KOH Terminal? Even better, is there a general universal trick for adjusting the width of any theme? I tried the suggesting in this old thread but it didn't work:
viewtopic.php?p=8956
- Edi
- Site Admin
- Posts: 3121
- Joined: Sun Aug 09, 2015 5:01 pm
- Location: Zurich
- Has thanked: 54 times
- Been thanked: 78 times
- Contact:
The theme KOH Terminal uses Bootstrap with a fixed container (CSS class .container). The width depends of the size of the screen:
https://www.w3schools.com/bootstrap4/bo ... ainers.asp
To change this you have to add your own media queries.
https://www.w3schools.com/bootstrap4/bo ... ainers.asp
To change this you have to add your own media queries.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Thanks for the quick reply! I appreciate your effort to "teach a man to fish". However I'm afraid your assumption of my baseline understanding was a bit too generous.Edi wrote: ↑Wed Jun 15, 2022 4:19 pm The theme KOH Terminal uses Bootstrap with a fixed container (CSS class .container). The width depends of the size of the screen:
https://www.w3schools.com/bootstrap4/bo ... ainers.asp
To change this you have to add your own media queries.
What file is the "container" CSS defined?
Can you elaborate as to what you mean by "add your own media queries"?
Thanks!
- Edi
- Site Admin
- Posts: 3121
- Joined: Sun Aug 09, 2015 5:01 pm
- Location: Zurich
- Has thanked: 54 times
- Been thanked: 78 times
- Contact:
The modification of themes need some basic understandings of CSS and Bootstrap. There are a lot of tutorials about it.
For example if the width of your screen is more than 1200 px you can use the following media query:
This instead of the media query with the max-width of the theme:
You can do this by adding the following to the field "Head" of the plugin HTML Code:
But be aware that Bootstrap uses several media queries for different screen sizes.
For example if the width of your screen is more than 1200 px you can use the following media query:
Code: Select all
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
Code: Select all
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Code: Select all
<style>
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
</style>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets