Changing post layout…child theme or block editor?

[PolyWogg]

Small update — I may be actually learning!

a. When I implemented your code from the other post (extra space on top), I put it BEFORE this code, and that did NOT work at all, it just disappeared. When I looked at the order, it didn’t make sense since I was moving margins, etc. So I tried putting it afterwards, and it was fine. So all good there. But then I realized that made no sense either, it shouldn’t matter which order it is in. I realized I had messed up the code with my last tweak and left out the last }. Doh! 🙂

b. Then I was looking at my main page, all good, calendar entry is showing properly, more or less (it’s a bit off when I have some FIs that are not full 150px wide), so I opened a blog post, and wait, everything was the old way. Main page shows calendar to side; post page shows the old way. But INSPECT ELEMENT shows basically the same wrappers. So the code’s the same. Checked your HTML code above, looked at the location and found out there are two boxes – one for posts and one for posts on single pages. Added it there too, and bam! it’s working.

Maybe there’s hope for me yet. Thanks again!

Paul

[scrambler]

If you want the CSS top apply to all blog pages and single post pages, there is no need to put it in the page css box AND the post CSS box, just put the CSS in the THEME Global Custom CSS Rule box. Like that you only have the rules in a single location…

[PolyWogg]

It was the HTML I was putting in two places, not the CSS … MAIN / OPTIONS / POST SPECIFICS / and then TOP POST INFO LINES and TOP POST INFO LINE (SINGLES). If that can be done on a global basis with HTML, happy to just put it in one place, but works for now.

For the CSS, you were right that the CSS elements were in two places. I can leave MAIN / OPTIONS / CONTENT / SPACE set to 1em as standard, that’s good, but I have to use the block reduction too or the two combined are too big. I had made POST 0 and then CSS .5, but makes more sense to just make Post the regular 1 3m, and reduce CSS for the block to 0 at the top.

On to standardizing my FIs.

P.

[PolyWogg]

Hi Scrambler,

So I was trying to make sure the calendar block would be centred under my FIs which are 150 px (fixed) x 150 px (scalable slightly, could be less). Since each month’s name has varying lengths, and thus would produce a variable width box, I tried forcing the data block to be 150px wide, same as my FIs, but for some reason, that proved too much, so I reset it to 140…seems about right for layout to get it directly centred under a 150pwide FI, with left 39px. All good. Until, of course, I tried it on another screen, and since the layout overall is responsive, it shrunk the margins beside the FI, shifted that over, with no change in the positioning of the calendar box.

Is there any way to make the box more calendar friendly for desktop? I’m fine to lose it completely for tablet and phone, and in fact, I would prefer if in phone, the image was wrapped with content (not sure how to do that yet), but first things first. Is there anyway to centre it under the FI (relative position?).?

.entry-meta .mymeta {position:absolute;
left:39px;
width: 100% !important;
max-width:140px !important;
margin-top:120px;
text-align:center;
font-family:arial;
font-weight:bold;
border:1px solid black;
background-color:white;
}

A lovely Easter challenge for myself…fyi, the best place to view the changes is on this full post –> http://polywogg.ca/series-premiere-stumptown/

Paul

[scrambler]

“I’m fine to lose it completely for tablet and phone, and in fact, I would prefer if in phone, the image was wrapped with content (not sure how to do that yet), but first things first. Is there anyway to centre it under the FI (relative position?).“

We can work this way. You need top fully decide what you want for desktop and mobile and then we can take the right approach.

We can fix the calendar box to make sure it is always centered, but your remark above requires to take a different approach to the FI layout, as there is no way the text can ever wrap around the featured image on mobile with that layout. It will require to start with a different layout and use CSS to get the layout on desktop.

So if the featured image will be 150px wide and you want the text to wrap around it on mobile, you need to tell me how the calendar box should be positioned in that layout.

 

[scrambler]

In the mean time, centering the Calendar box would require the changes below for the code and the CSS

<div class="mycalend">
<div class="mymeta">
<span class="mymonth">%month%</span>
<span class="myday">%day%</span>
<span class="myyear">%year%</span>
</div>
</div>

Then change the CSS I gave you previously to
.entry-meta .mycalend {
position:absolute;
width:150px;
left:2%;
margin-top:100px;
text-align:center;
}
.entry-meta .mymeta{
display:inline-block;
font-family:arial;
font-weight:bold;
border:2px solid black;
background-color:white;
}
.entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
.entry-meta .myday {clear:both;display:block;font-size:150%;}
.entry-meta .myyear {clear:both;display:block;}

[PolyWogg]

Thanks Scrambler…

a. For the desktop, we’re SOOOO close. On my computer, the calendar box still overlaps my FI. Here’s an image.

http://polywogg.ca/overlap/

So that seemed simple to fix, I would just increase the top margin to 120 (my old setting), and when that didn’t work, I tried 150 or 170 to get it to move. Nada.

EXCEPT that on my wife’s computer, using Edge instead of Firefox (if that matters), it moves just fine…with 170 it is way down the page. So I tried reducing it to 20px. Should be complete overlap. Nope, doesn’t move. Same spot on blog list and single post. WTH?

