Help adding/positioning text to an...

User 2147626 Photo


Ambassador
2,958 posts

For those that don't know me, I don't code. Never have. But, I'm trying . . .

That said, I'm working on Site Designer, trying to figure out how things work. It's not easy for me. I've ordered lots of advil! Anyway. I'm attaching a pic of what I'm trying to do.

Over the last week I've figured out how to edit the menus, drop downs, and various components.
Working on Foundation 6, mobile first design. On the image below I've added an article component and changed it to show 4 featured items. What I'd like to do is add a text block above the items that simply says 'Featured Items'. About where the red circle is.

I can add text but it consistantly shows to the right of the blocks and I have been unable to move it above the blocks. I figure I'm missing something simply but darn if I know what. Any help would be appreciated if someone can point me in the right direction without my eye glazing over again. :P
Attachments:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2699991 Photo


Registered User
5,077 posts
Online Now

Well Mr SadDuck

There are 2 things here
1/ I noticed that you have more breakpoints than Barry Sheen has in his legs. Phew

That aside
I would suggest that you select the container causing you some trouble starting left of the first breakpoint

Go to 'Layout' select flex = row wrap=wrap align = flex-start,, center justify = space-around


then you make the container with the text = 100% width, and the 4 containers below a % same each (depending on breakpoints (lowest possible 60% each, with margins l/r set to auto, then as you move up, you can adjust the widths of the cards to flow into a row according to how it looks

I can also do a quick thing about flexing if you would like to watch, (maybe even throw in a bit about making your layout fit without so many break-points.

By the way, if you have made the container holding the cards an 'ARTICLE' semantic element, then the text needs to be a 'header either ( h2,h3.h4,h5,h6 ( 'semantic "articles" require a header,without a header it will sill be OK, but will fail both HTML validation, and accessibility validation 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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2147626 Photo


Ambassador
2,958 posts

Wayan Thanks for the feedback!
Yep, I agree with the number of breakpoints. That is simply the default that loaded when I chose the Foundation theme. I have no issue with trimming that down when the time comes. Still not sure if I'm going to finish this site or change it up. I'm just kind of testing things right now. Trying to figure out how to change different items. Seems simple but took me four days just to figure out how to change the drop down items in the menu. Whew! But i'm getting there. I hope . . .

That said, I'll run through your ideas tomorrow and see if I can figure this out. Got a lot to look at but I'll post back and let you know how it goes. Once again, thanks! :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2147626 Photo


Ambassador
2,958 posts

Wayan, ran through the 'Layout' settings no problem.
For some reason, I don't seem able to 'move' or 'delete' the break points I don't want. There are 2 colored break points and if I try anything with them I get a popup error that says they cannot be moved. But it also says I should be able to click on the line and move the white break points. Nope. They won't move, nor can I delete them. Something is amis!

Moving on, I added the text as h1 for nor, edited it, but it appears at the bottom of the box, not at the top. Tried so many things to reposition it that I lost track. I can get it to appear in the middle of the cards, or at the bottom. That's it. I have to be missing something simple here but I have no idea what. Sorry but I am a noob at this and I do appreciate your help.

I've got family issues to deal with this weekend so I may not get back in here till Monday. Just sayin'.
Thanks again.
Attachments:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2699991 Photo


Registered User
5,077 posts
Online Now

SadDuck wrote:
Wayan, ran through the 'Layout' settings no problem.
For some reason, I don't seem able to 'move' or 'delete' the break points I don't want. There are 2 colored break points and if I try anything with them I get a popup error that says they cannot be moved. But it also says I should be able to click on the line and move the white break points. Nope. They won't move, nor can I delete them. Something is amis!

Moving on, I added the text as h1 for nor, edited it, but it appears at the bottom of the box, not at the top. Tried so many things to reposition it that I lost track. I can get it to appear in the middle of the cards, or at the bottom. That's it. I have to be missing something simple here but I have no idea what. Sorry but I am a noob at this and I do appreciate your help.

I've got family issues to deal with this weekend so I may not get back in here till Monday. Just sayin'.
Thanks again.


Yes the two colored breakpoints are fixed in stone not even King Arthur could move then, but the others should be able to delete them, but it might be a bit dangerous it could completely change the layout, if as you said previously they came with the theme, but I cannot see a theme that has that many breakpoints,, which one is it
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,077 posts
Online Now

To Be Honest Mr Sadduck, an image isn't much help to us to even begin to try and work out what needs doing or what you have done, and need to do

1. are the 4 cards from a component?
1.1/ is the container holding the cards and the title a css grid container (4 cols)? or a flex container (4 cols)?
or just a parent container with 4 child containers?
2/ Have you set the toggle breakpoints to default"?

3/ Is the header "Featured Products" the last child of the parent container?

Either a link to a temporary website so we can see it live or zip up the project file and send it to me via email or wetransfer, my email address is in the signature area below▽

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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2147626 Photo


Ambassador
2,958 posts

Wayan, thanks again for your help.

I have lost track of whatever template I started with. My fault. All I know is that it was a Foundation - mobile first, template. I did find the problem with the breakpoints. There is a menu setting under 'Actions/Toggle breakpoints' that says 'Disable all breakpoints' and it was toggled. So I can now add/delete breakpoints no problem.

The 4 cards are a component. Pretty sure I used 'Nuetral - Articles Sections, Four CSS Grid Columns 2

The Featured Items heading was the last child of the parent container. I found and was able to change that to first child and it now displays the way I want 'most' of the time. It is correct at all breakpoints except full screen on a wide monitor. If I move wider than the last breakpoint the heading moves to the left of the cards. Don't say anything yet! I'd like to try and figure this out on my own first but my time is limited today.

I published the site to https://sadduck.us I am not using that domain at the moment and had it free.

I'll get back to this on Monday and let you know if I figure it out. Thanks again.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2147626 Photo


Ambassador
2,958 posts

Wayan, thank you again for your help. I simply don't have the time I thought I was going to have to work on this project. Too much family drama happening and my free time, or what I thought was my free time, has evaporated. I'll get back to this in a few months I'm sure. Just didn't want to leave you hanging. Thanks again.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

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.