Forum Documentation Showcase Pricing Learn more

Group alignment


#1

Dear,

When I create a group and align it under my navigation bar it does not appear just like in the builder. When I create a floating group the alignment is working fine.

Please check group Group ALIGNMENT? and Floating group


#2

Hi @Codeables :slight_smile: If you need those groups to ‘stick’ to the left side and line up, you will want to click each of the groups in the responsive editor, and select “fixed-margin: left aligned”.

This will make the margin (whitespace) on the left side of each of those elements “fixed” to the left side (as long as you select “fixed margin: left” for both groups. If you click on the element and select “Explain Box Margins”, you’ll see that now the left-side margin is red, signifying that it will not re-size as the page is stretched or minimized:

I’m assuming they currently have a centered margin? If they do, and the groups are not exactly the same size, with the same responsive settings, they will not align to the left consistently (unless the page width is the exact original width of the page when previewed-- 980 pixels, for example).


#3

Thankyou for the assistance. I have set them to left side fixed margin but this doesn’t solve the issue unfortunately.

Please see


#4

Ah, it might have to do with the minimum widths of the groups (I think!) Can you share a link to the app editor? :slight_smile:


#5

My page width is 1200, I have tried a lot of stuff including removing the header and left menu to see if it has effect, also tried grouping.

The alignment is different in preview mode / live mode


#6

Right, all of the elements’ responsive settings affect each other so it is hard to tell in the screenshots, but I’d be happy to take a look at the editor if that’s helpful! You can share the link by going to Settings --> General --> Application Rights: Everyone can Edit


#7

I just found out it basically happens when some groups overlap eachother. I created my own menu like following images below. But I believe it shouldn’t have a difference in live/preview mode.

3


#8

When I put it like this below the problem is solved but now I have a header that covers the entire upper navigation part. Is this a bug?


#9

@Codeables Ohh! Right, It’s not a bug - unfortunately overlapping any elements (with the exception of floating groups) will cause the responsive settings to be unpredictable (unless the element on top or bottom is a floating group).


#10

Hmm now I understand why people use the slideable menu instead of creating it.


#11

It’s definitely still possible! :slight_smile: Here’s a demo with a similar setup for the floating groups: How can I create a slide-out like Magento?


#12

I find it difficult that responsive settings for mobile also effects the desktop. I need to set fixed margin to center for mobile but not for desktop. This is causing my alignment issue