please see
https://forallthetime.com/DEMO/index.html
on a large screen, there is a + next to Visit, Explore, and Events to show as a dropdown.
now on a smaller screen, my breakpoint is at 768 pixels i think, only Events has a + NOT my Visit or Events
please tell me specificaly what i need to do to add the + to Visit and Explore
many thanks!
It goes here after the text:
<label for="drop-2" class="toggle">Explore +</label>
<label for="drop-1" class="toggle">Visit +</label>
If you look at your events html you will see it is already there 
<label for="drop-3" class="toggle">Events +</label>
BINGO!
it works!
many thanks, Paul!
please see
https://forallthetime.com/DEMO/about_us_1.html
can not figure out to remove the white space at the bottom, leaving the grey footer at the bottom
also,
i uploaded https://forallthetime.com/DEMO/index.html
and https://forallthetime.com/DEMO/about_us_1.html
when i go to https://forallthetime.com/DEMO/index.html and click About Us i get a 404 error
the URL reads https://forallthetime.com/DEMO/about_us.html
you can see they are different
can not figure out why
both are validated
i ask for help here
You gave the answer in your post :).
The location is actually different from that.
There is a _1 on the end of the real page.
Itās not a case of removing the white space but of growing the content to be tall enough for the viewport. Usually you would create your pages with that in mind and use the same structure on every page.
To achieve on the about_us_1.html page you could do this.
body{
min-height:100vh;
display:flex!important;/* needed to over-ride existing important*/
flex-direction:column;
}
.hero{flex:1 0 0;}
That will not work for other pages as you have different structures in place.
it works!
many thanks!
crisis averted
help with a dropdown, pleaseā¦
i think i need a z-index
please see
the nav is hidden beneath the images
please help me out
Yes indeed you do . You answered the question yourself
Why didnāt you try it out ?
The nav needs a higher z-index than anything else (other positioned elements) on the page so give it a suitable number and make sure you donāt give anything else a higher number.
nav ul {
display: inline-block;
padding: 0;
bottom: 0px;
border-right: 1px solid rgba(108, 108, 108, 1);
margin: 0;
list-style: none;
position: relative;
z-index:99;/* only needs to be 1 to work but keep it higher just in case */
}
I also note you left a block of code right in the middle of the codepen that shouldnāt be there
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="images.css">
</head>
<body>
Get rid of that from the codepen.
works fine!
many thanks!
HA!
no clue why i did that!
ok, this must be simple
looking to change the image size on
https://forallthetime.com/DEMO/events_sub2.html
i have tried a couple ideas, no go
many thanks!
What size do you want to change the image to?
There are 2 images and they are fluid in size up to 50% of the available width.
What size do you want them to be and how should they act when they no longer fill the width? Should they be left aligned or right aligned or centered or should they be one large image all the way across.
Should the container shrink with them or stay at the large size of the screen.
As you see there are a myriad of choices for you to explain so itās not quite as simple as you may exect although the answer may be simple once we know what needs to be done
Iām going to guess that you want the image to still be fluid but not to get too big. I;ll also assume that the container stays full width and that you want the two image centred next to each other rather than centred in each half of the screen.
Unless of course there are going to be more or less images then that would need re-thinking.
Too many variables to give a proper answer but try this for now.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 480px));/* this changed to 480px from 1fr*/
margin: 10px auto;
padding: 10px;
max-width: 1880px;
background: #f9f9f9;
border: 10px solid #000;
/* place-content:center; would be centred if this is used */
justify-content:space-evenly;/* spaced evenly if this is used*/
}
I set the image width to scale between 280px and 480px and to be centred/spaced evenly,
auto-fit, minmax(280px, 480px))
Thatās about all I can do until I know the exact requirements
BINGO!
yes, thats what i like
i also like the text is positioned great too
at the 768px breakpoint, the top image is wider that tallā¦
not sure what my issue is 
i am after a full image
thanks for your help
Thatās the natural intrinsic size of the image. The image is 1000 x 750px originally. It will naturally be wider than it is tall.
It is taller in the larger than 768px screen width because it is stretched to 100% and object-fit-cover is used to maintain apsect ratio.
In the 768px media query the height is set to auto and thus renders at its natural aspect ratio.
If you want it taller then leave the height at 100%.
@media only screen and (max-width: 768px) {
.iHolder img {
width: 100%;
height: 100%;/* was auto*/
}
}
please see
https://forallthetime.com/DEMO/events_sub4.html
click on Visit+ and Explore+
i get no code or wacky code
Events+ works fineā¦ goes no where
how do i fix Visit+ and Explore+ to behave like Events+ ?
On the href for events you have this.
<a href="#!">Events</a>
There is no destination so it goes nowhere.
On the others you have an href destination so the page goes where you told it to.
<a href="visit_1.html">Visit</a>
Remove the href if you donāt want to go anywhere. e.g.
<a href="#">Visit</a>
kind of oubvious
thanks!
please see
https://forallthetime.com/DEMO/index.html
yes, i validated my code
footer is my problem
in my code i used grid template areas to place my code
its works fine in my text editorā¦ until i publish it and the layout is wonkyā¦its shifted to the left
i am after the Mail, Phone and Contact in a line and the ABCDEFG below it
however, on my iphone its fine, minus font sizes, but i can handle that
my other problem is the white space (forgive me if thats the wrong word) at the bottomā¦
light grey for the entire footer
also, in incognito mode, the footer is a complete grey and evrything lines up on the left
per the suggestion, i will likely remove the contact us link
please help me
THANKS!
Why have you given the grid 3 rows then. The above is 2 rows so change the footer to 2 rows.
.grid-container {
grid-template-rows: 1fr 1fr;
}
The above will fix that.
I must have said this about 5 times a day for the last 20 years but donāt use a fixed height for containers that hold fluid content like text.
e.g.
.grid{
height: 80vh;
}
I have your design open in a window above this tab so I can look at both at the same time and your layout overlaps because the content inside is greater than 80vh. That means it would overlap on small screens or any small width or height screens. Do not use height but use min-height and allow the element to grow.
80vh is a magic number anyway and not really a useful dimension for a web page. Use min-height or let the content dictate the height.
Iām not seeing that as it looks the same to me on desktop.
Iām not seeing that either.
works
fixed
i think my issue is in chrome
is it because its my default browser?
i tried clearing browser data, no go
i tried incognito, no go
fire fox, the code is fine
edge, the code is fine
iphone, the code is fine
where is my problem?
so i tried a trick i learnedā¦
<link rel="stylesheet" href="index.css?9999" />
i added a ?999 at the end of index.css
and my problem is solved!
not clear on why this worksā¦