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.
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;
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.
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.
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.
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
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
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
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;
}
}
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.
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)
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.
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.
doesnt work for me 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?
help
Maybe try again with code tags?
