Display and Rendering Issues

This guide helps you troubleshoot problems with how landing pages display on your website.

Landing Page Shows Theme Layout

Symptom

Your landing page displays inside your WordPress theme with header, sidebar, and footer instead of showing the clean design you imported.

Solutions

Solution 1: Change Template to Canvas Mode

Canvas Mode removes all theme elements for a clean, isolated landing page.

Steps:

1. Go to Landing Pages in WordPress admin
2. Edit the problematic landing page
3. In the right sidebar, find Template section
4. Select Canvas (Full Isolated)
5. Click Update
6. View the landing page – it should now display without theme elements

When to use: Best for marketing pages, sales pages, and lead capture pages where you want complete control.

Solution 2: Use Minimal Template


Minimal Template keeps basic header and footer but removes sidebars and extra theme elements.

Steps:

7. Edit landing page
8. Template section → Select Minimal (Header/Footer Only)
9. Update and check

When to use: When you want to maintain site navigation but remove other theme distractions.

Solution 3: Override Template File


For advanced users who want custom control:

Steps:

10. Create file in your theme: single-shahi-landing.php
11. Add this code:

`php
postmeta(gettheID(), ‘shahilandinhtml’, true);
$css = getpostmeta(gettheID(), ‘shahilandincss’, true);

if ($css) {
echo ‘

‘;
}

echo ‘

‘ . $html . ‘

‘;
}

get_footer(); // Optional – remove for no footer
?>
`

12. Save and upload to your theme
13. Landing pages now use this template automatically

Responsive Design Not Working


Symptom


Landing page looks good on desktop but breaks on mobile devices (or vice versa).

Solutions


Problem 1: Missing Viewport Meta Tag


Symptom: Page appears zoomed out on mobile, very small text.

Solution:

14. Edit landing page in WordPress admin
15. Click on HTML tab in editor
16. Check if section includes:

`html

`

17. If missing, add it to the top of your HTML (inside tags)
18. Save and check on mobile

Problem 2: Fixed Widths


Symptom: Horizontal scrolling on mobile, content cut off.

Solution:

19. Edit landing page → CSS tab
20. Find fixed width declarations like:

`css
.container { width: 1200px; }
`

21. Change to responsive widths:

`css
.container {
width: 100%;
max-width: 1200px;
padding: 0 15px;
}
`

22. Test on different screen sizes

Problem 3: Media Queries Not Working


Symptom: CSS breakpoints don’t trigger on mobile devices.

Solution:

23. Verify media queries use correct syntax:

`css
/ Correct /
@media (max-width: 768px) {
.container { width: 100%; }
}

/ Also correct /
@media screen and (max-width: 768px) {
.container { width: 100%; }
}
`

24. Ensure viewport meta tag is present (see above)
25. Test by resizing browser window or using browser DevTools (F12) device emulator

Problem 4: Images Not Responsive


Symptom: Images overflow container on mobile.

Solution:

26. Add to CSS tab:

`css
img {
max-width: 100%;
height: auto;
display: block;
}
`

27. For specific images:

`css
.landing-image {
width: 100%;
height: auto;
}
`

CSS Not Applying


Symptom


Your custom CSS doesn’t appear to affect the landing page.

Solutions


Problem 1: WordPress Theme Overriding Styles


Symptom: Theme CSS has higher specificity.

Solution A – Increase specificity:
`css
/ Instead of /
.button { background: blue; }

/ Use more specific selector /
.shahilandin-content .button { background: blue; }

/ Or use !important as last resort /
.button { background: blue !important; }
`

Solution B – Use Canvas Mode:

• Change template to Canvas (Full Isolated)
• This prevents theme CSS interference

Problem 2: CSS Cached


Symptom: Changes don’t appear even after saving.

Solution:

• Clear browser cache:

– Chrome: Ctrl+Shift+Delete (Cmd+Shift+Delete on Mac)
– Or do hard refresh: Ctrl+F5 (Cmd+Shift+R on Mac)

• Clear plugin cache (if using caching plugin):

– WP Super Cache: Settings → Delete Cache
– W3 Total Cache: Performance → Empty All Caches
– WP Rocket: Clear Cache button in admin bar

• Clear CDN cache (if using CDN like Cloudflare):

– Log into CDN dashboard
– Purge cache for specific page or entire site

• Disable CSS optimization temporarily:

– Go to ShahiLandin → Settings → Performance
– Uncheck “Minify CSS”
– Save and test

