B&B Demo issues

[isdg01]

Hi, I am working on a site based on the B&B demo. It is almost complete but I have come up against a couple of issues that I can’t seem to resolve…

1. I have edited a headline using the html editor to make sure I didn’t break any of the custom code. All of the content is showing in the editor but the display has vanished. How do I get the display back? I even tried copying the code snippet from another section, but neither of them would display, I just had 2 horizontal rules… See attached.
   

2. I have updated the icon in the Creative CTA, but it still shows the fork and knife from the demo. I have cleared cache on my browser but it will not update.

3. In checking the display for the above in multiple browsers, I have discovered that the entire site is funky in Internet Explorer. Headlines are funky, padding is gone, images for reviews are different sizes, images on Accommodations pages are out of alignment, all kinds of weirdness! Do you have a fix for IE that I can use? All themes, WP core, etc., are up to date and the only plugins loaded are the ones required to load the demo.

Thanks in advance for your help.
Dawn

[friech]

Hi @isdg01,

Thank you for writing in, 1) you added this to your Theme Options > CSS

.h-custom-headline p,
.h-custom-headline br {
  display: none;
}

This custom CSS hides your headline that was wrapped in <p> tag. I did go ahead and commented that out so you can see your headlines now.

Also, please remove this empty <p></p> tags on your headlines, this will create extra white space on your headlines.

2. Please inspect your CTA element and under the Interactive Content Setup, you’ll see the icon picker.

• 

3. I have checked the site on IE11 and it’s not that bad, would you mind to clarify the issues? Perhaps provide us some screenshots. And please clear your IE’s cache.

Cheers!

[isdg01]

Hi,

I did not add any custom CSS. It had to have imported with the template.That said, your fix worked and I have tweaked the affected headlines.

Internet Explorer is another issue completely. I have checked it on multiple machines while clearing cache on all before reviewing. I am getting the same results every time I view it. A quick list includes the following:

Homepage

1. Section 3 – headlines are too small to read, all padding is gone from text blocks
2. Section 7 – Testimonial icons change sizes, columns between icon and text not consistent
3. Section 8 – titles are too small to read, padding is gone from text blocks

Accommodations pages – same for both Camp/Apartment pages

1. Headline over hero image not legible
2. Headlines inn left column too small to read
3. Body copy in right column has lost its padding
4. Photos are full size, stacked, not in columns as they should be

Explore page –

1. Main image is cut off, text is near bottom instead of centered horizontally
2. Headlines in boxes are too small to read
3. Text in boxes have lost padding

Relax page –

1. Main image is cut off, headline is near bottom instead of centered horizontally
2. Big white space below main image that shouldn’t be there
3. Headlines in boxes are too small to read
4. Text in boxes have lost padding
   Relax page – testimonials section
5. Can’t read headline
6. Icons are super small

Eat page –

1. Main image is cut off, headline is near bottom instead of centered horizontally
2. Big white space below main image/above CTA that shouldn’t be there
3. Headlines in boxes are too small to read
4. Text in boxes have lost padding

Contact page –

1. Main image is cut off, headline is near bottom instead of centered horizontally
2. Big white space below main image that shouldn’t be there
3. Headlines in boxes are too small to read

Is there anyway to send you a pdf with screenshots? I have too many to attach…

[lely]

Hi @isdg01,

Thank you for the detailed list. We do recommend to check our documentation here. Under Builders > Elements, please check and review each element settings so you can understanding how it behaves and how to adjust its look.

For headlines font size, you can adjust it here:

You can see current value of the font for section 3 on homepage is calc(285.7%). Feel free to adjust it. This detailed guide can also help.

For paddings, you can see that on each element when you inspect there is padding settings. Please adjust it as you need:

@isdg01

2. Section 7 – Testimonial icons change sizes, columns between icon and text not consistent

Yes it changes in size because it is responsive. Please inspect the icon if you want to adjust the size.

I have check each issue and mostly can be adjusted on the settings. When you inspect each element, there are settings for font size,margins and paddings to control spacing and all others like borders/shadows, etc. Please adjust it as you need. For those headline that is not legible enough, you can choose thicker font, choose bold for font weight or you can opt to use a background on the headline to set a contrast.

Hope this helps.

[isdg01]

Thanks for this detail, but it’s not really helpful. All headlines, padding, etc., are perfect in Chrome, Firefox, Safari and Android. The only issue is with Internet Explorer. I am working from your demo template and it is not working correctly on IE 11. I have not adjusted any sizes on anything, it’s straight from your template.

When I get the following on a 27" desktop monitor, iPad and smartphone, this is not an issue with responsive images. This is an issue with how your template works in IE. Here are screenshots from multiple pages with Chrome and IE right next to each other. Font sizes, padding, image sizes, everything is out of whack in IE. The 2 browser windows are the exact same size. Both have full navigation showing.

Please help. The client is eager to launch as soon as this gets straightened out.

[friech]

Hi Dawn,

Thank you for the clarification, before we begin I would like to say that as much as we want to fully support IE, Unfortunately, IE doesn’t fully support a lot of modern web features (e.g. Flexbox, CSS Grid, among others), simply put IE is outdated. But I do understand that there will be a situations that you can’t avoid IE.

Ok, regarding the columns padding, while we’ve tried to make many of the options work in all browsers, we needed to add these styles to prevent layouts from appearing broken in IE. (see the fix below)

About the blown-up images issue, IE ignored the max-width CSS property that why images overflow on their containers (see the fix below, first block)

On this testimonial section

• 

It looks like you configure the graphic icons differently, please configure that graphic icons all the same, together with the fix below that should look fine IE.

Regarding this small headlines

• 

This seems to be a new mystery as this is the first time I saw this issue, it seems IE forgot how to calculate a percentage value with the calc() function.

Right now those headlines are set to font-size calc(228.5%), please remove the calc() and just set 228.5%

/*image and card fix on IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .x-face-graphic img,
   .x-image img {
   	width: 100% !important;
   }
   /*columns padding on IE fix*/
   .ie .x-col .x-text,
   .no-preserve3d .x-col .x-text {
	padding: 35px 35px 35px 35px !important;
	}
}

That should fix most (if not all) the issue on IE.

Hope it helps,
Cheers!

[isdg01]

@friech

228.5%

Hi Friech,

Thanks for taking another look at this issue. I personally do not like IE and try to avoid it, but I do have to check it when building websites as you never know who is going to use it to view the site. This is the first time I’ve run into an issue like this…

The code you provided did seem to help with the padding and testimonial icon issues, but the headline suggestion is not working. When I change the settings from calc(228.5%) to 228.5% and immediately hit Save, it still reverts back to showing the calc() in the size and the display in IE does not change. That said, I am noticing that headlines over photos at the top of page is working correctly on all pages except two, the Accommodations Camp and Apartment pages. The settings seem to be the same in all instances.

Also, the images in the body of the internal Accommodations pages (Camp/Apartment) are still larger than they should be, not falling into the 2 column display. One additional image on the Relax page is also not adjusting to the new padding settings (boat image in green box).

Any other suggestions you have to fix this are appreciated.
Dawn

[isdg01]

OK, just updated IE to the new version of Microsoft Edge. Everything looks perfect here!
I didn’t realize IE11 was fully deprecated now, but that’s a good thing

[jade]

Glad to hear it’s sorted, Dawn.