Why are the column widths the width they are as no width is defined?

Report · Jul 13, 2021

Hello

Why are the column widths the width they are as no widths are defined?

I would like the columns to be different widths of my choice. I cannot figure why the main colunm is the width it is right now.

The .rightside colunm is a smaller width then the aside colunm next to it.

I also have removed from .container
display: flex;
flex-direction: column;

And from: main
flex: 1;

There is no change in the layout so I guess they are not needed.

I can resize the width of the browser and the layout collapses correctly. It looks fine in my android LG6 cell phone. Is the code all correct?

I did a css check and no errors were found.

test page

http://davidswebsite.com/test/responsive_layout.html

Report · Jul 14, 2021

Hello

Why are the column widths the width they are as no widths are defined?

By @davidhelp

These are the widths - grid-template-columns: 12% 1fr 17% 10%; - as in

@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 12% 1fr 17% 10%;
/*width nav, main, aside */
grid-template-rows: auto 50px 1fr auto;
/* height, header, vert_nav, main, footer */
/* grid-auto-rows: 100px; */

  }
}

Wappler, the only real Dreamweaver alternative.

Report · Jul 14, 2021

"Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."

Always has had a poor view of php dating back 11 years or more, so its no surprise. 11 years on and php just won't go away. It still by far dominates the market, way in excess of any other server language and its not likely to lose that position even if it gradually decreases, which is to be expected, for another 25 years. It will outlive you and probably me too.

Interesting discussion over at Wappler though. I enjoyed it, just a pitty I could not have joined in but at least there are some fairly well balanced views over there by those that are sensible, apart from one and that is not you.

Just ashame he wasnt around to see 'Stack' acquired for a massive amount of money. I presume he lost out finanially or though I doubt he is short of a bob or two given his other involvements.

Report · Jul 14, 2021

@osgood_ I missed your point... is your last comment belongs to this thread ???

Report · Jul 14, 2021

@osgood_I missed your point... is your last comment belongs to this thread ???

By @B i r n o u

I was commenting on Bens default 'signature' at the foot of his post.

Report · Jul 14, 2021

Thanks for the clarification. .. well, now, I got it.

Just curious, is it because of my French culture, but I seem to feel a form of resentment in your words ?

Anyway, in Ben's signature, I don't have the impression that it means some kind of... "down with PHP... long live JavaScript"... but on the contrary... I smell a ... "let's finally give back its letters of nobility to Javascript", language which has been denigrated for a long time... and especially not to take the place of any one.. just fill a gap that is currently empty

Report · Jul 14, 2021

Resentment concerning which part of my post?

There was a discussion as there frequently is over at the Wappler forum about node.js v php where Ben posted his comment relating to Atwoods Law (incidentally l have no idea if he said that or not). As l've said before developers today, rather than being a close knit unit, are now a fractured egg. Smaller and smaller groups all believe their workflow to be the best. Its not helpful for the industry as a whole, infact in my opinion too many options has destroyed it and turned it into some joke profession.

I dont think its about node being better than php or php being better than node, its about trends which come and go. Its about what you know and what you dont know. I dont expect a develover that only knows javascript to embrace php or one than only knows php to embrace javascript. Being as l know both php and node quite well l can make a subjective decision based on the project and which l feel is simpler to implement and that is php without question. Note l said simpler, not better. Node is a great workflow if you can live with a more complicated folder and file structure, bringing in lots of additional middleware, creating routes etc, personally l cant and have no desire to do so when l can make the workflow simpler and easier using another workflow.

The stats speak for themselves, php has 79% market share whilst node after 12 years still barely breaches 1%. Thats not to say node isnt any good its just an eye opener as to how far node is behind in overall usage by large platforms and possibly developers who are a little more enlightened rather than those who follow trends just to be different

Report · Jul 14, 2021

Well I see you are using grid and have the grid set to use 3 columns - 12% 1fr 17% - but now you are trying to add another column 'rightside' so the grid doesnt know what to do with the 4th column as its not been specifically declared in the grid set up. You need to add an extra column like - 12% 1fr 17% 17% - and then go through your css and make sure your other areas such as the <header> span 5 grid-lines, not 4 as it currently does

Edited:

Oh hang on I didnt see the 10% on your grid set up in the dev-tools, it had dropped to the next line, good job Ben did see it.

So yes your layout is observing the grid widths you set up!!

If you use your browsers dev-tools and click on 'inspect the code' then click on the 'container' <div> you will see the corresponding css for the 'container' div. You can also click on the little 'grid' button next to the 'container' <div> which will provide you with a 'visual view' of the grid which may help in future if you didnt know already.

Report · Jul 14, 2021

I did not think to look at the media query.....

I was just trying to add add'll columns as a test.
Thanks for the tip on the tools.

I am using Firefox. I installed the app. I forgot about it....

Menu Bar> Tools> Browser Tools> Web Developer Tools
Check box for 'div.container'
When you bring the mouse over the grid pattern it changes the color on the col or row and gives some details.

@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 12% 1fr 17% 15%;
/*width nav, main, aside, test*/

Report · Jul 14, 2021

Thanks for the tip on the tools.

By @davidhelp

No problem, its refreshing to see someone using grid as a means of producing a responsive solution, not too difficult, right and produces a lot more streamlined code.

Report · Jul 14, 2021

without giving any solution, and in complement of what said @BenPleysier and @osgood_ ... here are some nice page to better understand by yourself what's going on...

Flex

Grids

Why are the column widths the width they are as no width is defined?

1 Correct answer