All the pages of my website don't display correctly anymore + iframe doesn't display correctly

Support
#1

Hello
I’ve just added a new page to my blog https://coursanglaisnantes.fr/formation-wonder-anglais-spontane/ and I have two problems.

  • the iframe code doesn’t display the page but shows the code itself (I added it as text as you told me to do last time and it worked last time)
  • all the pages of my website don’t display correctly
    Thank you for your help. Is a professional website and it’s very urgent. :fearful:
#2

Hi @COURSPARTICULIERS,

Thanks for reaching out.

I checked and you’re adding your iframe wrapped with <pre> block. Example,

<pre style="overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-bottom: 10px; line-height: 1.42857; color: #333333; background-color: #f5f5f5; border-color: #cccccc; text-shadow: none !important;">&lt;iframe src="https://campus.alexinwonderlangues.fr/presentation-formation-wonder-anglais-spontane/" frameborder="0" width="100%" height="100%" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index:10000;"&gt;&lt;/iframe&gt;</pre>

You should only add the iframe code like this

<iframe src="https://campus.alexinwonderlangues.fr/presentation-formation-wonder-anglais-spontane/" frameborder="0" width="100%" height="100%" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index:10000;"></iframe>

And there should be no

<pre style="overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 9.5px; margin-bottom: 10px; line-height: 1.42857; color: #333333; background-color: #f5f5f5; border-color: #cccccc; text-shadow: none !important;"> ............. </pre>

Hope this helps.

#3

It works for the iframe, thank you :slight_smile:
but the pages of my website don’t display correctly. see : https://coursanglaisnantes.fr/

#4

Hi there,

Thanks for responding.

The issues seems to be the URL references of your images. Your site is set to https://coursanglaisnantes.fr/ while the images are being loaded through https://www.coursanglaisnantes.fr/.

A possible solution would be to manually reupload the images on the mentioned page so that the URLs will be reference is the main domain.

If you are having this issue sitewide for the images, you can use the Better Search Replace plugin then do the following:


    search for https://www.coursanglaisnantes.fr and replace it with https://coursanglaisnantes.fr and
    search for https:\/\/www.coursanglaisnantes.fr and replace it with https:\/\/coursanglaisnantes.fr

Hope this helps.

#5

thank you :slight_smile:
Have a nice day

#6

Glad to hear it’s sorted.

Have a nice day as well. :slight_smile:

#7

I’m sorry but now I have another problem on the same page.
The section 1 with text won’t display on the page.
Can you help please ?

#8

Hello @COURSPARTICULIERS,

Thanks for updating the thread.

I can see that text is not showing up. Please try out following solutions and let us know how it goes:

  1. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  2. Remove custom CSS and Javascript from the options or Child Theme and test the case.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

#9

ok. I just sent you a secure note. Thank you

#10

Hello @COURSPARTICULIERS,

The text or the whole section 1 were not displayed because it is behind the contents of the iframe. I would recommend that you update your iframe code and make use of this code instead:

<iframe src="https://campus.alexinwonderlangues.fr/presentation-formation-wonder-anglais-spontane/" frameborder="0" width="100%" height="100%" style="height: 100vh; width: 100%;"></iframe>

Please let us know if this works out for you.

#11

Thank you now I can see the text on the page :slight_smile:
The only problem is that section 2 won’t display properly. There is a margin on the left and a margin on the right although I set the page parameters on full width and also there is a scroll bar on the right that I don’t want.
Can you help please ?

#12

Hi @COURSPARTICULIERS,

Please inspect your second section’s row and turn off its inner container.

I only see one scrollbar, removing it will prevent you from scrolling your page.

Thanks!

#13

I did what you said but unfortunately it didn’t solve the problem. There are still two margins on the right and on the left. Consequence: we can’t see part of the right purple column.

There’s only one scroll bar on the right indeed as I said, but it’s not normal.
This page https://coursanglaisnantes.fr is also long but there is no scroll bar.

#14

Hi @COURSPARTICULIERS,

As for scrollbar, it’s normal since it’s an iframe and you need the scrollbar to navigate within the content of that iframe. Consider an iframe a different browser window but just displayed within that page. You can fix it by statically applying the height of that iframe BUT, content and device changes so it’s not going to be responsive and a scrollbar will still display on other views. How about just adding those content directly to the page instead of just adding it as an iframe?

As for margin, are you referring to the section within the iframe? That space is from the content of the iframe in which you can’t control through your site. The layout width of the page in the iframe is 970px and your site width is 1200px.

Thanks!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.