We have a website built in wordpress using WP forms.
On any page where a contact form appears there is a random _ character on the top left. This character can't be highlighted, can't be selected and doesn't appear in the DOM.
It doesn't appear to be part of any :before, :after css rules which was my first guess.
The anomaly can be found here: https://www.lazyduck.co.uk/contact-us/
Does anyone have any suggestions how to find where it came from, and why we can't inspect it?
There is a :before CSS attribute on the element <li class="choice-1 depth-1">. It looks like it's used for styling, however in the case of this page obviously it's not working very well.
If the problem only exists on the page you linked to, you can disable the box with the following CSS:
.page-id-168 .post-content ul > li:before {
display: none !important;
}
Otherwise you'll need to find a way to disable that CSS across the whole site.
Edit You can inspect the element by right-clicking on it and choosing Inspect in Chrome or Inspect Element in FireFox.
Related
Need some help with a wordpress theme contact page content.
Am trying to edit it directly from source, it seems to show as a html file. I understand that wordpress runs on php so I've searched quite a number of php files but none include the contents which is showing in the image.
https://imgur.com/a/WlWHz
Read a bit more online and some said that it's saved in the database. Been trying to find it in phpmyadmin too but without much luck. Maybe I'm not looking good enough.
I'm also trying to remove the entire block of code below from the website hakataai.com :
div class="sc_form_address column-1_3"
Please advise if anyone has any ideas.
Many thanks!
You can either search again in your sources because the file is there or you can do one of the following:
1)If you want to remove completelly some content try to use custom css and display: none; your element.
2)If you want to change your content to something else you can also use css (for text purposes i suggest it) and use the :after tag, to display something different on your element.
i.e.: let's say the class you want to change is the sc_form_subtitle:
1) h6.sc_form_subtitle{ display: none;} (will hide the element)
2) h6.sc_form_subtitle::before{ display: none;}
h6.sc_form_subtitle::after{content: " type your text";}
try inspect element on item it will show you the exact place on the code, then go to your filemanager from host view and edit it however you want
I have a div object (a square box) and I made it clickable by creating this css style:
.clickable {
cursor: pointer;
}
Right now clicking on the box leads no where. Where do I put the URL to redirect the user? I have multiple boxes they all need to lead to a different URL, which is to be pulled from a database via PHP. but where do I add the URL since I don't have a tag?
Rather than make the div clickable, nest it within an anchor tag:
<a href="http://google.com">
<div></div>
</a>
This is semantically correct as of html5
https://davidwalsh.name/html5-elements-links
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
I will qualify my answer by saying that you should consider what the content of your div will be. Some markup and content may not be appropriate if you are making the entire block clickable (i.e. anchor tags, button elements, etc)
UPDATE: On further research, prompted by comments below, this answer may not be optimal. It does work. It is still useful in certain
situations, but since <div></div> is now valid html it
is likely not necessary.
Additionally, remember links can be can be made display: block; which
could also solve similar problems.
Just to be clear you did not make that div clickable by adding CSS. You made it "look like" it was clickable by changing the mouse-pointer when it hovers the div.
This jQuery snippet will take ant div that contains an actual link, and make the whole div (really) clickable:
$(".clickable").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
Carry on using your CSS as well of course, as it provides visual indication that this is the case.
I'm building a Wordpress site and there is a space between the last content section and the footer (site: http://www.imprero.com/wordpress/graffitx). I inspected the code and reviewed the potential paddings but couldn't figure out where is this space coming from.
In your last mk-main-wrapper-holder -> theme-page-wrapper -> theme-content class you have an empty p tag with margin bottom of 20px. Removing that style or the empty p tag should solve your issue.
You seem to be using a content builder to make your updates easier. Although this is a good, easy-to-use approach, this adds a lot of unwanted pieces of code in your site, which takes your loading time up several seconds.
Anyway, it seems to be caused by a section you added without content. So, check the content you added in your page via WordPress admin and see if you can find any empty content sections in your Content Builder. Preferably, use the "Text" instead of the "Visual" tab if nothing is showing up via your Content Builder visual options.
I think this piece of CSS code is a good workaround, although not the best option (which would be removing the empty section in Content Builder):
#theme-page .mk-main-wrapper-holder:last-of-type .theme-page-wrapper .theme-content p {
display: none;
}
Hope this helps you. :)
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
In reference to my testing site's page:
http://thepfjstudios.com.au/testing/content/NewAbout.php
I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.
The .css file used is:
http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css
and the .js file is in the same folder but is SpryMenuBar.js
I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.
I would post code here but all 3 pages are relevant to this question and would take up a very large space.
SpryMenuBarVertical.css on 12 line defines:
* { margin:0; padding:0}
margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.
Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.
Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.