Bottom nav media query, missing image, broken page

https://forallthetime.com/BI-300/about.html

how can i raise the footer nav to be right beneth it content above on small screens?

also, not sure why, i have an image in my editor but NOT on https://forallthetime.com/BI-300/about.html :frowning: help

yes i FTP the entire images folder

https://forallthetime.com/BI-300/info.html

these images do not display how they are in VS code :frowning:

why?

.panel-image {
  max-width: 450px;
  min-width: 200px;
  width: 50%;
  height: auto;
  margin: 0 10px 10px 0;
  float: left;
}
  
.panel-image_1 {
  max-width: 450px;
  min-width: 200px;
  width: 50%;
  height: auto;
  margin: 0 10px 10px 0;
  float: right;

}

this is my css for the images above

THIS is what i want!

am i wrong somewhere?

please what can i do?

is flexbox or css grid an option?

what would that look like??

i have a problem and need your help

thanks!

Well, for starters, you’ve got a div in there that is artificially and arbitrarily spacing the footer.

Second thing is your media queries are being overridden by your normal CSS (Line 127 vs line 365). If you want the media query to operate on the space div with the same selector, it will need to go after the default value.

Your CSS values for .panel-image_1 are being overridden by the css for .container img.

It might be worth taking a moment to explain the Developer screen and how it can help you diagnose these sorts of things.

When i look at your site, and you tell me you’ve got a problem with the image of the golf course, the first thing i do is go to your site, right click on the offending item, and choose “Inspect”. Which opens up the developer window, specifically looking at the element I right clicked on. On the right side of my display (not always the same in all browsers, but you should be able to find a “Styles” tab on your layout somewhere), I see this:


If you look at that image, you can see that most of the stuff under .panel-image_1 has been crossed out. That means something else is overriding those values. If you look upward, you can see the values that ARE getting applied to the image in question. This may help you troubleshoot your own problems in the future.

3 Likes

That image is at this address:


It is not at this address:

https://forallthetime.com/IMAGES/IMG_03691-1024x768.jpg:

Can you see your error?

Never use an empty div called space to make space. That’s not semantic and you should never do this,

It looks like you wanted a sticky footer and that is easy with flex (or grid).

The footer will stay at the bottom unless the content pushes it down when needed. This is called a sticky footer. This is achieved by making the element called main take up all the available space using flex:1 0 0;

@PaulOB: unfortunately, Discourse has scuppered your example by “helpfully” downloading a local copy. :rolleyes: Maybe try again with code tags?

1 Like

I didn’t notice that :slight_smile:

https://forallthetime.com/BI-300/IMAGES/IMG_03691-1024x768.jpg

The image is at this address.

The first backslash takes you back to root but your image folder is not at the root.

1 Like

You have this code in one of those pages:

.left img {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    width: 50%;
    max-width: 100px;
    min-width: 50%;
}

You have a width of 50% and then also a min-width of:50% !!!

You have a max-width of 100px but that will never be actioned because you have told it to be a minimum of 50% wide which in most cases will be more than the max-width of 100px.

Remove the min-width. or change it to a pixel measurement that is less than the max-width.

.left img {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    width: 50%;
    min-width: 100px;
    max-width:400px;
   height: auto;
}

You can’t have a min-width larger than the max-width as that makes no sense. Neither can you set min or max width to the same value as the width as that makes no sense either.

There is a similar mistake here:

.container img {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    width: 50%;
    max-width: 100px;
    min-width: 300px;
    float: left;
}

You want the min-width to be 300px so what is the point of having a max-width that is smaller than that? Which one wins out as they both conflict with each other. Your min-width should be smaller than your max-width.

first, i thank you :slight_smile:

and thank you for being cool about this… you can tell i struggle sometimes and i am fully aware of that

i hope this is fixed!

please, where was it?

i succesfully validated ALL my HTML via validator… minor issues really… for my google map

where please


not sure what you are telling me here :frowning:

i do get

i am just lost where exactly the code in question is

i dont understand what you are telling me… maybe re-explain or explain in a different way?

.space_2{
  margin-top: 35rem;
}

this is at line 361 - 366 in my style.css… what should i do with that?

i saw this:

seriously, i will finish my current project, i feel i am almost there, then will really dive into chrome dev tools. as of right now i know very little about dev tools :frowning:

will dev tools help me with my https://forallthetime.com/BI-300/info.html trouble? will it help me raise the footer nav on the 2 pages where it is very very low?

PLEASE i ask you how to make those work… if you feel you have expained that, sorry i dont follow :frowning:

listen, i appreciate ALL you are doing for me here! thanks for not calling me stupid

MANY THANKS!!

I explained that in my posts :wink:

ok, i understand this now

i understand this too

i undesrtand… i feel a bit embarrassed i missed this

it IS so oubvious!

follow up,

this worked!

also, the footer nav is fine on te About page, when i go into dev tools and make the veiw port smaller, the nav dissapears!

