Struggles in so many ways I just want to read a manual that explains what all the elements in the interface do. I’m sure I came across one but I’ve lost the list so a reposting of the link would be great. When I understand the concepts too I’ll be on my way.

So for starters;

Foundation and Bootstrap or CSS and HTML coding languages which are software agnostic

The Type Classes (TC) define the CSS and HTML coding for a specific TC

Sorry can’t edit this above. Will replace with below:

Struggling in so many ways I just want to read a manual that explains what all the elements in the interface do. I’m sure I came across one but I’ve lost the list so a reposting of the link would be great.

EDIT Found it
https://tutorials.coffeecup.com/site-designer/

When I understand the concepts too I’ll be on my way.

So for
[1]Foundation and Bootstrap frameworks using CSS and HTML coding languages which are software agnostic

[2]The Type Classes (TC) define the CSS and HTML coding for a specific TC

[3] A TC added to the canvas can be changed independently from its source, then given a new TC name

[4] A Block element must be changed to Flex for it to be Responsive.

Julian

Well a block element on it's own is kinda responsive as it tends to adjust to width automatically. But when you want multiple blocks to be responsive side-by-side and also allow them to flow beneath each other as screen narrows then you need to put them in a container div which should be made a flex box. Been wrestling with flex boxes over the last few days, it's a great feature and offers nice flexibility but there are a lot of nuances with it to learn. I feel like css is getting more complicated these days than a coding language like javascript or php. But at least Site Designer lets you trial and error and preview the results pretty quickly.

I feel like I'm floundering getting nowhere even of the simplest but I'm sorry to say I find the interface unnecessarily unhelpful at times. I'll give an example: when I'm on the canvas all my containers are called 'Container' so I have to select the one I want in turn to find the Type Class I want. If there's a way to name please kindly tell me and I'll apologise.

Anyway to my most basic of problems. Understanding how to control layout changes at breakpoints.

An example: There is a theme / sample file that was posted by Inger I think. It's called sd3-basic-card. Up to 365 px everything appears in one 'column'; at breakpoint 640 px two pictures appear alongside each other in two 'columns' and a third is centred below them in another 'row'. Now I'm trying observing the Styles panel to see what changes as I move the viewpoint slide and despite choosing different containers to observe I just cannot see what config change(s) occurred at 640 px.

The Responsive video demonstrates a change from Block to Flex, but I think its Flex at 365 px in this file

Could somebody kindly enlighten me

Many thanks

Julian

sd3-basic-card.rsd

Please, I still cannot see how the cards flow from one to two to three at each breakpoint. I've checked all the elements and they seem to be the same throughout

I'm baffled

Hi Julian,

I didn't notice your posts until now. In the file sd3-basic-card.rsd you have to look at the styling of the 'wrapper' container to understand why those three cards flow like they do. The wrapper is set to display flex, with the styling 'row', 'wrap' and justify 'center'. Since the cards have been given a width of 300px, there is only room for one card at the smallest viewport, then two and eventually all three when the slider is moved to the right.
I hope that helps.