Canvas Support

Checker-Section

6 replies · opened Dec 29, 2020

SstookyDec 29, 2020

hi semicolon

I have a question about building a checker section.
as it is difficult for me to write it all down to express well what I mean, I made again a small screencast.

https://www.dropbox.com/s/q5427r2pt7430do/checker-section.mov?dl=0

maybe you already have sth like this in the canvas files, if so, sorry I didn't find it.
maybe you could help me out with the pure html to build such a checker section.
don't care about passings and margins, I think I will get this sorted by myself, just the rough code on how to get the content of the checker section to the same width as a normal container.

rgds
guido

SstookyDec 30, 2020

maybe this is easier to understand what I mean.

http://semicolon.web.my1.cc/_static/index2.html

top a div.section with a container beneath the checker
how do I get in large sizes the content of the checker to the same width as the content of the top white section?
the moment I go smaller than col-lg they stack nicely from col-lg size on the checker content should always align with the top white content.

thx & rgds
guido

SstookyDec 30, 2020

and again I have to say sorry to bother
taking your precious time with my lousy questions

looking at the css for the sections in bootstrap I came around how to solve it.
2 extra classes .chkr-l and .chkr-r and a few lines of css and it works

http://semicolon.web.my1.cc/_static/index3.html

solved & closed, as long as you don't have a better solution or information.

rgds,
guido

SSemicolon WebSTAFFDec 30, 2020

Hello,

Thank You so much for the Very Detailed explanation and the examples. Not at all, please don't say sorry. This is our work and responsibility to provide support.

We have tried on working on this but your Solution appears to be working better than what we tried, after studying your entire codes. Based on your Solution, consider trying some of these fixes:
[ch_pre].chkr-l.container,
.chkr-r.container {
max-width: 570px;
}[/ch_pre]

and replace col-lg-6 pt-5 pb-4 with col-lg-6 pt-5 pb-4 px-0 Class for the Grid Columns. The Container will be much more precise.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyDec 30, 2020

all fine

first I did not understand why you proposed max-width 570px and the class px-0 for the cols, so I checked it in chrome, as I learned that you use chrome at first hand me I develop on safari first hand.
no differnce in the browsers.

I did not eliminate the the padding horizontal as I think some padding is needed in the center where light and dark grid comes together, so to say some white space for the eye, otherwise the text in the middle looks to close together.

or did I get sth wrong?
I am fine with the optic as is in http://semicolon.web.my1.cc/_static/index3.html, unless I missunderstood your suggestions.

now I am working on an even/odd solution to make it easier in TYPO3 to add more checker rows.

rgds
guido

SSemicolon WebSTAFFDec 30, 2020

Hello,

The Default Bootstrap .container has a max-width of 1140px, so 570px would be the recommended max-width as it would be exactly half of it. So the Grid Start will be 100% exact, right now it has a ~5px Offset from the Left and Right.

But, yes it looks fine and less complicated. And you are spot-on with the Padding Part. Sorry for confusing you.

Thanks for your Patience. Have a Great Day.

Do let us know if we can help you with anything else.

SstookyDec 30, 2020

now I got it, thanks for the explanation !!!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard