Inspiring

Answered

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

Forum|Forum|4 years ago
July 14, 2021
3 replies
706 views

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

This topic has been closed for replies.

Correct answer osgood_

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.

B i r n o u

Legend

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

O

osgood_Correct answer

Legend

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.

davidhelpAuthor

Inspiring

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

O

osgood_

Legend

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.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded