Hang on to that thought and we’ll talk about it after the next series of changes (there aren’t many).
The following code only contains a few changes. I am copying the whole thing because I’m not positive that I can identify each item that was changed… that, plus formatted code is easier to read than left-aligned code.
If you will copy and paste this code (replace the original with this) into the appropriate portion of style.css, the look of the menu will improve a bit.
style.css (lines begin at 171)
/* main menu */
#menu {
background-color:#33348e;
font-family:verdana,arial,times,serif;
font-size:.9375em;
overflow:hidden;
padding-left:30px;
}
#menu ul {
padding:0;
margin:0;
}
#menu ul li {
list-style-type:none;
float:left;
position:relative;
padding:0;
margin:0;
}
#menu ul li a {
display:block;
color:#fff;
padding:.875em 10px;
margin:0;
}
#menu ul li a:hover {
background:#fff;
color:#33348E;
text-decoration:underline;
font-weight:normal;
}
#menu ul li.current_page_item a {
background:#fff;
color:#33348E;
text-decoration:underline;
}
After you have finished editing and testing the code in the previous post, please explain why you have not replaced the viewport meta tag as suggested. Unless you have a compelling reason otherwise, I still think you should replace it with the non-restrictive version below.
Ok, all uploaded. That has widened the blue background quite a bit at all widths. Maybe a bit too wide, but still ok I guess.
Have also added the viewport as suggested. That is done in the meta includes so all pages are the same. I didn’t realize you had told me about that one before.
With that 1% padding in place, compare the height of the menu bar when the browser is open to the full width with text items showing (it’s shorter) to the height of the menu bar when the hamburger menu alone is visible (it’s taller because it is being added in the responsive.css file). The difference is obvious to anyone who sees that change. Deleting that padding reduces the difference to insignificance.
So DO delete that padding I had marked it to be deleted but overlooked sending the notice to you. Cluttered notes. :paper-shuffle:
If there is another height that is bothering you, or if the height at which the menu is set now seems too tall, it can be reduced a tad if needed.
That is probably because the breakpoint (media query) at which the hamburger menu is being called is 720px now instead of 960px (the full page width) as it was before.
I don’t recommend catering to specific devices or calling the hamburger menu any sooner than needed, but if you feel otherwise, you can change the media query to something wider than 720px.
Have I forgotten to address anything that you asked?
Ah, yes, the boxes on the Service page. How far would you like to go to improve that page? Not in miles, just in terms of work?
I can see about applying the text-align:justify last row fix, if you’d like, or we can explore a few other possibilities that would probably work better including flexbox.
Hi Ron, I think we should keep it simple. It is not like it is a multi dollar site. It just has to look ok to the average Joe. Maybe the problem is similar/same as that on the gallery page also - last line there the same problem.
You can fix the last row of the Services images by adding the following CSS. I inserted it into styles.css at line 272 right after #lightboxcontent.
#lightboxcontent:after {
content:"\00a0";
display:inline-block;
width:100%;
outline:1px solid pink; /* TEMPORARY TEST only. To Be DELETED. */
}
A side effect of the technique is that it adds a bit of space beneath that last row of images. I drew a pink outline around the space so you can see where it is. You can delete that outline whenever you wish.
The problem with the Projects gallery is the same but they galleries are constructed differently. I’m not likely to be able to fix the Projects gallery. If someone else hasn’t offered a solution by tonight, I’ll give it a go, but with little hope of success.
Thanks so much for that. It works perfectly. Incidentally I tried the same on the Projects page by removing the id widecontent and replacing it with the id lightboxcontent and it appears to have more or less worked. However now the images are not centered but at least all rows are equal even dragging the page in from 5 images wide, to 4, to 3 to 2 and eventually one. All nice and even except for the left margin/padding. Please let me know if I have gone off on the wrong tangent and I will put it back how it was for you if you have something else in mind.
Best regards,
Graeme
Just had another thought. Could probably copy the id lightboxcontent, rename it id projectscontent (or something) and then add some left padding or some other way to float them in the center/evenly across the page with even white space at the edges.
I had tried the same “fix” on the “Projects” page as worked on the “Services” page, but it didn’t work on the “Projects” page.
Would you mind restoring the previous styles for the “Projects” page? Since it was “mostly working” then, that seems like the best place from which to continue.