Get structure group 2 blocs to work how I'd like

Hey all,

I’m toying around with the “structure group 2 blocs” bloc. I’d love to have it behave like on the original site here (the part with the text on the left and my wife’s image on the right), just before the block quote.

When adding the 2 blocs group, it looks out of the box like this:

I tried inspecting the code and hoped that adding a class of container to the group would help, which it did - sort of - but when I do that, it has more spacing to the left and right than the blocs above, which is not what I want to achieve:

I ran into the exact same problem, and still don’t have all of the oddball alignment issues sorted in a site redo attempt at the moment.

I’d suspect it’s in the width settings of the new container - might be worth checking those versus the rest of the site’s - if you have one set to a max pixel width and another to 100% with no max, for example, you can get your sections out of sync on left and right alignment.

I think the last time I hit that, I had one page working more or less, and wound up cloning it to create the second one, as I wasn’t immediately able to find the issue in the class…

Yeah, I thought as much, but all blocs do have the same setting when it comes to their width (set to 1200px in the project settings). The wrapping container (.blocs-group) has no settings I can apply. I tried adding classes like .container, which makes the blocs-group smaller than single blocs. I tried .bloc, which makes the group a bit smaller, but not small enough. Even worse with .l-bloc.

While some things are very easily done with blocs, some stuff that I think should be easy, drives me mad. Still, I prefer Blocs over Rapidweaver.

I do not understand why using a group block, when you can easily make the site with a normal block and two columns … The site that is shown in the link, it is really easy to do and fast in blocsapp does not problem.

I don’t really understand the issue you are experiencing. A two column structure bloc is intended for use where you want each bloc to sit side-by-side rather than one above the other. The reason you may wish to do that is so that the blocs can have different background colours or images.

A normal two column bloc is ONE bloc that can only have one backgound colour or image set across it’s full width. However, it does have two columns, one of which can contain text, the other an Image. So, what is the issue you are experiencing? Is there a specific effect you are trying to achieve?

I agreed with the above, I wouldn’t use a group.

Here is some info on what a group is…

What I did notice @pumpkin is that you had the text wrapping the image as the window size decreases, you can do everything you want using 1 column. Here is how.

The settings I added for the image was “float right” and paddings on left and bottom of image, and width at 45%. On the small breakpoint just set that width to 100%. Adjust all this to suit how you would like it to flow across breakpoints.


I see, thanks for the replies and the video. Guess I suffer from thinking way too complex or still in Rapidweaver ways :roll_eyes:

I thought I could have the image on the right side scale to fill the entire right half of the section, even when reducing the page width. And have it sit below the text on small screen sizes. Thought a structured bloc group would be perfect for that.

Although you can do something like that, you need to consider how well that would work with a portrait image. It works a lot better with a background or non-focused images in my opinion.

Good thought. That sure is true.

You could do it with fixed proportions, so you can keep the image framed correctly. There is compromises with that though. But that’s responsive design I guess.

1 Like