Alignment of Front Page Columns

[hkp]

Hi @Scrambler,

Yes…. can’t deny I give up on things…  But I usually come back to them when I get my second or third wind and some new ideas…..  New insight breads enthusiasm, so I’ve found…  🙂

Sorry, I’ve been rather busy and just got to testing your CSS just now, and it works 100%, and I think it looks pretty good.  Perhaps more formal than before, especially when using Arial sans-serif.

I have updated our live site with this CSS, so you can see it at: https://www.hiskingdomprophecy.com/

After checking it all on 5 phone browsers, I think I may consider to increase the right padding by 0.1 or 0.2, as on some browsers it is rather tighter than I like on the right, but that will be for another day — after I’ve got used to the appearance, and made sure all is settled down.

To me, justified text needs about a 5px right padding on phones, so as not to cramp it.  However, the desktop version looks great as is.

FYI,  as I was doing my testing the last time (9th Feb) I found that on 1 browser, Firefox, that the site-tagline was on 2 lines.    All other browsers, including Firefox Light, were unchanged.

Even moving it to the left (removing the default 7% indent) and aligning it with title, did not work and was still too long.

The solution was to set site-tagline = width: auto.    Then it worked again on Firefox.

For consistency, I made the changes global, so the desktop and phone appearances match and they all look fine.  So the issue was solved.

I was just back now checking on all of the 5 phone browsers, and found it interesting how they all render the fonts ever so slightly differently. The site-tagline (length) is a good example of that.

@Scrambler, thank for all your help and comments and encouragement.  I think this one is finally done and I will now get back to the project under development.  So much to learn there before I can get on to working on it again.  And blocks or no blocks…. that is a question still to decide…  🙂

Regards and thanks,
Angus

[hkp]

The Final Version

Just in case anyone searches for the final version which is equally aligned right-left on phones now too.

Looks pretty good and balanced to my eyes…

.content-2-col p {text-align: justify;}
#content {padding-left: 15px; padding-right: 5px;}
.wrapper .container {padding-left: 5px; padding-right: 15px;}
.is-phone .wvrx-posts .content-2-col {padding-left:0 !important;padding-right:0 !important;}
.wvrx-posts .content-2-col:nth-of-type(2n+1) {padding-left:0;padding-right:2%;}
.wvrx-posts .content-2-col:nth-of-type(2n) {padding-left:2%;padding-right:0;}
.is-phone #content {padding-left:2% !important;padding-right:2% !important;}

Regards and thanks,
Angus

[Author]

Posts