Hi Olga

Thanks. both the demos are loading OK now. The only issue I notice at the time is something on the Home Page of the Photographer demo when viewed under different resolutions…

On a 1080p widescreen format, 1920×1080, the About Us section with the box around the text appears correctly. However, under an older style monitor (not widescreen), running 1280×1024 screen resolution, the box around the text does not line-up as it should. See screenshots:-

1920×1080: https://prnt.sc/mk54dg

1280×1024: https://prnt.sc/mk53bl

Those older screens still make up a considerable amount of monitors in the workplace and at home.

Regards

Hi Rose

Thanks. That worked. I will check everything else, like basket/checkout thumbnails when I get home this evening.

Many thanks! 🙂

Hi
To both Olga and Rose…. thanks for explaining and thanks for your patience with this issue. The CDN is Cloudflare and I think it definitely causes problems with WordPress. As you suggested, I disabled Cloudflare caching temporarily, deleted browser cache and this fixed the issue for both the live site and dev sites. I have now re-enabled Cloudflare caching and both sites are still working, so i think its fixed. If ever I get problems with appearance not looking how it should, I will from now on remember the Cloudflare issue. Cloudflare has a button to clear cache, which did not appear to work fully. Some things seemed to change, like changes in colour of borders, but not other changes. Very weird.

Thanks for all your help.

Hello Rose

The fix worked on the staging site that I use for testing updates before using them on my live sites, but has not worked on the live site its intended for. The site it worked on was the login details I provided you, not my actual site.

Was there something else you did on my test site to fix that other than the code you provided above? The custom css is the same for both and browser/CDNcache refreshed for both sites, but fix only works on one site. I am confused, unless there is something you did I am not yet aware of?

Thanks. On first look, it appeared to work. However, when I added extra images to a product to see how the thumbnails underneath were displayed, it caused the right hand border of the main image to initially be displayed when the page was loading, but when all other elements of the page loaded the right-hand border of the main large image disappeared. Also one of the small thumbnails underneath has one side of the border missing too.

This happens on Google Chrome on a 1920×1080 monitor, with the browser maximised. When I make the browser screen smaller, it re-adjusts and then displays the borders as they should be displayed. This seems weird. Not sure why this is happening???

please see the screenshot:

https://prnt.sc/mbgb1m

Please can you investigate, seems like a bug? See private content for link to product page.

Sorry, I just noticed that the border is showing up on Home page and the Shop page, but not on the product page. Please can you advise how to fix that?

Please see private content for login details to staging site. I changed the border colour to red to make it show up, but no change.

Thank you very much. Very helpful screenshots. 🙂

Thank you very much for sending that. I have managed to alter the slider background to full width, 1920×650.

Regards

Update…

After using Google Chrome inspect tool, I solved it by using the following Custom CSS:

.tagcloud a:hover, .button.active, .btn.active, .btn.active:hover, .btn-advanced, input[type=submit].btn-advanced, .button:hover, input[type=submit]:hover, .btn:hover, .form-row.place-order .button, .woocommerce-pagination ul li span.current, .woocommerce-pagination ul li a:hover, .etheme-pagination .current, .etheme-pagination a:hover, .dokan-pagination-container li a:hover, .dokan-pagination-container .dokan-pagination li.active a, .widget_search button:hover, table.cart .remove-item:hover, .openswatch_widget_layered_nav ul li.chosen, .openswatch_widget_layered_nav ul li:hover, .et-tabs-wrapper .tabs-nav li.et-opened:before, .et-tabs-wrapper .tabs .accordion-title.opened:before, .btn-view-wishlist, .btn-checkout, .secondary-menu-wrapper .menu, .secondary-menu-wrapper .secondary-title, .secondary-menu-wrapper .nav-sublist-dropdown, .et-offer .product, .et-tabs-wrapper.title-hover .tabs-nav li a span, .team-member.member-type-2:hover .content-section:before, .slide-view-timeline2 .meta-post-timeline, article.content-timeline2 .timeline-content .meta-post-timeline, article.content-timeline .timeline-content .meta-post-timeline, .content-grid2 .meta-post-timeline, .content-grid2:hover .meta-post-timeline {
    border-color: #0000ff;
}

but I really wanted to know why it was not an option and why I couldn’t find where it was originally written? It was not already in custom css???

Regards

Hi

Thanks for responding. When I click add an image, or change menu image, I do not get the popup that you see. All I see is the Media Library that allows me to choose the image. Please tell me how you got to see the options you see in the popup?

https://prnt.sc/lw17nh

Regards

Hi

Thank you very much, that worked! 🙂

kind regards

Thanks

Disabling the ‘Special breadcrumbs on cart, checkout, order page’ ensures that the breadcrumbs are displayed. However, the breadcrumbs padding is still different from the padding on the Shop page and News page (Blog) to other pages. The cart is the same as other standard pages but Blog and Shop different in terms of breadcrumbs padding. They have the expected padding of 3.14em and other pages are much thinner top and bottom padding.

H1 TITLE PROBLEMS

The H1 title on Shop page is still different to my About Us page and Contact pages. The Shop page has expected font/size/weight. The About Us page has a smaller size. The Contact Page appears to have a different font face and weight. Not sure why they should be different?

For example, on the Contact Page the page title in the breadcrumbs area should be h1.title:-

.page-heading.bc-type-left2 .title, .page-heading.bc-type-left .title, .page-heading.bc-type-default .title, [class*=" paged-"] .page-heading .span-title:last-of-type, [class*=" paged-"] .page-heading.bc-type-left2 .span-title:last-of-type, .single-post .page-heading.bc-type-left2 #breadcrumb a:last-of-type, .bbp-breadcrumb-current {
    line-height: 46px;
    font-size: 40px;
}

but is being overridden by this:-

.woocommerce-wishlist .page-heading .title, .woocommerce-account .page-heading .title {
    display: block;
    font-size: 1.7rem!important;
    text-transform: uppercase!important;
    text-align: center;
}

This is even though I disabled the ‘Special breadcrumbs on cart, checkout, order page’ option as mentioned before.

BREADCRUMBS PROBLEMS

The breadcrumbs padding should be this:

.page-heading, .et-header-overlap .page-heading, .woocommerce-wishlist.et-header-overlap .page-heading, .woocommerce-account.et-header-overlap .page-heading {
    padding-top: 3.14em;
    padding-bottom: 3.14em;
}

but is still being overriden by this:

.woocommerce-wishlist .page-heading, .woocommerce-account .page-heading {
    padding: 1.7em 0;
}

This is why I am asking for help. The settings in Theme options are being ignored for breadcrumbs padding on some pages still and the H1 Title is different on some pages.

Regards

Hi Olga

Thanks, the menu is fixed now. Can you please tell me what the fix was, so I can apply it to the live site?

Regards

Thanks

Turning off Smart Menu has helped with the delay. I already understood why the logo was reset.

However, the appearance of the menu still is not right. It was not fixed with the options.json file you sent me.

Regards