popeye theme text width in blog posts

InvisibleRasta · Wed Sep 20, 2023 10:33 pm

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.

CCDzine · Thu Sep 21, 2023 5:41 pm

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>.

Thu Sep 21, 2023 7:58 pm

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.

InvisibleRasta · Fri Sep 22, 2023 7:02 pm

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%;
}
}

CCDzine · Fri Sep 22, 2023 7:46 pm

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>

InvisibleRasta · Fri Sep 22, 2023 9:21 pm

i am not sure what you mean. where do i have to add it and what?

Sat Sep 23, 2023 12:23 pm

You have to define the code as CSS at the beginning with

Code: Select all

<style>

and at the end with

Code: Select all

</style>

See for example:

https://www.w3schools.com/html/html_css.asp

By the way: W3Schools is a great source to learn CSS.

indocreativemedia · Sun Sep 24, 2023 5:44 am

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.