Help needed on mobile menu

Ok I will change back the id widecontent now.

All done

Thanks, Graeme.

OK, I think we will might succeed tonight after all. Iā€™m still working it out, but I think we have a winner. Be patient a little longer, please.

All setā€¦

Please DELETE the four appearances of the following padding permanently.

styles.css (line 267)
responsive.css (line 180)
responsive.css (line 173)
responsive.css (line 104)

#lightboxcontent {
    padding-left: 15px;
}

Next, go to styles.css (line 272) and add the #vlightbox selector to the original #lightboxcontent selector so they look like this:

styles.css (line 272)

#lightboxcontent::after,
#vlightbox::after {
    content:" ";
    display:inline-block;
    width:100%;
}

Test thoroughly.

Ok, done that. Is that how you expected it?

I note on the projects page, the bottom line has an image at far left and one at far right on desktop mode.

I also notice on both projects and services on a phone all the images are on the left.

However, turn phone to landscape and on the Projects page they are neatly 3 across.

Never mind the screen shotsā€¦ :slight_smile:

Not sure I know what you mean Ron.

My fault. I had asked for screen shots showing the problems but after another read or two figured out what was going on. I edited my post by replacing the text. That was silly of me. Sorry.

The images are behaving according to the {text-align:justify} property. The single column of images resting to the left is not a new condition. That is the way your code is written and was happening before.

If I may, I would like to suggest a different strategy that does not use text-align:justify, but I need a minute to test first.

Ok, no problem. I realize it was there before, however thought what you had done may have corrected that as well.

Looks like I forgot to ask you to delete the padding-left at

responsive.css (line 164)
responsive.css (line 191)
responsive.css (line 216)

#lightboxcontent {
    padding-left: 15px;
}

Could you delete those, too, please?

Have done all that (I think) Canā€™t actually see any difference.

I have a doctors appointment now so will be back in a couple hours.

1 Like

I wondered about it, but it is a normal effect of your {text-align:justify}. A single word sentence aligns to the left. And you only wanted an easy fix for the text-align:justify problemā€¦ :sigh:

For the sake of experimenting, change text-align:justify to text-align:center. Doing that should ā€œfixā€ the Projects page:

style.css (line 258)

#widecontent {
    border: 1px solid #ccc;
    float: right;
    margin: 30px;
    overflow: hidden;
    padding: 0 15px 15px;
    text-align: center;   /* CHANGED from: text-align:justify */
    width: auto;
}

There are other choices, but that is the easiest solution.

If you can live with that, then delete the #vlightbox selector that we added earlier to accommodate text-align:justify from

styles.css (line 271)

#vlightbox::after   /* DELETE this selector */

ie, THIS

#lightboxcontent::after, 
#vlightbox::after {
    content: " ";
    display: inline-block;
    width: 100%;
}

becomes THIS

#lightboxcontent::after {
    content: " ";
    display: inline-block;
    width: 100%;
}

Personally, I would like to go back to the Services page and change the way those boxes adapt to narrowing widths by jumping from from 4 columns to 2 columns then to 1 column so they also include 3 columns. I think it would look better.

Hi Ron,

Back now. Have uploaded those changes. Projects page looks better now changes nicely from 5 wide (with 2 in the center at bottom) then moves to 4 wide, 3 wide, 2 wide and finishes up as before with 1 wide nicely in the center. Great.

So now you think we can get a similar effect 4, 3, 2 then 1 on the services page. Sounds good.

I assume when we add more new images to that page the effect will remain the same?

Yes.

Yes, it should.

Ok, all good. I will wait for your magic wand to wave over the Services page.

It will likely be after Iā€™ve had a long nap before I work on the Services page.

In the meanwhile, hereā€™s a small issue for your consideration:

The position of the company banner image on the home page is about twice as far from the left edge as is the company banner on the other pages. Which do you prefer? Since I expect you to be serving all of the pages with the same php file, you may as well pick the position that you prefer. :slight_smile:

Oh, I hadnā€™t noticed that. The banner is called in from all pages as id=ā€œheaderā€ which (I think) starts at line 134 in styles.

I guess at the end of the day the answer to your question is whatever looks best. That is what the punter sees live.

After dinner here now in Australia, so I will recheck again tomorrow morning. Good night.