i am trying :slight_smile:

i would like your $0.02 on the post i made for m_hutley… his help too!

again, i thank you!

Your style.css (because…we’re talking about the CSS, so I took for granted this part was implied), line 127,and again at line 365. Using the element inspector, you can (or could have, you’ve changed things now) look at the space div element. Which should no longer exist, so kind of a moot point now but :smiley:

In fixing the space div bit, you’ve left part of the CSS laying around that’s applying a -70rem margin-top to the space div when the max-width of the window is less than 1200px.

I see it on line 130 of your CSS. Not sure where you’ll find it if our line numbers arent matching up for some reason…

  @media screen and (max-width:1200px){
    .space{
      margin-top: -70rem;
    }
  }

thanks for the quick response!

Paul suggested

BTW i still have a mising footer nav :frowning:

i think i removed that code after Pauls advice.

what else can we do?

what should i do with…

kindly eloborate :slight_smile:

has been removed, no effect

again, i thank you!

folow up

get back to m when you can

i want to resolve this site and start my dev tool learning :slight_smile:

you two have been so patient! i am glad i am not p*ssig you off too!

thank you!

I still see a div with class “space” in your page.

It hasnt been removed. I can see it in your CSS file at the URL you provided in your opening post. Again, the developer screen is your friend.

I dont… know how i can elaborate further. When you originally posted your problem, you had an entry at line 127 which was acting on the space div, and an entry at line 365 that was also acting on the space div. Those line numbers have changed, because you changed the file. So I cant elaborate any further on that. Given that the thing acting on the space div now is at 130, i assume you ended up shifting line 127 down 3 lines, and removed the thing at line 365.

1 Like

ok, some confusion :frowning:

i looked high and low and the ONLY code on space

was here

@media screen and (max-width:1200px){
    .space{
      margin-top: -70rem;
    }
  }

at a curent line 105 -109

i am getting there :slight_smile: I WILL GET TO IT

did i make an adjustment you didnt see?

any way, good news :slight_smile:

i removed

@media screen and (max-width:1200px){
    .space{
      margin-top: -70rem;
    }
  }

and my footer nav is there at ALL sceen sizes! great! progress!

also

.container img{
    display: block;
    margin-left: auto;
    margin-right: 10px;
    width: 50%;
    max-width: 100px;
    min-width: 300px;
    float: left;
  }

  .left img {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    width: 50%;
    min-width: 100px;
    max-width:400px;
   height: auto;
}

which one should i remove here?

i really want to put this headache behind me… wrap this project up and get into the dev tools you have mentioned here

again, any advice for https://forallthetime.com/BI-300/info.html

can dev tools solve this? is my code clean to acheive my goal?

maybe flex box or css grid would be smarter? tell me, what would that look like?

sorry to keep talking about this… it is one of the final problems i have before i can close down this project, i hope you can understand :slight_smile:

Then why have you left the div still in your page?

<div class="space"></div>

Remove that. Throw it away. Never use it again (or anything like it) :slight_smile:

There is no left class in that page so why is it there. You don’t need to duplicate rules in the cascade. If you have styles for an element and you want to modify it then just style the differences and not the whole block again.

I’ve quickly run through that page and got it into some sort of order (and valid).

The result is here:

I put a max-width on the content as you can’t have lines of text running all the way across the screen. They are probably still a bit too long but that’s up to you to research.

The design itself really needs some work so look at other sites and get inspiration.

WOW! this looks awesome!!! i thank you big time!

some adjustments, i added the cards style in where they belong (i hope!)

they look fine now :slight_smile:

i also added some text shadow and text color… they look fine now:)

i am impressed with your code! you made it function better, you cleaned up the code and aded aesthetics. well done!

follow up

https://forallthetime.com/BI-500/playground.html has blue footer text, not white like the rest of the site :frowning:

please see https://forallthetime.com/BI-500/about.html

missing 2 images…

i tried to fix this myself, but was unsucesful :frowning:

in vs code they are there

did i mess up the code somewhere?

is this proper?

<img class=“panel-image_2” src=“/IMAGES/IMG_03691-1024x768.jpg”

.

minus that last >

maybe give it some time?

help me out

same problem you had at the beginning, that Paul corrected in posts 3 and 6.

1 Like

Please read my previous posts about the missing images as they show in detail what is wrong.

Effectively your image folder online is not in the same position as your local copy. One is in the root folder and the online one is nested in another folder.

1 Like

ok, lost

been looking at the folders and i am confused

i see that there is no mention of BI-500

i am trying

also,

doesnt work for me :frowning: i put in my code, pubilsh and the image is stil not there… dont know why it doesnt work if the code iam using is at the addresss given
.
tell me… why do other images not set up like this?

is it ok to pass on the right code to make these images work THEN i can learn by studying that?

thats my best suggestion :slight_smile:

help, please

A relative URL that begins with / means “Go to the root of the domain”.

1 Like