Morning,

Without looking at the page I’d hazard a guess that the selectors are incorrect.
The code is looking for an ID of blur and a class of background-image are these used on your av-section and image at all? (there is also a “.” missing infront of background-image)

If you can post a link to the page someone can look at the html and check everything is correct.

Thanks

TJ

Good Morning (or maybe Good evening in Canada?)

The masonry gallery element will only pull images. To display posts or custom post types you will have to use either the Blog post, portfolio grid, masonry or post slide elements found in the content element tab of the ALB.

You’ll need to crate the short code in the default editor. I don’t know how familiar you are with the default editor so I’ve done some screen shots.

Select the masonry element from the default editor.

you can the select post etc on next screen

It will the pump out a nice shortcode for you to use :)

Any issue just holla

TJ

• This reply was modified 7 years, 5 months ago by tjswarbs78. Reason: so image link open in new window

Hi,

Be easier to troubleshoot on a live page. If possible can you post a link?
No log in details just a link so I can inspect the page and take a look :)

Thanks

Tim

Here are the changes highlighted and working

TJ

Hey there,

I noticed an error in the code which is causing it to render incorrectly. There was an extra quotation mark that caused the break
<div style="”position:" fixed;="" top:="" 0px;="" left:="" 0px;”="">

Try this line to replace it…
<div style=" position: fixed;top: 0; left: 0; z-index: 999!important;">

You could give the div a class or ID and then use custom css to change the element rather than using in-line code

Hope that help

TJ

Ah yes.
We removed the top padding from the image so it has moved up 5px so we need to move the entire element down to compensate.

.avia-image-container.avia-align-center {
  margin:17px auto;
}

That will add appropriate margin to top to push it down.

OR

you can move the entire left element up.

.links_page_promo_box {
  margin-bottom:10px;
  margin-top:0;
}

that removes the top margin but we then need to double the bottom from 5px to 10px to keep the spacing

Give that a whirl :)

Thanks

TJ

Morning,

Everything in enfold has a shortcode that can be used.
If using the default editor you can add elements via the little wand tool (second from the right).
This will create a nice shortcode, something like…

[av_masonry_gallery ids='' items='24' columns='flexible' paginate='pagination' size='flex' gap='large' overlay_fx='active' container_links='active' id='' caption_elements='title excerpt' caption_styling='' caption_display='always' color='' custom_bg='' custom_class='']

Flip to the ALB and you can then use it inside a text block or codeblock.
Word of warning though… shortcodes inside building block sometime break so it isn’t advisable.

If you want to add a css class to the element (you may have done this already?) follow these instructions

This will allow you to add a class to the masonry gallery so you can target it with css

hope that helps

TJ

Morning,
You have some custom css that is adding padding of 5px to the top of the image.

.links_page_video_image_styling .avia_image {
    padding-left: 0px!important;
    padding-right: 0px!important;
    padding-top: 5px!important;
    padding-bottom: 0px!important;
}

Remove that and the image and overlay will be flush.

You can just use

.links_page_video_image_styling .avia_image {
padding:0!important}

Then to keep the bigger spacing use

.links_page_video_image_styling .avia_image {
margin-bottom:5px;}

Hope that helps

TJ

Hi,

Did you paste just the script in Google services or the whole function.
If pasting to Google services just use

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘http://example.com/’;
}, false );
</script>

That’s the only reason I can think as to why it isn’t working. The code should be right at the bottom before the </body> tag

Hope that helps

TJ

Due to the fact that elements use different tags there is no way of using one piece of code change all fonts by 2pt. *
Under general styling > fonts you can change the global size of the p tags
Under advanced styling you can change the size of various tags such as h1, h2, blockquote

* strictly speaking this isn’t true. You can change the size of everything globally but it requires you to be using rem rather than px as your size value.
The base value for font size using rem is 16px.
Rem values are as fol;ows

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

By setting a percentage against this you can change font sizes globally and quickly. see below…

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

changing the html or root value to 100% or 50% would change the rem value of everything.

This solution would only work if you were coding a site from scratch. I’ve added it here simple to show there is a way :)

Hope that helps

TJ

**EDIT**

you could set a media quirey to change the standard font size (the p tag size)

@media only screen and (max-width: 990px) {
    p{
        font-size:10px;
    }
}

• This reply was modified 7 years, 7 months ago by tjswarbs78.

Hi,

The .container.av-logo-container elements has the logo, main menu and mobile menu nested inside it. Hiding it hides everything it contains
You could try..

@media only screen and (max-width: 990px) {
	div .logo {
  display:none;}	
}

That should hide the logo only on screens less than 990px wide.

Hope that helps

TJ

Hi,
If you haven’t already, installing either firebug or we developer tools in chrome will allow you to play around with the css on a live page.
A simple right click and ‘Inspect’ will pull up all the css and html structure for an element.

If you get stuck post a link to the page and I’ll see if i can help out with the css. Just a link no logins… I’m not a mod ;)

Hope that helps

TJ

• This reply was modified 7 years, 7 months ago by tjswarbs78.

Morning are you using the Masonry under the content elements tab or the Masonry Gallery under media elements?

They show content in different ways.

Thanks

TJ