Hi,
Yes, we were referring to the left column. Have you tried moving the gallery to 1/1 column to create more space for the main image and the thumbnails?
Best regards,
Ismael
This page layout is a 1/3 left hand column for art title, specification and eventual description and 2/3 right hand column for gallery photos. Are you referring to the left column as a default sidebar? When creating the portfolio entry I did turn off the default sidebar there.
The question still stands “If I use a different percentage say 25% (for the large image) will the thumbnails stack (to the left) on top of one another, creating perhaps 2 columns wide over 5 rows tall?”
This solution makes the large image too small (non-impactful) for impressive portfolio use. If I use a different percentage say 25% will the thumbnails stack on top of one another, creating perhaps 2 columns wide over 5 rows tall?
Hey JeffDale,
Thank you for the inquiry.
There is no option for this by default, but you can add this css code to adjust the width of the main image and move it to the right, effectively creating space for the thumbnails.
#top div .avia-gallery .avia-gallery-big {
float: right;
width: 50%;
}
Result:
View post on imgur.com
Best regards,
Ismael
Under media elements when using a custom gallery with large image and small thumbnails – Is it possible to locate the thumbnails to the left of the large image or even better in a separate column? Currently the only option appears to be under the large image, which unfortunately the viewer doesn’t see unless they scroll down to find them. A link is list in the private section showing how I’d like the thumbnails to appear in a left hand column.
Hi,
Are you trying to increase the height of the slider? If so, then you can add this css code:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
min-height: 500px;
object-fit: cover;
}
}
Please note that this may partially cut off the images. Would you mind providing a screenshot of how you would like it to display on mobile view?
Best regards,
Ismael
Hi,
Thank you for the info.
We disabled the Linked Image Overlay in the Advanced Styling panel.
View post on imgur.com
Best regards,
Ismael
Hi,
The screenshots from imghippo are not loading on our end. Can you use another image hosting platform like Imgur or Dropbox instead?
Best regards,
Ismael
Hi,
your test product doesn’t have a gallery, I see other product images at the bottom of the page in columns, but these are not part of the product gallery, so it is not possible.
It looks like you built the product with the ALB, try using the default editor and add your gallery under the product image in woocommerce, this should give you the effect you are looking for, as I understand.
Best regards,
Mike
Hi Rikard
1) Thanks I’ll try that.
2) I am sorry but I really can’t find: Enfold->Advanced Styling. Look for the Linked Image Overlay option. And I’ve searched every thing twice again.
I send you credentials in “Private Content” – is it possible that you can help me disabling function? Then I’ll be happy. It is annoying for my readers when it is turned on.
Best regards,
Hanne
Hi,
1) How do I get my money back for the 2 extra licenses? And why do I get the message, that I have to by a new license?
You can ask for a refund from Envato/Themeforest. We don’t know what messages you are referring to, the question is likely better directed to the sender of the messages.
2) Yeah you can see an example on all my posts e.g. the latest one here:https://stegemueller.dk/stavning-eller-kaos-afsnit-132/ You have to mouse over to see the issue.
You can turn that off under Enfold->Advanced Styling. Look for the Linked Image Overlay option.
Best regards,
Rikard
Yes.
I’m referring to this thread.
Last time, you sent me the code to apply on css. The code reduce de police of the test but not the image. This is the image on my iPhone
The test is not good.
Hey northorie,
Thank you for the inquiry.
Have you tried selecting the full sizedversion of the image? Edit the element, then look for the Styling > Slides > Slideshow Image and Video Size settings and set it to “No scaling”.
View post on imgur.com
Best regards,
Ismael
Hi,
Unfortunately, it’s not possible to import a single element from a demo. As mentioned above, the page only contains a Portfolio Grid element, set to have a single column. If you have enabled the builder’s debug mode, you can insert this shortcode manually.
[av_portfolio columns='1' one_column_template='special' items='-1' contents='excerpt' preview_mode='custom' image_size='featured_large' linking='' sort='yes' paginate='yes' query_orderby='date' query_order='DESC' av_uid='av-s1vx']
Debug mode: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode
Best regards,
Ismael
Hi,
At a quick glance, the accordion element doesn’t work well when the plugin is activated because it converts the img element to picture tags and switches the image format to webp. We’re not sure if the issue is caused by the picture element or the webp format, but I’d like to think it’s the former.
Best regards,
Ismael
Hi,
Thank you for the update.
Can I add multiple child numbers to the colors? I think I’ll create about 30 entries.
Yes, you can assign the background color to multiple entries. Example:
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(12) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(16) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(20) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(25) .av-inner-masonry-content {
background: rgba(67, 20, 255, 0.95);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(5) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(13) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(17) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(21) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(26) .av-inner-masonry-content {
background: rgba(32, 192, 90, 0.95);
}
Is there a way to show a description in addition to the title?
Are you using the Advanced Layout Builder to build the posts? If you are, you will need to create an excerpt using the post’s Excerpt box.
Best regards,
Ismael
Hi,
Try to replace the css rule with this:
.responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
height: 550px !important;
object-fit: cover;
}
This will partially cut off the images but will prevent them from getting distorted.
Best regards,
Ismael
Hi,
This is the front end:
View post on imgur.com
The images are from the same SVG and is simply uploaded via the Media > Library.
Best regards,
Ismael
Hey Mike
I appologize. I did not mean flip. I meant to change the single product main image for the first gallery image on hover.
So for the single product image. On hover change the main product image for the first gallery image.
+ To do so also for the thumbnails on the Shop and Archive pages.
Thanks.
Hey Matt,
This seems to be a duplicate thread that we answered, thinkjarvis also points out that
on sites where bots have alreaedy hit and created a sitemap for them to crawl – They will continue to try and crawl those links because they already know they exist.
On new Enfold sites where Bots can no longer crawl the links – All is fine because there is no way for them to access the filter urls in the first place, therefore do not know the links exist.
The Dev Team writes:
On shop overview page the dropdowns for sort by and display do not have a href=” but only a data-href and link is done by js.
When I check my install there is no link:

