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.
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.
Here is an example project using Bootstrap. There are many ways to do it though. But it’s all basically the same.
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.
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.
