[Resolved] Make view grid output right aligned

[Author]

Posts

[martinE-4]

Tell us what you are trying to do?
I'm trying to output a grid view and currently it is beginning on the left. I have a 4 column grid but if there is only 1 or 2 entries I would like them on the right. I'm designing a footer, using the block element in GeneratePress Premium and it works well bringing in Toolset fields and views wherever I want them. But for this purpose I need it right aligned

I enclosed a picture showing what I am trying to do. I tried an unformatted view loop output but it still put one logo UNDER the other. I really just want output that puts out the loop items (logos), 1 after the other with no new line, maybe just a couple of spaces. Is there any way to do this with Toolset Blocks?

There might be a way to do it with classical views but I have already built the site using Blocks and I don't think we can use both in the same site can we?

If we can, do you have instructions on how to do this in Toolset Views classic?

[Waqar]

Hi Martin,

Thank you for contacting us and I'd be happy to assist.

To achieve this, you can follow these steps:

1. You'll Create your view using the blocks editor in the "Grid" loop style.

2. In the "View" block's "CSS Classes" field, you'll include a special class, for example, "right-aligned-wrapper".
( screenshot: hidden link )

3. Next, in the same "View" block's "Custom CSS", you can include some code to make the grid direction change to "right to left":
( the order of the view's results will also inverse, but you can adjust that through the sort direction option in the view's ordering settings )

.right-aligned-wrapper .js-wpv-loop-wrapper > .tb-grid {
direction: rtl;	
}

On a side note, you can work with classic and blocks based views on the same website, by selecting "Show both the legacy and Blocks interface and let me choose which to use for each item I build" for the editing experience option at WP Admin -> Toolset -> Settings -> General.

regards,
Waqar

[martinE-4]

That CSS and class worked great. I had to define the style in the main theme css customizer with GeneratePress though. For some reason the css box in the view block did not work (although I did try it there several times to be sure). Possibly because I was using this view in an element block defined by GP's theme. In any event all is good now. Thanks again!