Forum Replies Created
-
Posts
-
Cancel that, figured it out.
For anyone requiring similar functionality in the future, just add this code to functions.php:
add_filter('avf_avia_builder_masonry_lightbox_img_size','avia_change_image_size_masonry', 10, 1); function avia_change_image_size_masonry($size){ return 'full'; }Developed a second website with Enfold for a local acupuncturist, had to write custom code for some functionality here and there.
Enjoy!
Hi Ismael,
I do have the most recent update of Enfold, and disabling the plugins did not fix the issue.
Hmm.
Hi Ismael,
This happens at 1920×1080, and it occurs on a 15″ iMac screen and a 15″ lower resolution monitor as well.
I seem to be able to reproduce it on every monitor I check.
Thanks!
Hi Devin,
I checked three different computers and three browsers, the issue remains consistent.
Are all if the images perfectly displaying the 1px gap? Because entire sides of some images don’t on my end. Also, there should be quite a few images, but if you look closely, many of them overlap to the point where the image being covered is only visible by a couple if pixels.
You don’t see this?
Thank you
Hi Devin,
I linked the same image so you can see the resolution issue I’m talking about (assuming you use 1920 x 1080 res.).
I’m using 1920 x 1080 res. on my monitor, and that image is 1920 x 1080. I set it to no scaling, but enfold is still adjusting the image and ruining its quality by about 20%.
I’m wondering why? I want to know the perfect size image to upload for a 1920 x 1080 screen without losing so much quality due to web resizing.
Figured it out.
Solution for anyone else with my problem in the future:
This setting in W3 Total Cache breaks the lightbox:
Under ‘Browser Cache’ menu…
[_] Prevent caching of objects after settings change
Whenever settings are changed, a new query string will be generated and appended to objects allowing the new policy to be applied.Don’t turn that on.
Hey Ismeal.
I took your advice and updated the theme to the most current version. However, I’m still getting the same Hatom entry errors.
Those links you sent me aren’t doing it for me. The first link has dead pastebin links, and the file names differ somewhat from the Enfold files.
And the second link contains two tutorials which I have already tried to follow, but sadly their fixes can’t be replicated because the code and file names differ too much from what Enfold uses.
Any detailed help would be really appreciated!
Many thanks
EDIT: Okay, so I just realized that the blog hatom entries work perfectly fine. It’s just the masonry blog display on the homepage that is giving Hatom entry errors. So why is the Masonry blog element giving problems?
Hi Yigit,
I entered this code in but no luck. The images are still displaying on mobile. I really just want to hide those three columns with animated images on the home page from being seen on the mobile devices are they are positioned by pixel distances and appear out of whack.
For the sake of not uploading, and what I meant about adding a background to a section in this case with rounded corners, please see:
http://granify.com/pricing/How would I go about adding a section like that into enfold?
Thanks for your help!
Awesome thanks Ismeal.
I might need help with the Media Query css.
I want all of those animations to be hidden for the mobile view. I’m not very familiar with the CSS to isolate columns or sections? Or do I just add this for each image that is animated? Because I don’t want big white gaps between the paragraphs on the mobile view either…
And this question was unanswered:
I’m wondering how I would go about adding a background with rounded corners and a shadow for the columns to sit in. See ex:
http://granify.com/ <– You need to scroll down to their content.
Would this just be a matter of making a large background image? Or can I give columns their own background images?And lastly! (I need to tip you guys some BTC, honestly. haha)
How do I make the header transparent? I want the header to be fully transparent when it’s in full view, but to stay how it is now when someone scrolls down.
Similar to the effect in: https://www.picatic.com/Thanks Ismeal!!
I’d love for the header to be a bit more modern. I’d like the header to act like http://disqus.com/community/ or https://www.uservoice.com/stories/. Where on scroll it goes white and is backed by a background image.
I definitely agree with this, not digging the header options too much.
I would also like some lightbox effects for buttons and contact forms. It would really aid in the process of lead generation.
Got the plugin to work, didn’t notice the settings page.
Now it’s just that small blog header picture problem…
Hmm, so I enabled that plugin and my comments still wont go away. Not certain why… seems like others have had success with this plugin but it’s just not working for me.
Hi Ismael,
This method works but it still constrains the image size to the column. Is there any way around that?
Josue,
I don’t have an example as I deleted it back then. Basically, imagine a picture of a black square and you would hover over it, the black square would turn bright. I didn’t have to do any code for this effect and I’m wondering if this was scrapped in an update?
Ismael,
I can’t link you the website and don’t have time to make a screenshot sadly. (I know, I know)
You were pretty much on point with what I wanted to do. You code works fine but when I make more than one Custom CSS Class for the quick CSS, my images vanish except the first one.
So I have three sections on the same page, in each of these sections there is a paragraph of text and a header in a 1/2 column. These three sections are separated by default Hr dividers. I essentially want three different pictures that will slide in beside the paragraphs of these three sections. These pictures will be large and for stylistic reasons I want them to align with the text but at the same time overlap the Hr dividers if need be. Your solution above seemed to work for this after I added a z-index.
My question to you is can I accomplish this by placing the image another 1/2 column beside the 1/2 column with the paragraph? And if not (manually adjust left and top position), how come I can’t get all three pictures to display if I assign them different CSS Classes and give them separate properties in Quick CSS?
Hope that made more sense.
If you want to see an example, http://www.apple.com uses this a lot.
Hi again Ismael,
This doesn’t seem to be working when I add more than one picture,
I’ll make custom css class such as these:
mainpage-imageone
mainpage-imagetwo
mainpage-imagethree
Then I will assign the three images these in the quick CSS:
.avia_image.mainpage-imageone {
position: absolute;
left: -50px;
top: -100px;
}
.avia_image.mainpage-imagetwo {
position: absolute;
left: -50px;
top: -100px;
}
.avia_image.mainpage-imagethree {
position: absolute;
left: -50px;
top: -100px;
}The first image functions and displays. The second and third images don’t display at all, I even tried chaning the name of the Custom CSS Class.
Hi Ismael!
This solves the ability for the picture to float above other objects which is great. But the image is still confined to the dimensions of the half column?
Hi Ismael,
This helps, but I only want it for certain textblocks. For example I’ll need multiple text blocks on a single page, but they’ll need to be different in size..
Is there an ID that I can assign?
How would the CSS look for that?
Thanks Ismael!
Ah, well my fault. Sorry.
Thanks for this! Yeah.. looks like the portfolio is working properly now!
Thanks again!