Problem 3: CSS Syntax Error


Symptom: CSS after a certain point doesn’t apply.

Solution:

• Check for common syntax errors:

– Missing closing braces }
– Missing semicolons ;
– Incorrect property names

• Use CSS validator: https://jigsaw.w3.org/css-validator/
• Check browser Console (F12) for CSS errors
• Fix errors and save again

Problem 4: CSS Being Stripped for Security


Symptom: Certain CSS properties removed automatically.

Solution:
ShahiLandin sanitizes CSS for security. Potentially dangerous properties are removed:

• expression()
• behavior:
• @import from untrusted domains

Workaround:

• Use safe alternatives
• Contact support to whitelist specific properties
• Use inline styles for specific elements (less secure)

JavaScript Not Working


Symptom


Interactive elements like sliders, popups, forms, or animations don’t work.

Solutions


Problem 1: jQuery Not Loaded


Symptom: Console shows $ is not defined or jQuery is not defined.

Solution:

• Edit landing page → HTML tab
• Add jQuery before other scripts:

`html

`

• Place in section or before closing tag
• Ensure your scripts load AFTER jQuery

Problem 2: Scripts Load in Wrong Order


Symptom: Some features work, others don’t. Console shows dependency errors.

Solution:

• Check script order in HTML
• Dependencies must load first:

`html




`

Problem 3: DOM Not Ready


Symptom: Scripts try to manipulate elements before page loads.

Solution:
Wrap your JavaScript in document ready:
`html

`

Problem 4: WordPress Conflicts


Symptom: Scripts work in original HTML but not in ShahiLandin.

Solution:
WordPress loads jQuery in “no conflict” mode. Update your scripts:
`html

`

Problem 5: External Scripts Blocked


Symptom: Scripts from external domains don’t load.

Solution:

• Check browser Console for CORS or security errors
• Verify script URLs are HTTPS (not HTTP)
• Use correct CDN links:

`html





`

Fonts Not Loading


Symptom


Text displays in default system font instead of your custom font.

Solutions


Problem 1: Google Fonts Not Loading


Solution:

• Add Google Fonts link in HTML :

`html`

• Use in CSS:

`css
body {
font-family: ‘Roboto’, sans-serif;
}
`

• Clear cache and test

Problem 2: Custom Font Files Not Found


Symptom: Using @font-face but fonts don’t load.

Solution:

• Upload font files to WordPress Media Library
• Get file URLs from Media Library
• Update CSS with correct paths:

`css
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘https://yoursite.com/wp-content/uploads/fonts/custom-font.woff2’) format(‘woff2’),
url(‘https://yoursite.com/wp-content/uploads/fonts/custom-font.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
font-family: ‘MyCustomFont’, Arial, sans-serif;
}
`

Problem 3: CORS Issues with Font Files


Symptom: Console shows CORS error for fonts.

Solution:
Add to .htaccess file:
`apache


Header set Access-Control-Allow-Origin “*”


`

Problem 4: Font-Display Issues


Symptom: Text invisible until font loads (FOIT – Flash of Invisible Text).

Solution:
Add font-display: swap to @font-face rules:
`css
@font-face {
font-family: ‘MyFont’;
src: url(‘myfont.woff2’) format(‘woff2’);
font-display: swap; / Shows fallback font while loading /
}
`

Images Not Displaying


Symptom


Image placeholders show but images don’t load, or broken image icons appear.

Solutions


Problem 1: Incorrect Image URLs


Solution:

• Right-click on broken image → Inspect Element
• Check the src attribute URL
• Verify URL is accessible (copy and paste in browser)
• Update to correct URL in HTML editor
• Use absolute URLs:

`html






`

Problem 2: Images in WordPress Media Library Not Showing


Solution:

• Verify image uploaded successfully
• Get correct URL from Media Library:

– Go to Media → Click image → Copy URL

• Use that URL in your HTML

Problem 3: Lazy Loading Issues


Symptom: Images below the fold don’t load when scrolling.

Solution:

• Check if lazy loading is enabled
• Ensure images have correct lazy load attributes:

`html

`

• Or disable lazy loading in Settings → Performance

Problem 4: Hotlink Protection


Symptom: Images from external sites don’t display.

Solution:

• Download images to your computer
• Upload to WordPress Media Library
• Use WordPress URLs instead of external URLs
• Or get permission from image host to embed

Problem 5: Large Images Not Loading


Symptom: Some images load, but very large ones don’t.

Solution:

