Help! The text in my schedule on my...

User 2503578 Photo


Registered User
102 posts

I need some help on my schedule page, please. Apparently I'm doing something wrong. The page looks correct on most phones and computers. However, when the screen is less than 299 px, the data in a column wraps. When that happens, the lists are not in alignment; which causes the date not to line up with the music or food truck.

Page: http://threeoaksvineyard.com/schedule.html

The information is currently in a container with three unordered lists.

Is there a table or something I should have used so that when people have little screens, the date, music and food truck don't wrap independently?

Diana Hooverman
Three Oaks Vineyard LLC




User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
I need some help on my schedule page, please. Apparently I'm doing something wrong. The page looks correct on most phones and computers. However, when the screen is less than 299 px, the data in a column wraps. When that happens, the lists are not in alignment; which causes the date not to line up with the music or food truck.

Page: http://threeoaksvineyard.com/schedule.html

The information is currently in a container with three unordered lists.

Is there a table or something I should have used so that when people have little screens, the date, music and food truck don't wrap independently?

Diana Hooverman
Three Oaks Vineyard LLC

Hi Diana
We Could do with seeing the project file, tables and such like that are notoriously difficult to make them look good at such small widths, it looks ok at 320 px wide but only just, the rows & columns after that are way too narrow to both fit & look good after that you may need to consider a different layout for those tiny screen widths only, then revert to the normal list at around 320 px
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 2503578 Photo


Registered User
102 posts

Hello Wayan! I've never been asked to share the project file. It's 25 MB. Do I just attach it?
User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
Hello Wayan! I've never been asked to share the project file. It's 25 MB. Do I just attach it?

No you should zip it up then Dropbox it then place the link to Dropbox location here on this thread
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

Diana, instead of the three lists, set your table up like the attached. I've just done it quickly (it's 01 am here), so no styling, proper class names or anything. I've used colours to show how it will look in wide and narrow.
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 2503578 Photo


Registered User
102 posts

Inger - I never would have thought of that. I'm seeing a table container with row containers and then each box is a container with text inside. Good way to attach the text to a real row. I will give it a try!

If I have problems, I'll put a copy of the project in Dropbox (Thanks Wayan!).

Diana

User 2695940 Photo


Registered User
148 posts

Inger wrote:
Diana, instead of the three lists, set your table up like the attached. I've just done it quickly (it's 01 am here), so no styling, proper class names or anything. I've used colours to show how it will look in wide and narrow.


Great idea Inger!
John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
Inger - I never would have thought of that. I'm seeing a table container with row containers and then each box is a container with text inside. Good way to attach the text to a real row. I will give it a try!

If I have problems, I'll put a copy of the project in Dropbox (Thanks Wayan!).

Diana


Hi DianaH
I have also thrown together something, but not wanting to step on any toes here, If you would like to have a look I have made a demo video, so you can take a look-see if you struggle with Ingers solution, my version just has a different table for small devices, which gets hidden at medium sizes so the one you have already in place then becomes visible.

I will put the link to the video should you wish to see it later just give the nod

Sorry Inger but I had done it before seeing your post with what you had done
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

Wayan, we are not competing here! :lol: If we come up with different solutions, the folks will have more choices.
Don't ever be afraid of stepping on my toes!
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 2503578 Photo


Registered User
102 posts

Wayan,

I definitely want to see what you put together. So good to learn many ways to make things work! I haven't done anything to the page yet. I have to admit that I sampled some of our product last night and fell asleep early. :lol:

Diana

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.