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/

Hi Rikard

Sorry to have to make you break this down. I’m summarizing my process below with my clarifications, please correct anything I have wrong. The plus side of this is that someone else with the same issue in the future will have a detailed instructions for exactly how to do this without messing up so hopefully fewer support tickets on this in future :) Thank you!

High Level Process
Backup site via All-In-One WP Migration plug-in –> Under Enfold->Import/Export–> Export Theme Settings File –> Delete Current Enfold theme –> Delete Pages, Posts, Media, extra plug-ins –> Reset WordPress using “WordPresss Reset” plugin –> Upload the Entire Enfold Zip File I purchased (which will reset theme)–> Upload Child theme–>follow steps 2 to 4 of the “Installing Child Theme instructions” link –> Activate Child theme –> Import Theme Settings file –> Import Website Backup file via All-In-One WP Migration plug-in .

After that I’m back in business

This is now working thank you. You can close the ticket.

Hi Nikko, thanks for your response!
As previously stated, I already set General Layout to Boxed Layout and set a Maximum Container Width. Perhaps I didn’t clearly articulate the problem. After setting to Boxed+ Max Width, I expected content (color sections, headers and footers) to align with the background/header picture at the top of the page. But there seem to be margins to the right and left of my content sections. How can I remove those margins (?) so that all content aligns with the image at the top of each page? Please see the link 1 in the original post which illustrates the problem and link 2 which is the overall look I want to achieve.