Page 1 of 1
popeye theme text width in blog posts
Posted: Wed Sep 20, 2023 10:33 pm
by InvisibleRasta
hello guys, i am using the popeye theme and I was wondering if i can make the width of the text in the posts bigger. I have searched in the docs and couldnt figure it out myself.
Re: popeye theme text width in blog posts
Posted: Thu Sep 21, 2023 5:41 pm
by CCDzine
The width comes from the Bootstrap stylesheet.
Code: Select all
@media (min-width: 992px) {
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
Change instances of '50%' to what you like. Or better to override with your own, additional stylesheet.of a style block in the <head>.
Re: popeye theme text width in blog posts
Posted: Thu Sep 21, 2023 7:58 pm
by Edi
CCDzine wrote: ↑Thu Sep 21, 2023 5:41 pm
Or better to override with your own, additional stylesheet of a style block in the <head>.
You can do this by using the plugin HTML Code.
Re: popeye theme text width in blog posts
Posted: Fri Sep 22, 2023 7:02 pm
by InvisibleRasta
I tried to add this to HTML Code , head header and footer with this but nothing happens:
@media (min-width: 992px) {
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 75%;
}
}
Re: popeye theme text width in blog posts
Posted: Fri Sep 22, 2023 7:46 pm
by CCDzine
Did you put it in a style element?
Code: Select all
<style>
@media (min-width: 992px) {
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 75%;
}
}
</style>
Re: popeye theme text width in blog posts
Posted: Fri Sep 22, 2023 9:21 pm
by InvisibleRasta
i am not sure what you mean. where do i have to add it and what?
Re: popeye theme text width in blog posts
Posted: Sat Sep 23, 2023 12:23 pm
by Edi
You have to define the code as CSS at the beginning with
and at the end with
See for example:
https://www.w3schools.com/html/html_css.asp
By the way: W3Schools is a great source to learn CSS.
Re: popeye theme text width in blog posts
Posted: Sun Sep 24, 2023 5:44 am
by indocreativemedia
Hi,
We would like to suggest different method that might be easier to do, using javascript.
Steps to implement this method:
1. Activate plugin HTML Code (skip this if plugin already activated)
2. Put this code to Footer section:
Code: Select all
<script>
$(".col-lg-6").removeClass("col-lg-6").addClass("col-lg-8");
</script>
3. Save and check your website.
Note:
a). As far as we checked, there's only 1 instance of col-lg-6 on popeye theme, so this method is safe to be implemented.
b). if the new width still not as to your liking, change "col-lg-8" with higher number up to maximum of 12, for example: "col-lg-9" or "col-lg-10" etc.