Break point issues

HTML & CSS
1

please see

in chrome dev tools at 1436px my nav is fine the way i want it

at 1435px the nav breaks

at 1189 it goes to hamburger, the way i want it

how to remove 1435px and get rid of the broken code?

thanks!

2

@OBXjuggler Review Media Query Settings > Adjust Breakpoints > Check for Code Issues >

3

Where do you find these?

1 Like
4

Think about what you can do to allow the items to fit in that range.

Maybe reduce the padding on each at that breakpoint or engineer a more fluid padding with percent or vw. Or think about how they could be spaced without using padding and use flex to space them out.

At the end of the day something either fits or it doesn’t so build in a little more flexibility to allow a greater range.

5

Unless you’ve already changed it it doesn’t break for me?

The hamburger comes into play before it breaks.

6

lets try this from here

https://forallthetime.com/BI2/index.html

DO NOT mean to frustrate you!

i am trying :slight_smile:

codepen works fine with smaller viewport, no break… however SAME code in VS Code breaks

no luck here https://forallthetime.com/BI2/index.html breaks

ggrrrr

i need your help, please

please be patient

7

You are using custom fonts which have a very large size. You have not linked to them in codepen so codepen is using a standard font.

You will need to change the font-size of the custom font to something reasonable .

8

e.g. Do something like this:

@media screen and (max-width:1495px){
.menu a{
  font-size:1rem;
 }
}

That will allow it to get much smaller.

Your hamburger menu break point happens at around 1350px which is much too wide in my opinion as on my window its already at at the hamburger with just a blank blue line. This is bad UI.

I would suggest that you reduce the font-size to 1 rem as mentioned above and then when before the menu starts to warp or break I would hide some of the text as you don;t really need to be so verbose.

I would reduce the menu text to this.

Buck Island About Location Area Community Rentals Contact Us

Which can be done by adding a span to the html:

<ul class="menu">
  <li class="logo">Buck Island</li>
  <li><a href="#">About <span>Buck Island</span></a></li>
  <li><a href="#">Location</a></li>
  <li><a href="#">Area <span>Information</span></a></li>
  <li><a href="#">Community <span>Information</span></a></li>
  <li><a href="#">Rentals</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

@media screen and (max-width:1200px){
  .menu a span{display:none;}  
}

That means you can let the page get quite small before the hamburger needs to kick in.

9

yes, i think i see what you are doing here :slight_smile:

please see

https://forallthetime.com/CHAIR/index.html

and

https://forallthetime.com/CHAIR2/index.html

i appplied your media queries at tline 205 for chair, removed for chair2

is there a media query i am not seeing? the font size does change (larger) as the screen gets smaller

also, the links never shorten names, which i hink you were trying to do

still breaking, and my hamburger is still huge

please help me out :slight_smile:

10

You seem to have mixed some styles up there and duplicated things :slight_smile:

Why is their dropdown code in there as it conflicts with some of the code.

Your media query over-ides must be in order as you can’t swap up and down size when changing the same property. If you use max-width media queries then they must reduce in size (min-width are the opposite). media queries aren’t exclusive ans styles written after them will cascade and be affected.

I’ll have to come back to this tomorrow but this a start to get some semblance of order to the nav (the drop down code should be removed later when tested).

Also try to keep things together as you were putting styles all over the place which makes editing hard. I’ll try and find some time tomorrow to tidy up a bit more.

11

look foeard to it!

12

the @media queries doesnt help?

13

Hello,

ok, i had too much coming at me

i decided to re-do the project

of course i am using the old content, but make the site easier to code

see

https://forallthetime.com/BI24/index.html

this not working now :frowning: i am very sorry!

my nav is breaking again and links are spread out un-evenly

also, trouble making the image, chair, responsive… you wont see it because i removed it

to let you know, i tried to solve this with out help. but now need help

sorry to bug you about this :frowning:

i have a problem and need your help

thank you

14

On my screen, each of your navigation links are 318.03px wide at default, and shrink proportionately as they go.

image
image2550×65 13.2 KB

image

By what do you mean ‘spread out un-evenly’?

16

Remove the width:100% from here.

nav ul li {
    display: block;
    /* width: 100%; */
}
17

That did it!!!

kindly tell me why it works now?

18

i meant there was less space sometimes and more space sometimes between my links, NOT always the same distance

i hope i answered your question :slight_smile:

BTW

Paul sent me the solution anyways… crisis averted

19

With width:100% in your LI’s, they took up the whole bar with no spaces between them (each one trying to be 100%, so none of them were 100%, and instead they split the width equally).
With out width:100%, the LI is only as big as the text, and the spacing reverts to the UL’s rule of justify-content: space-between, to distribute the space not consumed by their widths…between them. (HTML ever so clever with naming things)

3 Likes
20

A post was split to a new topic: How to add link to nav bar?