How to fix this Block Grid?

Support
#1

Hi I am trying to match the appearance of the Classic Prompt using a block grid element (want to customize button, add text to right column etc.) but having some issues:

  1. How can I properly center the button in the column? I have tried everything.

  2. How can I change the width that the block grid breaks at? It gets way too skinny before breaking and looks weird. :slight_smile:

Page URL is in secure note for reference. Thanks! :slight_smile:

#2

PS - The Block Grid in question is in Section 2 on the page, want it to match the Classic Prompt in Section 1. Thanks again.

#3

Hey @ddctc,

May I ask why you’re recreating the Classic Prompt with Block Grid? That requires customization and that falls outside the scope of our support. Please tell us what you don’t like with the Classic Prompt and maybe we can help tweaking it a bit. Recreating with Block Grid requires drastic customization.

Thank you for understanding.

#4

Hi, I think all it needs is the button centered to match the Classic Prompt? As you can see they look almost identical right now.

For feedback, the reason that I want to use a block grid is so that I can add additional content in the right column other than just a button, as I have updated in my example in Section 2.

But separately, I would like to improve the breakpoint behaviour of the block grid, because it gets much too narrow before it splits. I can create another ticket for this if need be.

Thanks!

#5

Ok I think I figured out the breakpoint. I added this to my page CSS:

@media (max-width: 900px) {
    .x-block-grid.two-up>li {
    width: 100%;
    margin-right: 0;
}

And it seems to work.

Now I just can’t figure out how to center content inside the right column of my block grid.

Thanks again!

#6

Hi there,

You may change your CSS to this :slight_smile:

 @media (max-width: 900px) {
    .x-block-grid.two-up>li {
    width: 100%;
    margin-right: 0;
    text-align: center;
   }
    .x-block-grid.two-up>li .x-btn {
   display: inline-block !important;
   }
}

That should do it. Cheers!

#7

Hi thanks.

I tried your code but it didn’t seem to work for me.

Also, I want all content within the right column centered at all widths, not just when breaking for mobile.

Thanks so much for your help!

:slight_smile:

#8

Hi,

There is a syntax error in your code preventing all codes below it from working.

Please remove /* and */ and …

eg.

@media screen and (min-width: 767px) {
  #navbar_small {
    display: none !important;
  }
} 


@media screen (max-width: 767px) {
   
}
#9

Thanks I fixed the commented out code but the page CSS still does not center the right column content. Please see screenshot attached to secure note.

PS - I can get it “centered”, but it definitely does not look centered—still favours the left side…

#10

Hello There,

I was able to resolve the issue by modifying your css. I have this added:

.x-block-grid.valigned li {
    display: inline-block;
    float: none;
    vertical-align: middle;
    text-align: center;
    width: 50%;
}

You might notice some spaces and that is because of your column padding.

Please check the page now.

#11

Thanks Rue that looks good! Now how would I target just the 2nd column?

#12

Hey There,

You can target the second column by using this css selectors; for example:

.x-block-grid.valigned li:nth-child(2n){
    background-color: red;
}

I am using a background color property so that you can easily spot that the code is working or not.

Please let us know how it goes.

#13

Hi sorry I can’t put it all together. Here’s what I have now:

.x-block-grid.valigned li:nth-child(2n){
  display: inline-block;
  float: none;
  vertical-align: middle;
  text-align: center;
  width: 50%;
}

.x-block-grid.two-up>li .x-btn {
   display: inline-block !important;
   }

@media (max-width: 900px) {
    .x-block-grid.two-up>li {
    width: 100%;
   }
}

But this broke the block grid so it’s not in two columns any more. Ha!

#14

Hello There,

In your code, the float and display attribute will destroy the alignment. What would you like to do with the second column. Can you please explains what you have in mind?

Thanks.

#15

Hi this is what I am going for.

I started a new page with none of the clutter, found in secure note.

Basically I just need to center the content vertically and I think I’ll be good.

Thanks :slight_smile:

#16

Hello There,

I went ahead and edited the page. I added this css:

.x-block-grid.valigned li:nth-child(2n){
  padding-top: 60px;
  text-align: left;
}

Please do not be confuse because at the moment there is a bug in the preview and the grid items displays as a block. But in the actual or live page, it should display perfectly.

Please check the page now.

#17

Thanks I appreciate your help.

Is there a way to center it vertically rather than just add a padding? Just curious.

#18

Hi,

Yes, there is another way.

Please replace the code provided with this


.x-block-grid.valigned .x-block-grid>li {
    display:inline-block;
    vertical-align:middle;
    float:none;
}
#19

Hi there,

Please add the following CSS code in Pro > Launch > Theme Options > CSS.

ul.x-block-grid.valigned.two-up {
    display:  flex;
    align-items:  center;
    margin-bottom: 0;
    padding: 20px;
}


li.x-block-grid-item h2 {
    margin-top: 0;
}

ul.x-block-grid.valigned.two-up:last-child li p {
    margin-bottom: 0;
}
.x-block-grid.valigned li:nth-child(2n) {
    padding-top: 0;
}

Please let us know how it goes.

Best regards.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.