Containers Hidden

User 2811194 Photo


Registered User
34 posts

Going along the learning curve and struggling. So far all I have is a picture carousel and a navbar. But when I am in designer mode I cannot see anything but the navbar. However in preview mode it looks correct and how I want it to be (up to 600px). But not being able to see what I doing in the designer mode is making it difficult to progress. Any help/ideas most appreciated.

http://chachapoyasperu.coffeecup.com/index.html

Rob
Attachments:
User 122279 Photo


Senior Advisor
14,450 posts

Oh dear! I don't know where to start...
Well, the best way to start is telling you that I'm NO GRID EXPERT, and that my advice would be to start learning the programme with flex positioning first. There may be others, better acquainted with Grid, who might give you different advice, though, but I'd stick to my words.

First,
You have chosen some containers to display grid right from the start (I mean here from the smallest viewport). No point in that, as there isn't space enough to let the grid 'do' anything. Instead it would have been better to start with display flex, or possibly with just floats (flex is easier).

Then you haven't positioned the images in your slideshow in the grid, so they are now sitting hiding behind the navbar.

You have not enabled grid. It is done in the 'Design for' at the top tool bar, where you have to select Display Grid to be supported. Without enabling grid, you will not be able to display anything as grid.

I don't know what else you want to add to the site, but in my opinion, there is no need to use grid to display the slide show. There have been some strong agitators for CSS Grid here, making some people think that if they don't use it, their site will not be good. That is rubbish! Traditional layout is full well up and running still, and will be for many years to come. So take it step by step. Wait with grid until you have learnt the basics, and also until you have elements that need to be moved two ways (vertically and horizontally), not only one way.

Some immediate fixes: Starting from the smallest viewport: Give the carousel a top margin which is some more than the height of the navbar, so that it comes out from behind the navbar. Also give the carousel a height, try the 450px that you have as the max height. Adjust these values at wider viewports where necessary.

I don't mean to be harsh, But I'd say, stay the course before sitting for the exam... ;)
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,799 posts
Online Now

The carousel is a component that is pre-set as a grid element, so, unfortunately, Robert had no choice on the matter it does appear to me that there is an error somewhere, in that Sd keeps freezing up for me whenever I try to activate the component within the grid.

Stick to good old FOUNDATION framework the orbit carousel thingy there is a doddle and so versatile it's almost double-jointed :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,450 posts

Was that carousel a component from the Matco theme? In that case I see why the grid came in. I have built Materialize carousels myself without grid, so I know it is possible.
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,799 posts
Online Now

Inger wrote:
Was that carousel a component from the Matco theme? In that case I see why the grid came in. I have built Materialize carousels myself without grid, so I know it is possible.


I have no idea there are other carousel components that are not grid, so I suspect that maybe it was from a theme,, there you go, always difficult to alter themes as one requires to know how the author of the theme created it in order to easily make changes.
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,799 posts
Online Now

Inger wrote:
Was that carousel a component from the Matco theme? In that case I see why the grid came in. I have built Materialize carousels myself without grid, so I know it is possible.


Was I Robert I would delete that carousel component & use one from the normal components, only a little bit of fiddling about.
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,450 posts

Yes, Foundation and Orbit carousel are definitely easier. And there are a lot of people here who can help.
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,799 posts
Online Now

as a further aside the images, Robert is using are png which isn't really needed jpeg would be better and they are not really the optimum size for larger screen widths (being 600px wide, they go very grainy even on my 21" monitor)
if one increases the existing png to around 1900px (which is good enough for most large monitors (except perhaps those HUGE monitors)) as a png it is over 1.5 mg in size.
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,799 posts
Online Now

I got it working eventually by taking it outside of the Grid thingy,, but oh boy couldn't even begin to explain what all the fiddling/styling sizes & positioning was needed.
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 2811194 Photo


Registered User
34 posts

Thanks so much. Will start again with your advice. The good thing is that the idea where I want to go is clear and so now it is just a case of building it better.

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.