Layout questions - Post ID 271618

User 1570522 Photo


Registered User
40 posts

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.
Attachments:
User 122279 Photo


Senior Advisor
14,447 posts

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.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts

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.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
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.


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

Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
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.


for the headlines just make the height "auto
for the row holding the footer menu reduce top margin to 0 rem
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

got a video showing how if it will help

by the way Ingers way also works too
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 1570522 Photo


Registered User
40 posts

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.
User 1570522 Photo


Registered User
40 posts

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.
User 122279 Photo


Senior Advisor
14,447 posts

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.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.