# Please help. Struggling with interface and alignment of components/margins **URL:** \ **Category:** Beginners\ **Created:** [May 11, 2026, 5:21pm UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586 "2026-05-11T17:21:51Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)\ **Post date:** [May 11, 2026, 5:21pm UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/1 "2026-05-11T17:21:51Z")
I’ve been learning html and css and been managing quite well if I say so myself to make some nice things, but I didn’t buy Pinegrow to do it all by hand so I’m trying to use the UI to place things and lay them out as I want them, hoping that I can get faster at it than I can code it. However I’m really struggling. Especially as I think I’m bumping into Bootstrap vs Pinegrow issues. Here’s what I’m trying to accomplish: I have created a Row in a Section in the Main Body part of my html. Inside the row, I want to place an animated gif, in the centre of the screen horizontally and vertically and then when the gif has finished I want to fade it out. At the moment I can’t get the image box to move from hugging the left side. So I removed the image and replaced it with a heading (as you will see in my screenshot below) and I have multiple ‘margins’ or ‘padding’ but on the UI for Pinegrow these are not shown. So question 1: How do I strip these using the the Pinegrow UI for items 1, 2 and 3? Question 2: How do I place an animated gif in an image component and have the row centre is horizontally, using the Pinegrow UI? Question 3: Can I use Pinegrow UI to autoplay the gif (and do a fadeout/other things when it’s finished playing) ONLY on the first time IN THE CURRENT SESSION that a user visits this page i.e. Can I use Pinegrow UI to set/read the SESSIONSTORAGE (or even a cookie if I have to) or do I have to do all that in code? I hope someone doesn’t mind taking the time to help. I really want to get fast and better at Pinegrow but I’m struggling. ![Screenshot 2026-05-11 at 14.29.12](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/ec55bb360a5c0699bd6b42a6e00104f5a8642a3d.png) ---
**Author:** ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7134_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\ **Post date:** [May 12, 2026, 12:15am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/2 "2026-05-12T00:15:04Z")
> [@TEMPEST](#): > > So question 1: How do I strip these using the the Pinegrow UI for items 1, 2 and 3? You say you can’t see the margin and padding in the panel? Are you confusing these two tabs? Element Properties & Style ? ![CleanShot 2026-05-12 at 12.09.55@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/63e34d2a2b53cbc3872d68e648fa5115abf5240f.png) Think of the Element properties as a visual tool for framework classes (and for attributes) eg mt-4, and the style one for creating and editing custom classes and styles, including inline. So if you create CSS, it won’t show in the Element Properties tab. > [@TEMPEST](#): > > Question 2: Like this? ![CleanShot 2026-05-12 at 11.54.31@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/42f85bde82d0e6b2742bad717e27d871d6aad7d5.jpeg) Here is an [example project](https://www.dropbox.com/scl/fi/mjy9c784vof3aqfwifi4r/Pinegrow_Center_GIF__Example.zip?rlkey=mt599f0fsalstj6hfa7jxcts8&dl=1) using Bootstrap. There are many ways to do it though. But it’s all basically the same. > [@TEMPEST](#): > > Question 3: Can I use Pinegrow UI to autoplay the gif (and do a fadeout/other things when it’s finished playing) No, you can’t do that with a GIF, you can with other things like Lottie files, etc. If you want to control this, use a video and javascript. You could technically use CSS, and use the length of the GIF, and animate a fade out, BUT, it’s not going to be perfect based on lots of variables like browser load time etc. And yes, I would use session storage, over cookies. But you have to code the javascript for this yourself. Unless you’re using the built in Interactions, which is basically a GSAP editor, then you have to code all javascript yourself in Pinegrow. ---
**Author:** ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)\ **Post date:** [May 12, 2026, 1:04am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/3 "2026-05-12T01:04:38Z")
Thanks for taking the time to reply. I don’t think you understood my first question at all. I’ll try again: When I place elements in my bootstrap project using the Pinegrow UI (NOT manually using code) I have these weird gaps - are they margins? Padding? Space for a scrollbar? I don’t want these. I want things to be full width. But every thing I insert has these. I think they come from bootstrap but I’m not sure, but either way I want rid. Since I posted this question I was messing about and found if I manually used the UI to set a 0 margin and 0 padding on every side for the element, then these vanished - BUT - that’s a huge PITA and waste of time to manually do that for EVERY. SINGLE. ELEMENT I insert onto a page. Is there a fix or better way around this? What am I doing wrong? ---
**Author:** ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7134_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\ **Post date:** [May 12, 2026, 1:18am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/4 "2026-05-12T01:18:57Z")
Yeah, I didn’t follow what you were saying. Thats gutters in Bootsrap > **[No gutters - Gutters](https://getbootstrap.com/docs/5.3/layout/gutters/#no-gutters)** > > Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content. | Gutters are the padding... ---
**Author:** ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)\ **Post date:** [May 13, 2026, 12:25am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/5 "2026-05-13T00:25:23Z")
Right… so my question still stands. How do I remove these globally so that I don’t have to F\*\*\* around every time I insert a component element onto a page using Pinegrow UI? Can Pinegrow disable these for every element? ---
**Author:** ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)\ **Post date:** [May 14, 2026, 6:09am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/6 "2026-05-14T06:09:04Z")
Project has been deleted… ---
**Author:** ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7134_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\ **Post date:** [May 14, 2026, 7:01am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/7 "2026-05-14T07:01:46Z")
Oh yeah, I flushed out my temp dropbox folder (too much junk there). It was a couple of days sitting there to be fair. 🤷‍♂️ ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [May 14, 2026, 8:09am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/8 "2026-05-14T08:09:08Z")
Hi @TEMPEST, 1. Pinegrow cannot disable standard Bootstrap behavior. 2. Imho, the best and easiest way to customize how Bootstrap behaves is to use Pinegrow’s ‘Customize & update Bootstrap theme’ feature. Note: From there, it’s up to you to create the recipes that will let you get your projects started with your custom version of Bootstrap. We documented it for Bootstrap 4, but the same idea applies to version 5: > **[Customize Bootstrap 4 themes | Pinegrow Web Editor](https://pinegrow.com/docs/bootstrap-visual-editor/customize-bootstrap-4-themes/)** > > See how you can use Pinegrow to customize your Bootstrap 4 theme by modifying Bootstrap SASS variables and adding CSS rules. Best regards. ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [May 14, 2026, 9:39am UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/9 "2026-05-14T09:39:13Z")
I figured it was worth checking. I just tested this using the customization in Pinegrow. I changed the variable $grid-gutter-width: 1.5rem; to $grid-gutter-width: 0; and the gutters disappear. ---
**Author:** ![TEMPEST](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tempest/32/6851_2.png) [@TEMPEST](https://forum.pinegrow.com/u/TEMPEST)\ **Post date:** [May 15, 2026, 7:52pm UTC](https://forum.pinegrow.com/t/please-help-struggling-with-interface-and-alignment-of-components-margins/11586/10 "2026-05-15T19:52:26Z")
This is perfect - just what I was hoping for! Thank you for posting and double-checking.