Page Layout on Facebook Instant Articles

Support
#1

I have been attempting to post my X Theme posts using Facebook Instant Articles
However, when viewing my articles they display with a boarder around them as pictured as well as the website logo clashing with the Article Title
What do i need to do inside X theme to make the article fullwidth and to not have the clash between the text at the top. Thank you for your help. I have been trying for a long time to fix this, please help.

#2

Hi There,

Is that screenshot taken from a single post page or from this page. I can’t seem to duplicate that issue you were having. Can you provide us the correct URL? The only issue I am seeing on that page is you have added 350px padding on section 4 to compressed the content in the middle. That will not be responsive and it will result to issues on smaller screen because 350px is to much space on left and right. Try removing 350px left and right padding and try adding max-width: 500px; on the ROW style field. This will restrict the size of the container but will not affect smaller screen view.

#3

These are screenshots from a single blog post viewed from Facebook instant articles on both a computer and on a mobile device.
The address is;
https://theretold.com/2017/08/16/is-perfection-preventing-the-productivity-of-learners/
Notice how the top heading clashes with the Logo in the menu bar, how do i change this on this page only and not the rest of the website
Also, I do not want the writing to have a background, i would like the writing to be fullwidth without any background and having no menu bar at the top
Apologies for the confusion
Thank you
Kind Regards

#4

Hi There,

Unfortunately, I can’t view the page because it is page not found. Please double check.

#5

apologies, this is the working link
https://theretold.com/2017/08/17/is-perfection-preventing-the-productivity-of-learnerss/

#6

Hi,

To fix it, you can add this in Custom CSS

.single-post header.masthead.masthead-inline {
     position:static !important;
}

Hope that helps.

#7

Is there a custom CSS to make the header disappear all together on blog posts?

Also, my main concern is making the blog fullwidth. The areas in red I hope to be deleted and the blog be stretched out to the full width of the screen. How do I achieve this?

https://theretold.com/2017/08/17/is-perfection-preventing-the-productivity-of-learnerss/

Thank you so much for your ongoing support
Kind Regards,
Liam

#8

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.single-post .masthead.masthead-inline {
    display: none;
}

.single-post .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
    margin: 0;
}