• Optimize images before uploading:

– Use tools like TinyPNG, ImageOptim
– Resize to appropriate dimensions
– Target under 200KB per image

• Upload optimized versions to Media Library
• Update image URLs

Layout and Positioning Problems


Problem 1: Elements Overlapping


Symptom: Text or images overlap each other.

Solution:

• Check for conflicting position properties:

`css
/ Common culprits /
.element {
position: absolute; / Removes from document flow /
z-index: 999; / May overlap other content /
}
`

• Adjust positioning:

`css
.element {
position: relative; / or static /
z-index: auto;
}
`

• Check for negative margins:

`css
/ Can cause overlap /
.element {
margin-top: -50px; / Remove or adjust /
}
`

Problem 2: Unexpected Spacing


Symptom: Extra space above, below, or between elements.

Solution:

• Check for default margins:

`css
/ Reset margins /
h1, h2, h3, p {
margin: 0;
padding: 0;
}
`

• Inspect elements with browser DevTools (F12):

– Right-click element → Inspect
– Check box model in DevTools
– Identify which element adds spacing

• Use consistent box-sizing:

`css

• {

box-sizing: border-box;
}
`

Problem 3: Sidebar Appears on Landing Page


Symptom: WordPress theme sidebar shows alongside landing content.

Solution:

• Use Canvas template – Removes all theme elements
• Use full-width page template if Canvas not desired
• Override with CSS:

`css
/ Hide sidebar /
.sidebar,
.widget-area {
display: none !important;
}

/ Make content full width /
.content-area,
.site-content {
width: 100% !important;
margin: 0 !important;
}
`

Colors and Backgrounds


Problem 1: Background Color Not Showing


Symptom: Background stays white despite CSS.

Solution:

• Check CSS specificity:

`css
/ More specific selector /
body.shahi-landing {
background-color: #f5f5f5 !important;
}
`

• Ensure element has height:

`css
.section {
background-color: blue;
min-height: 100vh; / or specific height /
}
`

Problem 2: Background Image Not Displaying


Solution:

• Verify image URL is correct and accessible
• Check CSS syntax:

`css
.hero {
background-image: url(‘https://yoursite.com/image.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px; / Element needs height /
}
`

• Ensure image path uses absolute URL

Problem 3: Transparent Backgrounds


Symptom: Background is transparent, showing theme underneath.

Solution:
Add solid background:
`css
body,
.shahilandin-content {
background-color: #ffffff; / or any color /
}
`

Animation and Transition Issues


Problem 1: CSS Animations Not Working


Solution:

• Check browser compatibility (add vendor prefixes):

`css
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

.element {
animation: slideIn 0.5s ease;
-webkit-animation: slideIn 0.5s ease; / Safari /
}
`

Problem 2: JavaScript Animations Not Running


Solution:

• Verify animation library is loaded (GSAP, Anime.js, etc.)
• Check for JavaScript errors in Console (F12)
• Ensure animations trigger after DOM is ready

Canvas vs Theme Rendering


Understanding rendering modes helps prevent display issues:

| Rendering Mode | Description | Best For | Potential Issues |
|—————|————-|———-|——————|
| Canvas (Full Isolated) | No theme elements at all | Marketing pages, landing pages | Loss of site navigation |
| Minimal (Header/Footer) | Keep header and footer only | Landing pages needing navigation | Some theme CSS may interfere |
| Theme (Full Integration) | Normal WordPress template | Blog posts, standard pages | Theme CSS may conflict |

Recommendation: For imported HTML landing pages, always use Canvas Mode unless you specifically need site navigation.

Browser-Specific Issues


Internet Explorer / Edge Legacy


Problem: Page looks broken in IE/Old Edge.

Solution:

• ShahiLandin doesn’t officially support IE11 or Edge Legacy
• Add polyfills for older browsers:

`html

`

• Recommend users upgrade to modern browsers

Safari-Specific Issues


Problem: Layout works everywhere except Safari.

Solution:

• Add -webkit- prefixes for CSS properties:

`css
.element {
display: flex;
display: -webkit-flex;
}
`

• Test in Safari or Browser Stack

Getting Help


If display issues persist:

• Provide screenshots of the problem
• Share the URL (if public)
• Specify device/browser where issue occurs
• Check Console (F12) for errors
• Try Canvas Mode first before reporting issues
• Clear all caches before testing

—

Related Articles:

• HTML Import Issues
• Performance Issues
• Cache and Plugin Conflicts