Hey geeks, so I've been working one login in page using flexbox to divide the screen into[b]#left[/b] and #right div.

Everything has been going on fine until I used @media query to make the page responsive to device screen size.

Problem:

I gave the right div a flex value of 6 to make it bigger than the left div which I gave a flex value of 4. I.e;
#right{
flex: 6;
}
#left{
flex: 4;
}

Now the browser(chrome) interpreted it the other way around making the left div bigger than the right div.

What could I be doing wrong here?
I would appreciate your solutions please.

I thought the rule is
flex-basis: value (in percent)

For each of the flexed items.

I'm really sorry for diverting or not chipping in to help solve ur plight but I found your topic very funny

Imbe?

Copy and paste your css here let look into it

That was how Laravel component didn't show up. This fortify, livewire and Jetstream is giving me tough time.

emirex50:
Hey geeks, so I've been working one login in page using flexbox to divide the screen into[b]#left[/b] and #right div.

Everything has been going on fine until I used @media query to make the page responsive to device screen size.

Problem:

I gave the right div a flex value of 6 to make it bigger than the left div which I gave a flex value of 4. I.e;
#right{
flex: 6;
}
#left{
flex: 4;
}

Now the browser(chrome) interpreted it the other way around making the left div bigger than the right div.

What could I be doing wrong here?
I would appreciate your solutions please.

1.CSS is crazy and can make you crazy the problem is that you did not specify percentage or pixel or quantification for the sizes each stuff has the reason for such quantification like pixels pt %.Etc.
And consider using foundation CSS framework makes ur work faster I am currently looking for the person that will go through stress to help me convert foundation css Is a mobile first framework.If you ain't a framework person you have a lot of work to do bc the browser will adjust the css due to the size of it windows.You can use bootstrap.Or try running on a different browser,try testing on Apache.Also clear your browser cache and try to reload the page.

This is type of post we want to be seeing here mukina2

Have you checked for typo in your html code first? Maybe you made a mistake in the value of the id attribute.

flex is a shorthand property for flex-grow, flex-shrink and flex-basis in that order.

If you specify one value for the flex property, that means you have specified the same value for flex-grow and flex-shrink, flex-basis will have a value of 0.

By default, flex-grow has a value of 0, flex-shrink has a value of 1.

Note: flex-grow and flex-shrink values are relative to their other flex items

flex-grow is used to specify how the available space (generated as a result of expanding the browser window size) will be shared among the flex-items.

flex-shrink is used to specify rate at which the flex-items size should be decreased when the browser window size is being decreased.

You can think of the flex-grow and shrink values as the sharing ratio.

flex-basis is used to define the base size of the flex item. It can act as the width or height of the items depending on the value of the flex direction. Say the value for the flex direction is column, the flex-basis will act as the height and vice versa.

Note: the flex-direction property is for the flex container


I hope this helps.

emirex50:
Hey geeks, so I've been working one login in page using flexbox to divide the screen into[b]#left[/b] and #right div.

Everything has been going on fine until I used @media query to make the page responsive to device screen size.

Problem:

I gave the right div a flex value of 6 to make it bigger than the left div which I gave a flex value of 4. I.e;
#right{
flex: 6;
}
#left{
flex: 4;
}

Now the browser(chrome) interpreted it the other way around making the left div bigger than the right div.

What could I be doing wrong here?
I would appreciate your solutions please.

Check video tutorial on YouTube for more info

nurain150:

1.CSS is crazy and can make you crazy the problem is that you did not specify percentage or pixel or quantification for the sizes each stuff has the reason for such quantification like pixels pt %.Etc.
And consider using foundation CSS framework makes ur work faster I am currently looking for the person that will go through stress to help me convert foundation css Is a mobile first framework.If you ain't a framework person you have a lot of work to do bc the browser will adjust the css due to the size of it windows.You can use bootstrap.Or try running on a different browser,try testing on Apache.Also clear your browser cache and try to reload the page.

Thank you @nurainn150 for you your contribution.
I have tried clearing my cache and even took the pain to rewrite the code, but still I keep getting same error.

I have attached a picture of the page here.

The #left div is what contains the logo, a form, a sign in button, links and the copyright footer.

The #right div contains the "let's create the future together" and a link.

With the media query which is specified, when the screen is larger than 1200px, the #left:#right flex container is suppose to display a 4:6 ratio on the bigger browser screen. Instead it is displaying as 6:4 ratio making the #left div bigger than the #right div.

I have tried changing the value but it is still displaying same way.

FanOfMyself:
I thought the rule is
flex-basis: value (in percent)

For each of the flexed items.

Thank you @FanOfMyself you just cracked the code. I just added a % to the values and the imbe is working fine now

emirex50:


Thank you @FanOfMyself you just cracked the code. I just added a % to the values and the imbe is working fine now

You are welcome bro. By the way, I am a front-end developer and I have some wonderful courses that might interest you. They are from LinkedIn learning and from lynda.com
The courses are in video formats and up to date. I'm pretty sure that you will find it valuable.
html
css
Advanced css
responsive website design using css
JavaScript
Bootstrap
Vue.js
Php
laravel
Git and GitHub
And so much more.
Let me know if you interested

Each course cost just 2k and you can have it offline forever

emirex50:


Thank you @nurainn150 for you your contribution.
I have tried clearing my cache and even took the pain to rewrite the code, but still I keep getting same error.

I have attached a picture of the page here.

The #left div is what contains the logo, a form, a sign in button, links and the copyright footer.

The #right div contains the "let's create the future together" and a link.

With the media query which is specified, when the screen is larger than 1200px, the #left:#right flex container is suppose to display a 4:6 ratio on the bigger browser screen. Instead it is displaying as 6:4 ratio making the #left div bigger than the #right div.

I have tried changing the value but it is still displaying same way.

You should use center div.If you had been using bootstrap it would have been easy to assign the div to a middle class

nurain150:

You should use center div.If you had been using bootstrap it would have been easy to assign the div to a middle class

Thanks bro, but I'm still learning. I want to be solidly grounded in CSS first before taking up frameworks like bootstrap, then JavaScript and its framework.

FanOfMyself:

You are welcome bro. By the way, I am a front-end developer and I have some wonderful courses that might interest you. They are from LinkedIn learning and from lynda.com
The courses are in video formats and up to date. I'm pretty sure that you will find it valuable.
html
css
Advanced css
responsive website design using css
JavaScript
Bootstrap
Vue.js
Php
laravel
Git and GitHub
And so much more.
Let me know if you interested

Each course cost just 2k and you can have it offline forever

Nice, how can I get them?

emirex50:


Nice, how can I get them?

I will send it over to you via Google drive once you make payment.
09074191547

emirex50:


Thanks bro, but I'm still learning. I want to be solidly grounded in CSS first before taking up frameworks like bootstrap, then JavaScript and its framework.

That was what I said to but dinner I discovered them to be more simple