CSS elements positioning (using Pinegrow)

Hi

I am using Pinegrow to make a simple website, and I have faced several issues that surprise me.

There seems to be no option to freely move elements, and I don´t understand where to modify code to adjust it “manually”.

There´s a “box” that is in the way, and if I delete it, all the elements around it, jump around.

Before and after pictures.

Any help deeply appreciated

1 Like

Hi. Not trying to brush you off, but I wonder if you’ve asked this in the Pinegrow forums?

Anyhow, if you’re just building a simple site, do you need a tool like this? I just find they make life harder.

1 Like

I did, and the response was a bit strange, to be frank. Was referred to a guide that said nothing about it.

Well, I want to use a program that shows the code.

Do you know anything about the topic?

1 Like

I know nothing about Pinegrow. However, many of these web builder sites deliberately don’t allow you to add your own code.

Not about Pinegrow, but certainly about code. Does Pinegrow allow you a full code view, or do you only have access to the code editor pane on the side?

Unfortunately, most visual editors these days don’t allow much access to the code. I used to like Dreamweaver, as it does/did give full code access, but it’s too expensive for me know, and I haven’t found a useful alternative (that also comes with FTP etc.).

OK, so this is the mock up I´m working on now.

http://provisorypage.000.pe/?i=1

At the bottom is a CSS-section “What customers say”.

I´ve adjusted the position of the heading with a tool in the CSS-tab, and that looks fine in the editor, but there´s no mention of “positioning” in the code, and the end result is the same as it was before I used this tool.

Screenshot at the bottom.

P.S.

When I try to move elements around in this program, it allows me to move them “a little bit”, as in they always stick to the top, or the bottom, or the side. What I would really want is to move them freely. Tried to look at this in Dreamweaver, but I found no apparent way to move things around at all.

A scary question that keeps coming back is; do I have to put coordinates for every single element, or use a ruler on the screen, or something?

Unfortunately, it looks like you may need to brush up on your css skills a little as positioning things in css is not as simple as providing coordinates.

Generally elements take part in the flow of the document where one element follows another naturally and without specific positioning. It’s the layout scheme such as flex or grid that determines how things work together.

You can use margins to nudge things around while maintaining the flow of the document but you would only do this in small amounts. Any significant changes would require a more thorough knowledge of the positioning scheme in place.

For example I see that the link you posted shows the h2 being moved by bottom:-28px which drags the text on top of the following content generally you would not use position:relative with co ordinates in that way. It requires a deeper understanding of css to know why this is a problem.

It looks from your link that your editor panel allows you to make changes to the css but to make significant changes you will have to spend a little time on understanding some of the css layout concepts.

Editor panels are generally good for making minor adjustments such as colors and fonts and margins etc but not for large layout shifts as that will likely involve the parents of the element concerned.

Do you have a live version of the page that we can look out as it may be that you can add a custom css file to make the changes you need?

2 Likes

“Live”? What do you mean by that?

I have these two pages to draw inspiration from.

I looked around a bit, and it seems making coordinates yourself requires a deeper layer of programming?

If so, what program could one use to move things around freely? I don´t want all the fancy pants stuff on Wix or Squarespace, I just want a simple editor with the basics in place.

A version that is online where everyone can visit it like any other webpage including the one you are reading this message on :slight_smile:

If you have the site online and you tell us what you are trying to change then we can suggest css that you can add to your custom css to accomplish this.

Css does that on its own. You don’t need a program to do it and there aren’t really any that can do it properly anyway. Most web builders just allow you to put stuff inside their already preset layout designs.

Either you accept the basic defaults of these editors or you instead begin a steep learning curve and learn how to do it yourself with vanilla css and html. A web page is not a picture and moving stuff around is quite complicated for beginners as there’s a lot you need to know first.

As mentioned in the first post you probably should be consulting the Pinegrow community as I doubt anyone here will have used it or heard of it. There should be some documentation that lets you know what can be accomplished easily.

Where would one learn about that then?

There are lots of free sites around that can get you started like the MDN site which is a great resource.

Sitepoint also has its own courses but they are subscription based. There are many other sites around that you can google quite easily.

I suppose the question is whether you want to learn CSS or you are just interested in this one thing only, If you just want to do this once and are not bothered with learning anymore afterwards then you are basically stuck with doing what your editor offers (which is fine as long as that is all you intend to do).

I started out using a visual editor and also getting frustrated that I couldn’t move things around properly. Luckily, that old editor (a precursor to Dreamweaver) allowed full access to the code, and as I began to explore how that code worked I discovered that it was far easier to work with the code than with the visual editor, and that doing so was far more powerful. As Paul said, though, there is an investment of time involved, and it may not be worth it if you are just doing one site. (At the time, I just wanted one site, but learning about the code made me want to build more websites!)

Everyone is different, but in my case I got frustrated trying to figure out how the code worked from experimenting and searching the Web, so I got a good book on HTML and CSS, curled up with it for two weeks, and emerged from the other side as a budding web designer.

2 Likes