-
Search Results
-
My problem is that the full width easy slider is not seen as accessible by our Accessibility vendor, as it presents as a list item.
https://www.integralrecoveries.com/leadership-copy/
Per the team:
Lists: Remove List HTML
Content that does not function as a list should not be coded as such.
The header thumbnail image is coded as being a part of a list when it should not be.Remediation Recommendation
Ensure this content is not coded as a list. Generally, this will mean removing <ol>, <ul>, <dl>, <dt>, <dd>, or <li> elements that are holding this content.Here is a snippet of the code displaying the Full width easy slider:
Here is the code snippet I'm referring to '''<li class="avia-slideshow-slide av-juo9jzkl-8700c68c0f38de355eb6ad66836a0d85__0 av-single-slide slide-1 slide-odd next-active-slide active-slide" style="visibility: visible; opacity: 1; transition: none; transform: translateZ(0px);"><div data-rel="slideshow-1" class="avia-slide-wrap "><img decoding="async" fetchpriority="high" class="wp-image-621 avia-img-lazy-loading-not-621" src="https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300.jpg" width="2000" height="300" title="Header_About2000x300" alt="" itemprop="thumbnailUrl" srcset="https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300.jpg 2000w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-300x45.jpg 300w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-768x115.jpg 768w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-1030x155.jpg 1030w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-1500x225.jpg 1500w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-705x106.jpg 705w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-450x68.jpg 450w" sizes="(max-width: 2000px) 100vw, 2000px" style="left: 0px;"></div></li>'''I’ve tried several options:
The image is set as 2000px x 300px btw.
1) Displaying as an image (no scaling, original width & height) – why doesn’t this work, it would solve many problems.
2) Color section – I’ve tried all options under Section Height including – Minimum Custom height in % based on browser windows width (responsive). However, it is not responsive (using 15% custom height for example). When you minimize for phone, it just blows up the left portion of the image height and does not adjust horizontally.
3) full width easy slider – This is what I’ve been using on all pages, which is responsive and is being rejected by the accessibility team as it uses a list element to display.
I’ve setup the following test page to show the differences of the three approaches with text headers
https://www.integralrecoveries.com/leadership-copy/
Inspect the page and display as an iphone 14 Max and you will see what happens. See attachment below
How can I fix this? I’m just trying to display a page header that is not coded as a list.
Thank you very much in advance!
Topic: Button
Can you please look at this page.
Because of the orange symbol I have above the image. – The button lays underneath.
How to make the bottom come to the top?I thought I was smart when I wrote this in the css, but no…
#top a:where(:not(.wp-element-button)) {
z-index: 999;
text-decoration: none;
}Hi Enfold Team,
I’d like to reproduce the attached layout: on the left one large image, and on the right a 2×2 image grid (four tiles), each with a small text overlay (title + meta line) — please see the screenshot: http://neu2025.dc-gmbh.com/support/template.png
Using the ALB I can create a Grid Row 1/2 + 1/2 (large image on the left), but on the right I can’t nest additional columns to get two columns and two rows. Masonry or Portfolio elements come close, but I need a fixed 2×2 arrangement (no reflow), very small gaps, and always-visible text overlays (not only on hover).
Is there a native way to achieve something like this within ALB?
Or would you recommend a combination of existing elements or a small custom shortcode to get that layout?
Thanks a lot for your advice and best practices!
Best,
DianaHi all,
i already added.single-post .small-preview { display: none; }to remove the featured image from a blog post. It worked on the main language of the post but the image still appears on the translation (created by wpml). T added the Quick CSS for both languages in the Enfold settings. What can I do to also remove the image from the translated page?
Topic: Responsive Footer Issue
Dear Sirs,
We have a development site at http://www.peter-test1.co.uk. The footer is set to “two columns” and has an image in each column of the footer. However on responsive each image goes on top of each other. see screenshot 1. I am trying to get this central as in screenshot 2 can someone please help. Many thanks.
Hi all,
I already did some research for this topic but all the solutions (CSS, Enfold settings etc.) I found didn’t work.
I was able to remove the title from the page, but not the featured image. Here’s what I want to do:
I want to create all our blog posts with Gutenberg. On the blog posts I want to remove the featured images and the title. I want to define both with Gutenberg. I want to use the featured images only on archive pages (categories etc.). How can I completely remove the feature image from the post page?Please help!
On my home page only, and only the top Color Section, is a blank space at the top, where the image and headline should be. I works and shows right when I am in Edit mode, but when its live, It shows a huge white space. I tried to Purge all cache, but ti still isn’t showing. and only on the home page top. other page all work. I even tried to copy the color section to other pages, and it work. Just wont work on home page.Admin is below. Please let me know if you can fix.
Thanks!



