I'm creating my first site in RFF by modifying the Visions theme (it's a freebie for a friend that I'm using to learn RFF). I've attached my project file.

1. How can I get the address and phone info at the top to align left in a row underneath the logo? Every time I try and move it, it just won't budge from where it is.

2. How can I close the gap between in headlines and the photos above and below it?

I realise these are newbie questions, but I've used wysiwyg drag and drop software to create sites for the last umpteen years and am used to simply dragging an object to where I want it. The RFF controls are not at all intuitive for me. I know I'll get it as I work more with it, but right now even the simplest things seem to take ages to work out.

First off: delete the empty column.
In narrow view set the two remaining columns both to cover 12 spans.
Then after the first blue breakpoint I'd change it to 8 spans for the first column and 4 for the second one.

Assuming you mean the white background between the main photo and the three pics, you will see that it has a min-height. Reduce that as much as you want. 6-7 rem I guess would be enough. Start reducing it in narrow view and adjust the min-height as you move the slider up.

The other way is to move the address text to the first column (set to 12 spans all the way up)
delete the other 2 columns
at the lowest break point (to the left of it a little bit) 398 px
set the column with the image & the text to
position = flex
display = reversed column (or column depending if you want the address below or above the image)
wrap = no wrap
justify = flex start
items = center
content = stretch
give the image or the address text a bit of top padding (depending on which one is underneith, just to put a bit of space
(you could also decrease the size of the image if you want

same for next breakpoint 400px
at the blue breakpoint change the column flex parameters to

Direction = reversed row (or row depending on how you want it to look ie image first address seond or viki verki)
wrap = no wrap
Justify = flex end (or flex start depending on where you want the image & address to start/finish
Items = center
content = stretch
give either the address text a bit of left side padding to bring it away a little bit from the image

or the image a bit of left padding depending on which is the second element

Thats it you can then let the flexing stay that way all the way up

By the way you have a breakpoint right up in the 1900px range ??

Doing it that way means you only have 1 column to deal with

for the headlines just make the height "auto
for the row holding the footer menu reduce top margin to 0 rem

got a video showing how if it will help

by the way Ingers way also works too

Wow, thank you guys for the quick detailed responses. Just got to learn how the app works. Wayan Jaya, that video would be great as half the battle is learning where to do things.

I went with Inger's solution which worked just fine but I will duplicate the project and work through your solution also, Wayan (is that the correct way to address you?) If not pse forgive me) as I would like to learn what flex means and does. Is it part of the html 5 specification? So much to learn! Thank you for your help so far.

I chose to tell you the easy solution because you said you were a newbie with the programme. I'd say the flex solution is a bit more advanced. But as soon as you master it, you'll love it.

Sorry for delay had a few problems this past week

here is the link to the video if you still would like to see

https://www.dropbox.com/s/suz9krg3w09y4au/joinery-flex-demo_x264.zip?dl=0

Wayan