Proper navigation code

HTML & CSS
#45

Yes that seems to have done the trick. :slight_smile:

No worries :slight_smile: It’s just that I mention height so often I sound like a recording :wink:

#46

kindly see

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

cant seem to adjst the footer text size on small screens

i tried media queries

:frowning:

yes, i tried everything i thought of

this must be simple!

also, i would like to control height of the footer… SO sorry if this is another height code you have already told me!

see line 350

though i do ask for clarification

how to make it smaller / larger and how to make the social icons closer to the top two items

please leave comments so i can follow :slight_smile:

help, please

thanks!

#47

Sorry I missed your post yesterday. I’ll take a look when I get back later today:)

#48

First off you seem to have reverted to the fixed height on the grids thus breaking all screens! Why have you reverted back?

It should be min-height:80vh not height.:

/* navigation ends */
.grid {
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
}

Then you can reduce the footer size by following the original rules and changing them with the media query. Things seem to break at around 860px so do this.

@media screen and (max-width: 860px) {
  .grid-container > div {
    font-size: 1.5rem;
    padding: 10px 0;
    /* reduce font-size and padding*/
  }
  .grid-container {
    grid-template-rows: auto;
    /* Your 60% is a fixed measurement again and should be avoided */
  }
  .grid-container .item4 img {
    margin: 0;
    width: 35px;
  }
  .grid-container .item4 {
    display: flex;
    justify-content: space-around;
    /* space items out*/
  }
}

If you need more media queries at smaller sizes (although the above seems to fit anyway) then just use the above as a template and change accordingly. :wink:

#49

looks great! thanks!

do not see a difference on 768px + screen

not sure what the problem is :frowning:

cant be that hard!

kindly clarify

thanks for the help

#50

You’ve added the min-height now so there is no problem. When it was just height then on small screen the image was overlapping the content like this.

forallthetime.com_DEMO_index.html
forallthetime.com_DEMO_index.html454×620 113 KB

#51

i apologize for the confusion

yes, that solves my small screen

my small device at 768px and under is wonderful, i am pleased

its the footer height on large screens i am having problems

sorry if i am confused :frowning:

#52

You asked for help on small screens lol :slight_smile:

I suggest you look at what I did for the small screen and then see what will be of use to you on large screens.

You need to get rid of the grid row percentage height as I mentioned above and as I have coded for small screen.

Try and see if you can do it yourself as most of the issues of the large screen will be similar to those that I fixed for small screen.

I’ll be back tomorrow if you get stuck. :wink:

1 Like
#53

THANK YOU! thank you for being cool about this!

ok, i tried looking at your code

i tried a google search

the best i came up with, which i am happy with, is to simply remove the padding

.grid-container > div {
  background-color: lightgrey;
  text-align: center;
  padding: px 0;
  font-size: 30px;
  
}

what have been your $0.02?

i like what you did here

  .grid-container .item4 {
    display: flex;
    justify-content: space-around;
    /* space items out*/
  }
}

if you ever need help with your juggling…:smiley:

sincerely, i do appreciate your time, trouble, and most of all patience!

#54

Change the 60% to auto in the grid container as mentioned before.

1fr 60%

Change to auto.

If you leave it at 60% then should content change in that section it may not fit in 60% and will overlap. 60% is a fixed height again and not good for fluid content. (Change it to 20% and see all your content poke out of the div if you don’t understand what I;m getting at.).

Flex and grid allow things to be fluid so don’t constrain them with fixed measurements when holding fluid content.

1 Like
#55

having problems with exact same code not working

i am in VS Code, and on-line

working on the footer

please see

https://forallthetime.com/DEMO/visit_drp2.html

notice the shift to the left

ok, i copied and pasted from another file the same code and its different :frowning:

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

to be clear, i copied and pasted THE SAME CODE from one file to another and they dont match

please help me

#57

You closed the section container after the footer instead of before it. That means the footer is a flex-item and only as wide as its content. Put the footer element in the correct place.

Look at the other page the footer is not wrapped in a section.

Footer code confusion
#58

Validating

please see

https://validator.w3.org/nu/?doc=http%3A%2F%2Fforallthetime.com%2FDEMO%2Findex.html

changing <meta name="viewport" content="width=device-width, initial-scale=1.0" />

to <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

wont apply, will go back, when i save… automaticaly re-writing my code to where is was originally

Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 4, column 5; to line 4, column 28

head>↩ <meta charset="UTF-8" />↩ <

for an example

you can see in the validation errors (there are A LOT)but i cant get the code to save properly to FTP later

i am in VS Code editor, and tried tweaking that…

frustrated :frowning:

help me out

#59

I don’t understand what you did? It seems you removed the space instead of the slash?

It should be this in html5

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Change all instances of /> to just >.

#60

sorry for the confusion

i took your advice and changed my code to a >

when i save it i get /> again, automaticaly reverts back to />

i would think this is a vs code issue

since i can not save proper code, i can not upload proper code

lets figure this out!

#61

from another source

Do you have any plugins or extensions? I would do a search through your VSCode settings. There is a setting that is doing that.

i tried looking through settings… no go

please help

#62

I don’t use VS code but there’s a SO question here about the same thing.

#63

first, many thanks to PaulOB

he pointed me in the right direction

BINGO!

VSCode is adding space and slash in ending tag of html code, how can I disable it?

Found the solution, Prettier was the problem. What I wanted is to
get rid of unnecessary slashes in HTML files, but leave auto formatting on other files like js, python…

What I did was…

  1. Go to setting (cmd + ,)
  2. search prettier
  3. on Disable Languages section add “html” (without double quote)

problem solved!

followed the setting advice, the other code is foriegn to me

did not do the exact instruction, couldnt find the option suggested,

so i did a google search… came up with

How do I turn off language in Prettier?

If you want to disable Prettier for a specific language, you can set the editor. defaultFormatter to null . "editor.

though i got into defaultFormatter and selected HTML from drop down and it works!

i hope i am good now!

what does

Editor: Default Formatter
Defines a default formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter.

mean? please be clear and simplify as much as you can :slight_smile:

i selected HTML from the drop down

am i set? is that everything?

#64

please see

https://validator.w3.org/nu/?doc=http%3A%2F%2Fforallthetime.com%2FDEMO%2Findex.html

i corrected every thing in VS Code, why am i still getting errors / info ?

errors like 7 - 13? i fixed the alt="media"

other errors like the > i successfuly corrected them too

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

confued :frowning:

#65

update

i entered my code into the validator

Validate by direct input

and i get

Document checking completed. No errors or warnings to show.

1 Like