Why the flex property is not working..?

HTML-CSS
#1

Tell us what’s happening:
hi all

i want to know why my flex properties flex: 0 0 size isnt working on my website when i resize the browser.

my goal: i want the .logo container and .nav-bar container shrink when i zoom in the browser. But instead they overflow the header container.

The classes with flex property
.logo { display: flex; border: solid; flex: 0 1 508.2px; }
and
.nav-bar { display: flex; justify-content: space-around; border: solid; width: 500px; flex: 0 1 500px; }

all the codes of the webpage is found in the link below

https://jsfiddle.net/AlexanderThe3rd/uckg9spb/1/

Challenge: Build a Product Landing Page

Link to the challenge:

#2

You have multiple rules interacting with each other.

Keep in mind websites are nothing more than a bunch of containers on a page. You have multiple elements conflicting with each other.

For example the 3 rules below which are all within the header.

h1 { width: 450px;} 
.logo {flex: 0 1 508.2px;} /* can not grow, can shrink with a width of 508.2px*/
.nav-bar {flex: 0 1 500px;}/*can not grow, but can shrink with a width of 500px*/

What are you trying to accomplish with these rules? If you describe what you’re aiming for we might be able to help you better.

TIP - it might help if you temporary change the background colors of the header, h1, div.logo and #nav-bar to different colors so you can see how they’re interacting with each other.

1 Like
#3

thanks for the reply.

my goal: i want the .logo container and .nav-bar container shrink when i zoom in the browser. But instead they overflow the header container.

#4

Check this out > Updated Code

I’ve copied the applicable HTML and CSS and have updated it so the nav bar updates with the browser size. I’ve also left comments in to explain what I did. I hope I understood what you were asking for and hopefully this helps. If not, let me know and I’ll try again.

1 Like
#5

hi

Thanks a mill for the help and tips :smiley: :smiley: :smiley:. Its what i wanted.

But the space between the link buttons were sacrificed…

What i noticed you used % in all the widths of the items in the header container, which i understand, inturn helped in shrinking the items . Does it mean we should always use percentage for this effect to happen?

I noticed in the code flex you did not add 1. is that just a mistake?

.nav-bar {
  display: flex;
  justify-content: space-around;
  border: solid;
  /*width: 500px;*this is repetitive. It's the same as  flex-basis (note I updated it below)*/
  flex: 0 45%;/*I updated the width to a %*/
  background: orange;/*for visibility*/
}

Another problem. As i zoom more this happens. The items overlap… . Is it the font causing the overlap?
Only the image seems untouched by everything, i wonder why. Its just sitting there happily undisturbed.

zoomed in
zoomed in919×602 100 KB

#6

Hi,

Yes, I missed the 1 by mistake. I used % instead of px because that usually helps maintain the formatting of the page and adjusts everything as the browser adjusts so you won’t have to create a bunch of different media queries in your CSS.

The overlap occurs because the browser is too small to show the full content of what’s in the nav bar (due to the font size, margins & padding). The good news is that the overlap doesn’t start until the browser is around 245px wide and most modern devices don’t have browsers that thin. I don’t know if you should really be concerned with that. However, if you are, you could use a media query to adjust the layout and formatting of the nav bar for super tiny browsers.

Your image doesn’t change because (I just noticed) you used inline CSS to lock the width at 58.2px. That coupled with the flex property which makes it appear on the left causes it not to change.

1 Like
#7

Thanks for the info. I am not aware of the sizes of screen and their length. On the browser it looked like its the size of a smart phone. i thought it will look like that on a smartphone.

I need to check on some article on the best sizes to use when using media query.

#8

Here are some common breakpoints https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

You can also use Developer Tools in Chrome and changing the view to see what your page would look like on different devices.

2 Likes
#9

Thanks for the link :v:

#10