Thank you! Will update this thread after trying it out.

This is working. You may close the thread. Thank you.

Hi,

I’ve linked to a screenshot in the private section and provided additional info you requested. Please look at screenshot first. Comments below give context to the mark up in screenshot.
#1 – at the bottom of the left pill tab is a green arrow (circled in red and numbered 1) – I want the arrow to be bigger – 2x or more of the current arrow size.
#2 – left pill tab section is the active tab in screenshot . When a tab is active I want its color to change (compared to an inactive). I have already tried to accomplish this with the css code in #2 of my initial post – it’s not working for me. Please advise.
#3 I want to reduce the large extra space to the right of tab titles. For both tabs – there seems to be huge extra padding (margins?) to the right side of the titles. Compare to the margin/padding to the left of the title. This is making the tab wider than necessary. I want to reduce the margin/padding on the right side of tab to be the same or similar to what’s on the left side.

Hi,
I have a large monitor/screen so had to zoom out to screen shot the contrast between the full width content at the top vs. the boxed/not full width color section at the bottom of screen.

Thanks for the suggested fix! I set Maximum Container Width to 100% and the color section looks as expected on my large screen. I need to test that other screen sizes and all layouts (regular desktop, tablet)are OK before I close this out. Will be in touch in 3-4 days after testing.

Thanks for posting the screenshot so I can see what you see which is helpful. May you please delete the image? Thanks.

See screenshot linked in private content below from top to bottom. The section below our clients is all color sections and look how boxed in they are vs. the stretched section at the top. Screenshot URL linked in private section

Hi, just checking in to see if anyone has had a chance to look at this. Thank you.

Please close- haven’t had coffee..LOL. I figured it out

Hi, thanks for your suggestion which I’ve tested! I was able to find parameters that work for each of the 4 files I need to configure.

Because #av_section_1.is a global ID attribute referenced on multiple images/pages, I couldn’t use it to set the required parameters for each image file. I used the syntax below. It’s working on my desktop (external monitor and compact laptop) and when I resize desktop browser windows to tablet/mobile size. BUT when using a tablet and this code is active, hero images disappear for almost all site pages in all browsers (chrome, safari, firefox).

This only happens with tablets (mobile view is fine). Color section min size = 750px for pages requiring custom background image positioning. Links to pages with the custom CSS are below. Any solutions would be appreciated. Thanks.

.class-hero1 {
background-position: center bottom 85% !important;
}

.class-hero2 {
background-position: center bottom 80% !important; }

Hi,

Just checking in on whether you have any updates/suggestions on this. Resizing the rest of website photos to 1300x300px or aspect ratio of 4:1 is not feasible. Since the photos display properly at tablet size I’m hoping there’s a css workaround.

Hi,

This worked right away as soon as I added #top to the existing CSS. You can close the ticket. Thanks.

Hi Ismail,

For the first page, I was able to configure Color Section + background image size to an acceptable combo.

But for the 2nd test page (I’ve since renamed it – see link below) , I need the background image here to be smaller (Color section minimum size~ 300px) – close in size to the Law Firm demo images for all pages excluding Home page. The background image truncates at the top for every Attachment Display Setting – thumbnail to Full size image. Is there css code to truncate only from the bottom rather than the top? As a workaround to this problem I uploaded smaller images but upon uploading the small images resized and the top also truncated. If top truncation can’t be controlled is there a setting to override automatic re-sizing of uploaded images? Thanks!

Image size – 1800 by 750 pixels
Color Section minimum size 300px

Hi Rikard,

This is now working – the ticket can be closed. Thank you!

Hi,

RE: #2 – I want the “Read More” text for the folded sections to be formatted as a heading -for example the equivalent of the HTML below. In my CSS I already have a custom class to override default padding/borders (see private content). I’d like to add CSS code to set the “Learn More About….” to be formatted as a Heading2 (for example) but I’m unsure what whether this would also be a class override and if so what class/attribute. How can I do it?

HTML – “<h2>Learn More About ACME</h2>”

RE: #1 – Solved. FYI – I’m documenting my solution for #1 in case someone else encounters this issue in the future. I was able to get all the color section content under the fold (including the problem heading which previously had been above the fold) by putting the heading and text block underneath the heading into a 1/1 column. All the content is folding/unfolding as I’d wanted.

Thanks!

Understood, thanks for the explanation. I’m getting an “Incompatible Archive” error when I upload the Enfold child theme zip file using WordPress theme installer.

From research (see below links) it seems this is a common issue for mac users. I am using a windows machine and did not modify the zip file – I do not want to do custom code just to get this install to work. Please suggest a workaround.

https://wordpress.org/support/topic/zip-files-created-in-macos-stopped-working-in-wordpress-6-4-3/