I’m missing something obvious, I know it.

P.

[PolyWogg]

For mobile, I’m torn between trying a separate mobile theme (unlikely) and just simply excluding the calendar and the FI, leaving just main text.

P.

[PolyWogg]

Solved layout on phone…

.blog.is-phone .post-area {clear:both;position:relative;overflow:visible;} — not sure if I still need this.

Remove calendar
.is-phone .entry-meta .mymeta {display:none;}

Remove FI
.is-phone .wp-post-image {display:none;}

Except my menus don’t scroll if longer than a screen. Dang it.

P.

[scrambler]

Right now you have

.entry-meta .mycalend {
position:absolute;
width:150px;
left:2%;
margin-top:20px;
text-align:center;
}

You need to increase the margin top to 150

.entry-meta .mycalend {
position:absolute;
width:150px;
left:2%;
margin-top:150px;
text-align:center;
}

Works fine when I do it (Including on FF), if not for you, change it and post back with the rule in place

But you have a Mega menu messing up your page right now

[PolyWogg]

Okay, I have no idea what I was changing before. Maybe I was changing the width instead of the top margin and I just couldn’t see what I was doing. I’m going bug-eyed today.

Yep, with that in place:

• works fine on blog;
• works fine on single;
• works fine on single with long month (September);

Unfortunately, I noticed on tablet that if it is narrower than screen, the title may wrap to two lines which then pushes the calendar down further. I think it is just easier if I exclude it from tablet and phone.So that leaves me:

Desktop — FI + calendar to the left;

Tablet — FI only, no calendar;

Phone — No FI or calendar

I think I even understand the final code. Do you see any problems with the ending?

SET LOCATION AND SIZE FOR CALENDAR BLOCK

.entry-meta .mycalend {
position:absolute;
width:150px;
left:2%;
margin-top:120px;
text-align:center;
}

STYLE THE DEFAULT TEXT

.entry-meta .mymeta {
display:inline-block;
font-family:arial;
font-weight:bold;
border:2px solid black;
background-color:white;
}

STYLE THE THREE ENTRIES

.entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
.entry-meta .myday {clear:both;display:block;font-size:150%;}
.entry-meta .myyear {clear:both;display:block;}

REMOVE CALENDAR FROM BOTH TABLET AND PHONE

.blog.is-mobile .post-area {clear:both;position:relative;overflow:visible;} ** Not sure what this one does
.is-mobile .entry-meta .mymeta {display:none;}

REDUCE SIZE OF THE FI ON A TABLET OR PHONE

.is-mobile .wp-post-image {
max-width:75px;
height:auto;
}

REMOVE FI FROM PHONE ** Unless you know a way to put it above the title on phones and tablets, then I would keep it, maybe at 100px size.

.is-phone .wp-post-image {display:none;}

 

When I started this odyssey, I was mostly just worried about what it looked like on the desktop, but over the last few days, a number of users have pointed out that my site is not mobile friendly. With the restyling, I’m removing some of those barriers but one huge remaining challenge are the Weaver menus. When I’m on my phone, and I open the menus, and choose say the last one on the list, they go past the height of my phone and I can’t see the bottom options nor scroll on the menu. I thought that Mega Menu worked so that if the screen was smaller than 600px, then it would replace the regular menu with the Mega Menu, but instead it seems to replace it entirely.

I really don’t understand how to make it more mobile friendly…but at least the rest of the stuff above seems to be going okay.

Paul

[scrambler]

to REMOVE CALENDAR FROM BOTH TABLET AND PHONE

just use

.is-mobile .entry-meta .mycalend {display:none;}

to Unless you know a way to put it above the title on phones and tablets, then I would keep it, maybe at 100px size.

Use the rule below

.blog.is-phone .post-area {clear:both;position:relative;overflow:visible;}

[scrambler]

For the rest of your mobile question, please open a new thread with precise description of what you are trying to achieve and solve

[PolyWogg]

Okay, cut the code down, looks fine on my phone…and in the preview in APPEARANCE / CUSTOMIZE.

But my Samsung 10″ tablet shows the calendar AND the FI in the normal spot, the full desktop screen. It doesn’t seem to recognize that it’s a tablet. I’ll try it on some iPads tomorrow I guess.

P.

[scrambler]

Tablet or phone has nothing to do with the actual device, but screen resolution.

If the screen resolution is wider than 768 px it is considered a desktop. If the resolution is big enough the layout should look as good as on desktop even on a tablet.

If you really don’t want the calendar on a tablet even if the resolution is big enough, there are classes we can use to target android or ios.

You could include selector for them like below

.is-mobile .entry-meta .mycalend, .is-ios .entry-meta .mycalend, .is-android .entry-meta .mycalend {display:none;}

[PolyWogg]

Thanks that fixed it. For some reason, my tablet (Samsung Tab S 2) was showing the calendar but the layout was different (it overlapped my FI). I don’t care if it’s there on the tablet or not.

So that just leaves me with one last Q about tablet and phone … with calendar removed (or at least not displayed), is there any way to revert to the date showing just under the title or not? If not, or not easily, no worries. Just a thought.

P.

[Author]

Posts