I have applied a theme called Karma to my WordPress instance and there is an issue (which they deny) that I've had for awhile now and just can't seem to figure out with its CSS.
The problem is that my website, www.LiveCarePC.com is a responsive site. When it resizes for mobile or a tablet, .jqslider seems to fail to resize itself properly. It just becomes a gray bar that bothers you.
Desktop view:
Mobile View:
Karma Theme Mobile View (Live Preview on http://themes.truethemes.net/Karma/homepage-jquery-2-2):
Any help would GREATLY be appreciated. You can inspect the site and see its source there, obviously.
*Note: I've reinstalled Wordpress and the theme itself as well as all the plugins so it's not that. I'm just looking for the solution in the code.
For anyone else running into this error, it seems it's a bug in one of the css files. Below is the fix.
In the karma-royal-blue.css file, you must comment out one of the lines as seen below.
/*------------------------------------------------*/
/* HEADER
/*------------------------------------------------*/
#header .header-holder {background:#182947 url(../images/skins/karma-royal-blue/bg-header-holder.jpg) 0 0 repeat-x !important;}
/* .big-banner #header .header-holder {background:#182947 url(../images/skins/karma-royal-blue/bg-big-header-holder.png) 0 0 repeat-x !important;} */
.top-block {background:#13223C !important;}
The line that's commented out is the line that, well, needs to be commented out. That fixes the error.
This fix applies to the Royal Blue color scheme in the Karma Wordpress theme. It may apply to others as well.
Related
I can't find the solution of my problem. My nav active class is displayed mostly on wrong nav-link. I add in my sass:
html {
scroll-padding-top: 134px;
}
to not cover my h2 titles. Next I add to body in my html file:
data-bs-root-margin="134px -30%"
and it works good only on iPhone 5 size. It should look good on the rest of phones size at this moment. It is not responsive for tablets and desktops yet.
What am I doing wrong with this? I think all problems are because of scroll-padding-top but how to resolve this to class active works properly and be active on good nav-links?
All of the basic code:
https://codepen.io/samak6/pen/poKxYVO
I thought I was going crazy, but a colleague confirmed those gradients are there. How do I remove it?
This will only work on Desktops
On a site www.motosa.co.za - look just right of the Main Menu Bar, seems to be a gradient, darker from left to right?
Can you please help me find and fix the css that causes this. Assuming it is css causing it. It uses the Office theme on Themeforest, and I see those there on the demo as well and the author claims innocence.
Thank you in advance
Yeah I see there's a custom style that you've added
'body { background: #fff;}'
But due to low specificity this is being overwritten by theme styles.
You either need to:
Go to your Theme Settings and find a background color and change it to #fff.
Or in your custom styles write:
body {
background: #fff !important;
}
So, as of 4/12/15, Tumblr has changed something in their code and the "Promote Tumblr!" buttons reappeared on my blog, even if I had them disabled in the advanced settings...
I searched and found this code:
iframe:first-child { display: none !important; }
that worked for me, but now on the mobile version of the site, I get a plain white bar on top, right where the Tumblr Promote buttons used to be... On desktop, everything works ok...
I attached the screenshots of before and after here:
Before:
,
After:
Any ideas how to get rid of it?
Thank you in advance!
That is because Tumblr seem to add this class "tmblr-iframe--controls-phone-container" to the body and this style;
.tmblr-iframe--controls-phone-container {
padding-top: 43px;
}
from what I found.
Try: body { padding-top: 0 !important; }
You can use the "Developer Tools" in Chrome (desktop browser) to see the source HTML of your site on different mobile devices, that should help you with problems like this.
Note: I used the "Developer Tools" in Chrome Browser and was emulating a device called "iPhone 5" to recreate the issue in question.
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.