Theme changes on non-front page pages

Hi @ns773
thank you. I’m happy you like it.

Specific Content For Mobile has nothing to do with headers or navigations. It just replaces the page content with the mobile page content. The content of a post or page has nothing to do with the header. You have header, the content of the page, and then the footer. SCFM works only on the content.

Usually, for normal themes and builders, the content of the page is saved in the database and has nothing to do with the header. Usually, the header is outputted by a PHP file of the theme (header.php). This last file is not touched by Specific Content For Mobile.

In a few cases, the theme or the builder can output the header taking it from a custom post type. But also, in this case, it’s impossible SCFM can change something in the header because it works only for normal posts and pages, no custom post types.

Looking at your pages, it looks you have some CSS that gives a padding-top the main element.

If you want, you can solve your problem adding this in your custom CSS:

#content #main {
padding-top: 0;
}

Hi Jose,

Thanks for the quick response! Sorry that my original post was unclear. SCFM is not modifying any of my content on my page. I’m not a WordPress expert but hopefully this breakdown makes more sense:

Any page that is not marked as the Front Page of my site has the header and formatting that you see here: https://kandisnap.com/shop/kandisnap-beads-5-pack/
– Fixed height
– Padding above the content

The Front Page does not have this at all: https://kandisnap.com/

An exact copy of this page that is not marked as Front Page has the same fixed height header and padding, because it is treated like a normal page: https://kandisnap.com/hometest2/

So the issue is, that because the mobile version of the Front Page is actually a separate page similar to https://kandisnap.com/hometest2/, then when I load the Front Page up on mobile, it shows the fixed header and padding because it serves the mobile page, and is treated as a normal page (not marked as Front Page) that requires a header.

Hopefully the problem makes sense, although I expect that I cannot do anything about it because if I modify the CSS to fix it, it will modify the CSS for standard pages, which will break them.

Thanks for the support!

Hi @ns773

You are welcome. I see your homepage with the same header (same markup, different appearance due to the responsiveness) without padding for both mobile and desktop versions. Maybe SCFM is not active?

In any case, if you have seen a header with padding on the homepage in the mobile version, it means that on every page you can set a different header, in another case SCFM would take the same header you have for the desktop version. If can select a different header, you have to select the homepage header also for the mobile version.

Check if on in the back-end you can select a custom header on every page.

If it’s not possible, let me know. In any case, you can solve adding a CSS class to detect the homepage. The class .home of the body should exist only for the homepage for both desktop and mobile devices, so this CSS should solve the issue:

.home #content #main {
padding-top: 0;
}

The CSS above should solve your specific problem, but I’m personally interested to know if you can select a different header on each page.

Hi Jose,

Thanks for the code! I loaded it up, and it has not changed the look on mobile. I have temporarily re-activated the plugin; I had it paused since I was running a mobile PPC campaign. I reviewed my pages and I am not able to choose a header for individual pages. But, I did look at my custom CSS changes and thought that this was pertinent:

It looks like the problem area is section.iq-breadcrumb.overview-block-pb. This section is the part of the header that only appears on pages that are not the home page, and I’m controlling the height of it with the following code:

section.iq-breadcrumb.overview-block-pb {
padding: 50px 0 50px !important;
}
section.iq-breadcrumb {
padding: 50px 0 50px !important;
}

If you load up the home page using a User-Agent Switcher plugin (not the one in Chrome’s dev tools, it doesn’t work for this): https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US

Then you can see that the mobile only page loads in header section.iq-breadcrumb header that is standard for non-home pages. If I remove the CSS, it just gets larger.

Maybe I should ask the theme developer about this section, unless you see a clear way to influence the content of the mobile page from the plugin that doesn’t affect other pages?

Thanks for the continued help!

Hi @ns773. I’m not able to reproduce the problem and I haven’t seen your homepage when SCFM is active. In these conditions is not easy to help.
Surely .overview-block-pb exists both for the homepage and the other pages, I see it inspecting elements. As I understood the issue is not caused by that section, but by the main element. Probably I haven’t really understood the issue.

If you want you can share some screenshots and the HTML output of the pages.
To understand better I would like to have:

– screenshot homepage on mobile when SCFM is active, including an arrow that indicates the issue
– HTML single file of the homepage on mobile generated e.g. by the Chrome extension “Single file” https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle?hl=en. You should inspect the element with Chrome, then click on “Toggle device toolbar” and refresh the page.
Then click on the Chrome extension Single File to generate a single HTML file.Before that be sure the body has this class: “vc_mobile”.

Then you can send me these files to my email [email protected]

Another option is to send me directly the theme Appino.

• This reply was modified 5 years, 4 months ago by Jose.

The problem is solved with the new version 0.1.0.

Thank you again ns773 to let me test the plugin on your website.

I will close the thread. If in the future you have other issues, feel free to open a new thread.