PG Float left but full width

  • Resolved hebhansen

    (@hebhansen)


    2 years, 4 months ago

    Hey PG

    I can’t seem to figure out how to get PG to:

    – Use existing margins Right & Left
    – Apply full width to both margins in fx 3 columns
    – Stay to the left, when there is not enough posts to fill the grid.

    See example in link

    Will loyout allow this or can I do by CSS? Can anyone make the css, cause I can’t get it to work. I’m thinking something like float left, margin auto, width 100%…

    Thx great plugin

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @hebhansen,
    Go to the Edit mode of your post-gird. Then under General, there is an option called Text align. Just set its value to Left.
    Screenshot: https://i.imgur.com/1lHlPpj.png

    Let us know if it fixes the issue for you.
    Regards.

    • This reply was modified 2 years, 4 months ago by azizulraju.
    Thread Starter hebhansen

    (@hebhansen)

    @azizulraju

    Correct and now it floats left. Then I remove padding entirely to respect left margin edge. However 10px is enforced by plugin, hence, it is still 10px to the right of left margin.

    Floating left means right margin is way off. So I need auto margin and 100% width of each row and no padding on far right and far left but minimum 10px between posts…

    What CSS will do that?

    Hi @hebhansen,
    You can copy the CSS code below and paste it under the Custom Scripts => Custom CSS option.
    Screenshot: https://i.imgur.com/PAXEEA0.png

    CSS code :

    #post-grid-50294{
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
column-gap: 10px !important;
row-gap: 10px !important;
}

#post-grid-50294 .item{
margin: 0 !important;
}

    Note: You have to replace ID 50294 with your post grid ID! To find your post grid ID, go to All Post Grid, and under shortcode, you can find the ID.
    Screenshot: https://i.imgur.com/jcR123Q.png

    • This reply was modified 2 years, 4 months ago by azizulraju.
    Thread Starter hebhansen

    (@hebhansen)

    Hey @azizulraju

    I added the code to my child theme and nothing changes. For item I tried to add width: 100% !important but no change either.

    #post-grid-50294 is that a fixed reference inside your plugin that reaches all grids?

    Here is the page I’m testing on. Note: only “Inter Wars” is floated left and this is the one im currently testing. As you can see, margin is still indented and not filling the width. I am trying to get perfect margin both sides…

    • This reply was modified 2 years, 4 months ago by hebhansen.

    Please read my previous answer. I already told you to replace the ID 50294 with your post grid ID. I also gave you instructions on how to find your post grid ID.

    Hi,
    We didn’t hear you for a long time. I hope you resolved the issue.

    Thread Starter hebhansen

    (@hebhansen)

    @azizulraju

    I do think I have it sorted. I am changing theme and moving to block grids to do this for me. Thx a lot

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘PG Float left but full width’ is closed to new replies.