• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
Jul 13, 2021 Jul 13, 2021

Copy link to clipboard

Copied

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

Views

287

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jul 14, 2021 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

...

Votes

Translate

Translate
Community Expert ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

"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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

quote

@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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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*/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

LATEST
quote
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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines