Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,161,448 members, 7,846,866 topics. Date: Saturday, 01 June 2024 at 04:45 AM |
Nairaland Forum / Science/Technology / Programming / CSS Gurus: My Media Query Is Behaving Like An Imbe! (608 Views)
Aside, Media Query In Css How Do I Create A Responsive Website? / SQL Query That Displays A List Assigned Only To Only The Logged In User Java / How Would You Like An App That Controls Your Home Devices? (2) (3) (4)
CSS Gurus: My Media Query Is Behaving Like An Imbe! by emirex50(m): 4:11pm On Oct 27, 2020 |
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. |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by FanOfMyself: 4:31pm On Oct 27, 2020 |
I thought the rule is flex-basis: value (in percent) For each of the flexed items. 1 Like |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by syluck(m): 4:54pm On Oct 27, 2020 |
I'm really sorry for diverting or not chipping in to help solve ur plight but I found your topic very funny Imbe? 1 Like |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by Karleb(m): 5:20pm On Oct 27, 2020 |
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. |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by nurain150(m): 5:26pm On Oct 27, 2020 |
emirex50: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. |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by nurain150(m): 5:26pm On Oct 27, 2020 |
This is type of post we want to be seeing here mukina2 |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by bovage(m): 6:10pm On Oct 27, 2020 |
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:Check video tutorial on YouTube for more info 2 Likes |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by emirex50(m): 11:16am On Oct 30, 2020 |
nurain150: 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.
|
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by emirex50(m): 11:22am On Oct 30, 2020 |
FanOfMyself: Thank you @FanOfMyself you just cracked the code. I just added a % to the values and the imbe is working fine now |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by FanOfMyself: 11:32am On Oct 30, 2020 |
emirex50: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 |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by nurain150(m): 6:02pm On Oct 30, 2020 |
emirex50:You should use center div.If you had been using bootstrap it would have been easy to assign the div to a middle class |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by emirex50(m): 6:36am On Oct 31, 2020 |
nurain150: 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. |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by emirex50(m): 6:38am On Oct 31, 2020 |
FanOfMyself: Nice, how can I get them? |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by FanOfMyself: 7:23am On Oct 31, 2020 |
emirex50:I will send it over to you via Google drive once you make payment. 09074191547 |
Re: CSS Gurus: My Media Query Is Behaving Like An Imbe! by nurain150(m): 3:11pm On Oct 31, 2020 |
emirex50:That was what I said to but dinner I discovered them to be more simple |
(1) (Reply)
Differences Between Computer Science And Engineering?? / I Want To Start Learning An I.T Skills! / Attend This Free Seminar:knowing The Top Digital Skills You Should Learn In 2022
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 47 |