[hello.sun]

Thank you for the response. I didn't know I could do that; it was the first time I was using a custom font.

Could you please show me how to do that or what to search for in google?

[hello.sun]

I found the solution.

I commented out the following class and code in the style sheet

 
/* Fadeup Effect
---------------------------------------------------------------------------------------------------- */
/*
.js .fadeup-effect {
	opacity: 0;
	overflow: hidden;
	-webkit-animation-duration: 1s;
	animation-duration:         1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode:         both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function:         ease-in-out;
}

@-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name:         fadeInUp;
}
*/

[hello.sun]

I found the solution.

I commented out the following class and code in the style sheet

 
/* Fadeup Effect
---------------------------------------------------------------------------------------------------- */
/*
.js .fadeup-effect {
	opacity: 0;
	overflow: hidden;
	-webkit-animation-duration: 1s;
	animation-duration:         1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode:         both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function:         ease-in-out;
}

@-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name:         fadeInUp;
}
*/

[hello.sun]

Victor thank you. Would you mind giving me an explanation on how that worked?

The menu-item-893 comes from the list item (li); # is the ID selector; what does the a focus on?

Thank you

[hello.sun]

What has your experience been working with those 3rd party themes?
I've stuck with StudioPress themes, because of their support and this community forum. Thanks

[hello.sun]

Will do!

It's the last section, before the footer.

This is the code I found to maybe be causing it, but it's executed as inline css.
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>

I tried to display: none;, but that took away all the wp-block-spacers.

[hello.sun]

I'm also having trouble with this.

Have you figured anything out yet?

[hello.sun]

Hey Marcy,

Thanks for your input. Yes, I realized that was the easiest way to go without wasting more time.

[hello.sun]

WP Engine / StudioPress Support was able to put together a script that fix's the issue I was having.

Copy and paste the following code into the “Footer Scripts” field:

<script>
// Apply matchHeight again on final load.
// Accounts for late-loading images.
jQuery(window).load( function() {
    jQuery( '.half-width-entries .content .entry, .academy-grid .content .entry').matchHeight({
        byRow: true,
        property: 'height',
        target: null,
        remove: true
    });
});
</script>

The script works by adjusting the height of elements once images fully finish loading. It aims to reduce the overlap effect you’ve kindly shared in your screenshots.

[hello.sun]

Hi Victor,

Yes, sometimes it loads properly, but other time it loads incorrectly and only in Safari.

I'm including two links to pictures, one is from my clients website and the other is from the StudioPress demo. Both have the issue in Safari.

On a side note, I'm also in contact with StudioPress support to see if they can help as well.

https://imgur.com/D0mhkQa

https://imgur.com/Cv7fmyK

[hello.sun]

I figured out a solution to my problem which didn't involve changing the widget layout format.

I switched from using a Custom HTML Widget to using a Text Widget and then placed both widget into the text widget under the 'text' tab. Works great!

[hello.sun]

Yes, I ended up learning more about them in the CSS course on w3school.

Thank you for mentioning your free videos.

[hello.sun]

*bump

Can anyone help me or point me in the right direction?

Thank you

[hello.sun]

I did try adding the .post-image class to the additional css class section of the image, but it ended putting a border around a section about 1/2 inch above the image.

Your code did work! Thank you Victor.

What does the "img" selector in your code do? I haven't yet learned about css classes with an img selector.

A side question for you, do you build websites using Gutenburg or the classic verision of WordPress?

I've heard of mixed reviews from developers with Gutenburg.

[hello.sun]

Victor, your posts throughout this forum have been so helpful!

Thank you for being an active member on this forum.

[hello.sun]

I see, thank you!

BTW, if you make a typing mistake in PHP, you'll bring your site down. Don't use the WordPress editor to make changes. Use FTP and an editor in your local environment.

Also, when you mark a post as resolved, I or another forum moderator closes the thread to further comments because the problem is solved.

Thank you for letting me know about this.

[hello.sun]

Thanks Victor and Baz!

[hello.sun]

Thanks Victor!

If CSS is for styling, PHP is for structure and functioning?

I'm currently learning html and css from the W3 course.

Also, I found using the Academy Pro 'cs footer' accomplishes what I was trying to do... center call-to-action widget.

[hello.sun]

Hi,

No, I'd like to change the color for the entire website.

I ran into those lines of codes yesterday when I was looking to edit individual widgets.

Thank you for your input though.

[Author]

Posts