Best regards,
Mike
Hey ausgesonnen,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#menu-item-96 a .avia-menu-text {
white-space: normal;
word-wrap: break-word;
display: block;
width: 150px;
text-align: right;
line-height: 15px;
}
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
adjust to suit

Best regards,
Mike
Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
.single-product .avia-image-overlay-wrap:hover {
transform: rotateY(180deg);
}
before hover:

on hover:

Best regards,
Mike
Hi
I am trying to figure out the correct code snippet to use for changing the main single product image on hover to the first gallery image.
Example this page: https://labhuset.no/product/fiocchetti-plasmafryser-30-40c/
I found this earlier thread: https://kriesi.at/support/topic/change-single-product-image-on-hover-with-gallery-first-image/
But found the code shared there unclear. It would be great with an update with a workable code.
Enfold has been used to customize all the single product pages in WooCommerce.
I am working on figuring out how to change images on hover (for the first gallery image) of the main product in the Single product page
2.
It would also be helpful to at the same time have the correct code to change images on hover in the shop page AND the archive page. Having the thumbnails seen change to the first gallery image.
Thank you!
-
This topic was modified 1 year, 1 month ago by
SHR Design. Reason: A mistake in adding the word flip. It has been adjusted
Hey northorie,
I’m nt sure what image is showing on mobile, perhaps a screenshot would help.
Best regards,
Mike
Hi,
Works when I test:

try again or provide admin login.
Best regards,
Mike
Hi,
I’m working on a one page website and one background image is not showing on mobile, though it’s perfectly showing on desktop.
Link in private content.
Hope you can help.
Best regards!
Hi,
please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike
Hey ausgesonnen,
The title of your thread says “burger menu” but the content says “desktop view”
for the desktop, items are at the top:

for burger try this css:
#top #av-burger-menu-ul {
vertical-align: top;
padding: 0 !important;
}

Best regards,
Mike
Hi,
When you add the link in the text element, click on the “gear” and then check the “open in a new tab”

Best regards,
Mike