Forum Academy Marketplace Showcase Pricing Features

Adapt the Fixed Margin (aligment) from the Responsive tab to the page width

Question
#1

Hello,
is there a way to change the Fixed Margin settings in the Responsive Tab based on the page width of the current user?
Right now I have a margin of 60px on the left side (because it looks good on wider screens that way). I collapse these margins when the current user is using a mobile phone. Because there I don’t need the 60px margin anymore.
For all groups I use the Fixed Margin “Left” setting. But for the mobile screens I want to have them set to “Centered” so that all elements will be places in the middle of the screen.

Is this achievable or do I have a wrong understanding of the responsive design engine?

#2

Hey @AlexK :wave:

I have done something like this before. Try making the element the full length of the page. Use a padding to get the alignment correct. Then when the screen size gets smaller, on the conditional of the element you can center the text and lessen the padding dynamically.

Does that make sense? If need be, I can do an example later when I’m at my computer.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
#3

Hi @J805,
that’s actually a pretty interesting idea. Unfortunately I forgot to mention that I’m using not only Text elements but also RGs which should be responsive by itself (quite a challenge). So when I wrap up my RG in another Group it changes its responsive behavior. Thus I was thinking if there is a way to really change the “Fixed Margin” settings or hack it with some sort of CSS or something like that.

I hope it’s somewhat understandable what I wrapped up here. :wink:

#4

Hmm :thinking:

There must be a way to do that with CSS. I think I remember getting stuck on the same thing.

My work around was to build two different elements on the page. One on top of the other. Then depending on the page size, I showed just the one I wanted.

Not the most elegant solutions, but it did work.

If you find the CSS code to get it to work, let me know. I would be interested in simplifying mine too.

Anyways, hope that helps a little. :blush:

#5

Right, that would be one way to do it. I was hoping to avoid having elements twice with the same content.
I’ll try to figure out how to do it in CSS. No fortune until now. But will let you (and the other folks here) know when I found a solution!

1 Like
#6

Sounds good. Yes, please let me know if you find the CSS code and I will make sure to save it to my collection. :blush: