Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 25, 2014 at 9:17 pm #283756
    djshortkut

    1. I used one of your templates to create some pages on my website. When I add a medium sized image with text beneath it, when I look at the site on the iPhone in landscape mode the image and text don’t line up correctly. This also happens on your demo. When you use any other size image the text formats underneath the image correctly. I have attached some images so you can see what I mean.

    2. I have a masonry gallery on the bottom of my homepage with a 1 pixel gap. The masonry gallery doesn’t stretch fullwidth and there is a gap on the right hand side of the page. This also happens with your demo. Please see images.

    3. When I load an image in for the testimonials it shows up blurry on retina displays like the iPhone and iPad (same thing happens with your demo) It looks ok on a non-retina screen. Is there a way to increase the pixels of the image that shows up for the testimonial image so it looks good on the retina display?

    4. I added animated number in on my about page and changed the text color to white. I need help changing the commas, plus signs, and % signs to white as well because they are currently grey. The same thing happens on your demo.

    Hopefully you can give me some quick css to fix these issues and you can get these issues fixed in the next update. Thanks in advance!

    June 26, 2014 at 1:30 am #283846
    Ismael

    Hey djshortkut!

    Thank you for visiting the support forum!

    Please open one thread per topic. This will keep the threads re-usable if another user is experiencing the same issue.

    1.) Add this on Quick CSS or custom.css:

    .avia-image-container.avia-align-center .avia-image-container-inner, .avia-image-container.avia-align-center .avia-image-container-inner img {
margin: 0 auto;
display: inline-block;
vertical-align: bottom;
width: 100%;
}

    2.) What is the screen resolution of your monitor? Add this on Quick CSS or custom.css:

    @media only screen and (min-width: 1800px)
.responsive.html_stretched .av-masonry-entry {
width: 17.8%;
}

    3.) Add this on functions.php to force the testimonial image to get a larger version of the thumbnail:

    add_filter('avf_testimonials_avatar_size', 'avf_adjust_testimonials_avatar_size' );

function avf_adjust_testimonials_avatar_size($avatar_size) {
	$avatar_size  = 'square';
	return $avatar_size;
}

    4.) Use this on Quick CSS:

    
.avia-no-number {
opacity: 1;
font-size: 0.8em;
font-weight: normal;
}

    Cheers!
    Ismael

    June 26, 2014 at 5:15 am #283893
    djshortkut

    Thanks Ismael, #1 & #4 worked perfectly!

    2. This quick css code you gave me didn’t do anything. The screen resolution of the monitor I am using is 1920×1080 This only seems to be a problem on larger size monitors. For some reason the masonry gallery doesn’t stretch fullwidth even though that option is selected with a 1 pixel gap. You can see what I mean at the bottom of my homepage.

    3. This code worked to make the thumbnail larger but what I am trying to do is keep the size of the thumbnail the same but have a higher resolution image in it so it doesn’t appear blurry on a retina display. Is this possible? The images that you have in the demo seem to show at a higher resolution than the images I have tried uploading even though they are the same thumbnail size.

    June 26, 2014 at 8:02 am #283939
    Ismael

    Hi!

    2.) Sorry about that. Forget to close the media queries: 

    @media only screen and (min-width: 1800px) {
.responsive.html_stretched .av-masonry-entry {
width: 17.8%;
}
}

    3.) The thumbnail size should remain 80x80px on desktop but the actual size of the image on the testimonial thumbnail is 180x180px. Please post the page url with the testimonials here. We would like to inspect it. If you want to use a plugin, you can try: https://wordpress.org/plugins/wp-retina-2x/

    Best regards,
    Ismael

    June 26, 2014 at 9:14 am #283951
    djshortkut
    This reply has been marked as private.
    June 27, 2014 at 5:04 am #284392
    Ismael

    Hey!

    2.) That’s weird. It should increase the width, not the height. I think the best thing to do is to add a left margin when viewing on larger screens. Please try this:

    @media only screen and (min-width: 1800px) {
#top div.av-masonry-container.isotope .isotope-item:first-child {
margin-left: 1px;
}
}

    3.) Did you add the code on functions.php? The testimonial is still using the 80x80px thumbnail size.

    Regards,
    Ismael

    July 9, 2014 at 10:11 pm #289231
    djshortkut
    This reply has been marked as private.
    July 10, 2014 at 4:24 am #289301
    Ismael

    Hey!

    Thank you for the update. It’ been weeks, not sure where we’re at right now.

    1.) Can you please remove all css modifications that we added for the masonry section? I would like to see without those css code. Right now, it looks fine on my end.

    2.) You haven’t added the code that I gave you. The purpose of the filter is to force the testimonial element to use the square thumbnail size which is 180x180px in size. It will not resize the actual image container though. It will remain 80x80px in size and in retina display it will look sharper because we’re using a large image in a smaller container.

    Best regards,
    Ismael

    July 10, 2014 at 4:42 am #289306
    djshortkut

    Hey Ismael,

    1.) Ok I removed the CSS code.

    2.) Ok I added the code you gave me back in. It seems to do the trick however the only problem is that it increases the size of the container on the iPhone in portrait mode only. The container size isn’t effected on any other screen size and works as I wanted it to.

    Thanks for all the help!

    July 10, 2014 at 6:49 pm #289687
    djshortkut
    This reply has been marked as private.
    July 11, 2014 at 4:26 am #289886
    Ismael

    Hey!

    Thank you for the update.

    1.) I think it comes to a point where the browser can’t calculate the fraction of pixel left on the right edge of the masonry container. Please try to add this on Quick CSS:

    @media only screen and (min-width: 1800px) {
.responsive.html_stretched .av-masonry-entry {
width: 16.68%;
}
}

    2.) Please use this on Quick CSS or custom.css to decrease the size of the testimonial image:

    @media only screen and (max-width: 479px) {
.responsive .avia-testimonial-image {
width: 40%;
margin: 0 auto 15px auto;
}
}

    Best regards,
    Ismael

    July 13, 2014 at 8:44 am #290741
    djshortkut

    Hey Ismael,

    Ok so the testimonial code worked perfectly, thanks!

    In regards to the masonry issue, the code you gave me corrected the issue on my iMac so it stretches fullscreen on my 21.5″ screen, which is great! The only issue I still notice is that if you resize the screen to a smaller size the issue happens again, so say on a 15″ or 17″ screen it will have the small gap on the right side again. Once you get down to the iPad screen size and lower it works perfectly with no issues. I noticed this happens on your demo as well. For some reason it won’t stretch to fullscreen to match up with the other elements. I used the layout of your Home v9: Videos & Parallax layout for my home page. Not sure if there is anything more that can be done about this or if this is just an issue with this element?

    July 15, 2014 at 6:44 am #291409
    Devin

    Hey!

    That is actually exactly how the masonry script is supposed to work. On some screen sizes there will be a gap where the images can’t expand to fill the area completely. There is nothing we can do about it unfortunately.

    Cheers!
    Devin

    July 19, 2014 at 12:09 am #293181
    djshortkut

    Ok thanks for all the help! You can mark this as resolved.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Enfold Bugs/Issues’ is closed to new replies.