Need A little Help on the layout of...

User 2699991 Photo


Registered User
4,782 posts
Online Now

Jonathan Warren wrote:
I would also love some recommendations of these other apps you are all referring to.


Well Jonathan the other apps for me are the bee's knee's (including the clutter :D ) especially "Foundation Framer" not used Bootstrap Builder because Foundation Framer satisfies all of my needs (including the clutter)so wouldn't know about that one) they allow for the design & development of a site visually, so you can see whats going on as you develop the site,, images are imported to a resources folder and show up instantly once you select the image,,, (which allows you to play around with sizes ad all sort of other stuff.
you can make the use of nested containers, which along with sub-grids can take the design to all sorts of new levels especially when using the almighty "flexing" (but too easy to rely on this as a crutch in some cases) there are a wide variety of components that come with FF (Ingers clutter) but as I said don't need to use them if not needed,, but for example drop down menu (either hover or click) is a breeze to add,, responsive menu also,,,,, modal widows either full or simple reveals,,,, (perfect for making slideshows similar to light box, but without all the messing about with 3rd party html imports etc all at your fingertips.

The only drawback with FF for a lot of us old timers is it works from mobile up (not desktop down) which takes a bit of getting used to,,,,, but I will tell you what,, once you get that AAAAAH orgasmic moment for working that way,,, you will wonder how you managed before for all those years.

Responsive Site Designer (RSD) is also a great visual App for design & development,,, it has the advantage of working Desktop down,, so it's familiar way for those stick in the muds,,,, doesn't yet have all the bells & whistles as Foundation Framer) (although there are rumors that it will soon have some) but it is still a great thing for creating sites that you can see working as you develop them.

Bootstrap Builder I don't need and probably never will, so can't really comment,, someone else would have to chip in for that app.

Having said all of that,,, your fishing thingy has got some good stuff going on,, and will be a nice looking site (once those couple of issues are sorted)

Have a great day everybody wherever in the world you are,,, I'm off to bed now 2:00am been a long day :D

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/
User 461879 Photo


Registered User
82 posts

Thanks Wayan, I have RSD Just learning though at this point. I will mess around with your suggestions and see if Inger has anything to add once he looks at the file.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Jonathan, the way I understand why you have 2 empty spans on either side must be because you want to limit the width of the page contents. And those empty spans get in your way when the viewport is narrowed down to smaller sizes.

You can solve this in a different way. Below the large, wall to wall image, create a row and pop a container into it. Set the container's width to e.g. 70% (give and take a wee bit), and give it margin auto, so that it appears centered. Inside that container you use a subgrid for text and images. As for the images, divide the subgrid row into 2 (each of them 6 spans) and place one image in each. For positioning look at the settings in my suggestion.
Yell if you get stuck ;)

As for recommendations, you probably read what I said to Yayan above here. I use RLMP and the HTML Editor, sometimes only the Editor, and lately I have started making friends with RBB. When I spoke of 'clutter', it is not necessary something bad, but for a beginner with these programmes, it can easily become overwhelming in progs like RSD, RFF - and RBB. Since I have been hand coding for over 20 years, I am used to know what is what, where and why, and in the 'bells and whistles' apps. I have been confused more than once. So if you want to learn this, without hand coding, stick with RLMP until you know how to deal with it. Then, if you feel like it, you can move on to something more complex. (My tuppence worth ;) )
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
Online Now

I see Wayan is not totally in agreement with me :P

There is a saying that if you ask 10 beekeepers how they work with their bees, you'll get at least 11 answers. The same with coders :D
(I'm one of those 10 beekeepers, BTW)
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 461879 Photo


Registered User
82 posts

After looking at your file you made I did have a question that gets me when I try to make a layout from scratch. You mentioned my wall to wall photo. I chose this template because the photo along with all the other rows went wall to wall across the screen no matter what size screen. In your example file and on layouts I make, I set a 12 span but it doesn't go wall to wall on the previews, on my layout and on your example. Do you know why this would be or how to make things go wall to wall.?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I had forgotten to remove the padding from the column that the image is sitting in.
Better now?
Attachments:
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
Online Now

PS, if you are going to use my suggested layout, you may have to remove the padding on more columns. Just reminding you.
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

Inger wrote:
I see Wayan is not totally in agreement with me :P

There is a saying that if you ask 10 beekeepers how they work with their bees, you'll get at least 11 answers. The same with coders :D
(I'm one of those 10 beekeepers, BTW)


Im not in total dis-agreement, with you Inger by no means :D ,,,,, it's just for me I like to have the choice and the easier the better. I don't have to use them most of the time I don't but there just in case.

One of my cars is an Aston Martin DB7 it is a great car does everything I want, and has some really usefull gadgets (add onns etc) but to this day I have never used the ejector seat,,,, hopefully never will,,,, but it's there just in case :D:D:D:D
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 122279 Photo


Senior Advisor
14,447 posts
Online Now

I thought you said you were going to bed!? :P

Now I'll be off...
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

Inger wrote:
I thought you said you were going to bed!? :P

Now I'll be off...


I did 2.5 hours is enough for me.
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.