Will Weaver Xtreme Do This? (posts show with excerpts that pop up)

[scrambler]

To reduce the size of the text on mobile as well as the space between title and excerpt, you could use a rule like below

@media all and (max-width:1000px;){
.home .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary,
.home .wvrx-posts .post-area:hover .entry-summary,
.home .wvrx-posts .entry-summary:hover {padding-top:0;}

.home .wvrx-posts .entry-summary {font-size:0.75em;}

.blog-post-cols-3 .post-title,
.blog-post-cols-3-span-2 .post-title {font-size:1em;}
}

I think you should also reduce the default space between title and content by changing the value of the top padding in the sizth rule from 1em to 0.5em

[scrambler]

Below are the rules modified to only apply on desktop

.is-desktop.home .wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;width:96%;}
.is-desktop.home .wvrx-posts .wvrx-fi-link:hover + .post-area, 
.is-desktop.home .wvrx-posts .post-area:hover{top:10%;}


.is-desktop.home .wvrx-posts .entry-summary {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
.is-desktop.home .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 
.is-desktop.home .wvrx-posts .post-area:hover .entry-summary, 
.is-desktop.home .wvrx-posts .entry-summary:hover {padding-top:0.5em;opacity:1;}

.home .blog-post-cols-3 img, .blog-post-cols-3-span-3 img {max-width:100%  !important;margin:0 !important;} 
.is-desktop .blog-post-cols-3 {width:33.3%;margin:0;} 
.is-smalltablet .blog-post-cols-3 {width:50% !important;margin:0 !important;} 
.is-phone .blog-post-cols-3 {width:100%;margin:0;} 

.is-desktop.home .wvrx-posts .wvrx-fi-link:before {
content:"";
position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
}
.is-desktop.home .wvrx-posts .post-title a {color:white !important;}
.is-desktop.home .wvrx-posts .entry-summary {color:white !important;font-size:0.8em;}

You would probably still want the compacting rules below to improve the layout on smaller desktop browsers. these are modified to only apply on desktop

@media all and (min-width:768px) and (max-width:1000px;){
.home .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary,
.home .wvrx-posts .post-area:hover .entry-summary,
.home .wvrx-posts .entry-summary:hover {padding-top:0;}

.home .wvrx-posts .entry-summary {font-size:0.75em;}

.blog-post-cols-3 .post-title,
.blog-post-cols-3-span-2 .post-title {font-size:1em;}
}

[Leigh2018]

@scrambler – thank you so much!! I have been sick and have yet to try this last bit, but she LOVES how the site is looking with this. You are awesome!!

 

[Leigh2018]

This reply has been marked as private.

[Leigh2018]

This reply has been marked as private.

[Leigh2018]

@scrambler – and I believe you can see the code but let me know if I need to paste it here and how to do that. 🙂

[scrambler]

That home page is a mess…

The masonry posts above the sitewide bottom widget area are completely broken, not sure why.

Basically all the posts are given the same top left zero, zero position, which means the masonry script is failing.

I see a number of weird error in the browser console

1. 0: ‘MicroModal’ is not defined

   front.js (1,1)

2. Can’t Load URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

   ping (1,286)

3. ErrorUtils caught an error: “<![EX[[“Tried to listen to element of type %s from %s: %s”,”click”,”Error”,”C…”. Subsequent errors won’t be logged; see https://fburl.com/debugjs.

   us9kIYBUO_M.js (55,6186)

4. perf_trace {“name”: “e2e”, “parent”: “PageEvents.BIGPIPE_ONLOAD”}: 4,418.281ms

So I would say, the first thing to do is remove all the custom CSS related to that page and see if that makes a difference.

If it does not, then create a new test page , and try recreating the page with posts with the three masonry columns and see if that works.

But  you may need to look into these errors, as they seem weird.

May be @weaver will have more insight on what seems to brake the masonry posts on the home page

[Leigh2018]

@scrambler – oh crud… I guess that all happened when we did two things yesterday

1- changed her DNS servers to her new Siteground account, where this new site lives and SG confirmed I did that correct.

2- changed her site from the staging url to the main url – which SG confirmed I did correctly as well.

 

I did use the plugin “better search and replace” as always to find and replace the old staging url to the new main url, and they confirmed that as well. I accidentally had capital letters in the url when replacing and we fixed that.

I will look into these errors. Thank you so much.  Wow this process is a pain to move a site.

[Leigh2018]

@scrambler – I actually did not add any custom css to the main page – or site – except for the css you made for me to do this and the css to have a Mailchimp pop plugin. So I guess it is the errors. I am going to try the new page suggestion too.

[scrambler]

I was speaking of the Custom CSS I gave you for the home page.

But the reason the masonry are broken on the home page, is that the masonry script must be failing and as a result, every post is given the same Top/left 0/0 position.

So once the configuration is clean, you may need to deactivate ALL non weaver plugin to see if one is interfering.

But also try to recreate the page not as a home page may give us indications

[Leigh2018]

@scrambler – oh I see… yes, no CSS except yours. I am going to recreate that page and deactivate plugins… and see what happens… great idea.

[scrambler]

Yes, first let us see if the masonry posts display properly on the home page without the custom CSS, if not do they without plugins, If not do they on a new page (they should as the article page shows masonry posts properly)

If they do on a new page, do they still do if you make that page the home page?

[Leigh2018]

@scrambler – ok gotcha. So I just deleted the CSS from the Global CSS custom area – which is where I had it… and it worked before. Now the masonry posts shows. I didn’t disable any plugin. So what does that mean exactly?

[scrambler]

OK,

Hide the sitewide bottom widget area on that page, and put the CSS back in.

Also paste the CSS here at the same time

[Leigh2018]

This reply has been marked as private.

[Leigh2018]

@scrambler – never pasted code in a forum so not sure if that is correct way … it made a full one in between each one which is not really there.

[Author]

Posts