I added a fullwidth menu module in divi elegant themes. This should work fine, but for some reason it always generates white space above.
I could just add some css to fix the problem but the people at divi found it smart to make the extra white space an inline style. As the page is generated dynamically I cannot prevent this from being added.
I tried to add additional css with the visual builder itself.
I also went to the style.css in WordPress to add the additional code to the div, but this does not work.
As for using the inspect function in a browser and directly editing the style it works but like I said above after the page is generated I can of course edit the inline style, but how do I make it so that this is not generated to begin with.
<div class="et_dropdown_animation_fade et_pb_bg_layout_light et_pb_fullwidth_menu et_pb_fullwidth_menu_0 et_pb_module et_pb_text_align_left"
data-fix-page-container="on" style="margin-top:48px; padding-top:0px;">
So the thing I am trying to accomplish is that the margin becomes 0 bypassing the inline styling or a method to inline style from the backend in WordPress.
As adding styling to the css file does not work.
This is generated by Divi's JS. Would be better if you could share a public URL, but if you're looking for a quick patch, you could jquery to get the "top" value after the module is loaded, then counteract it with a negative margin-top of the same value.
Add this to your Divi Theme Options integrations tab (or in a .js file, then call it from your child theme's functions.php file, without the tags of course):
</script>
jQuery(document).ready(function($){
if (!$("body").is(".et-fb")) {
var fullMenuTop = parseInt($('.et_pb_fullwidth_menu').css('top'), 10);
$('.et_pb_fullwidth_menu').css("margin-top", - fullMenuTop);
}
});
</script>
The following worked for me.
Divi's full width menu module has an inline class named et_pb_row. Set its height to 0px and reduce padding to 0px as well.
If the problem still persists, you probably have stray columns in the row. Look for the class et_pb_column and do the same.
Cheers!
Related
Recently I've made a new Wordpress crew page for my team, this one. I'm using the visual composer plugin to put it all together. Unfortunately, the Wordpress theme adds a margin between the two sides that I cannot remove using visual composer. (see here)
After using inspect element in Safari I found the line that creates the margin (see here). After deleting the line it looks (like this).
My main question is: what is the best way to remove this margin? I'm afraid that jumping into the source code will mess up the website because the margin is part and connected to so many classes, maybe even on other pages?
Additional question: After deleting the margin in the inspector tool it creates white space on the right. I tried to find a specific page width or something similar but without success.
Thanks in advance!
You could create a Child Theme
Any code added to a child theme will not mess with the code of the original "Parent" theme. You can add your own stylesheet in it and override any styles you please, and they will carry over after any updates.
Use a plugin like Simple Custom CSS to inject your styles into the site.
You have to overwrite whole column grid. Try pasting this CSS code on "Custom CSS" field of your template or use plugin like "Cusom CSS"
.vc_col-xs-12, .vc_col-sm-6 {margin-left:0px!important;}
#media (min-width: 768px) {
body .vc_row-fluid .vc_col-sm-6 {width: 50%!important;}
}
If you know CSS, you should add ID to front page container and apply above CSS only to the front page. Otherwise it will take effect on whole website. It will remove margin between 1/2 columns.
Other way:
Try to make same arrangement of elements by using full width table instead of responsive columns - it will affect how website will look on mobile devices - but do you like how it looks now on mobile? ;)
I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1
To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select).
More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it.
Please take a look at the following screenshots demonstrating the problem:
Single select
Multiple select
Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.
Thank you.
When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').
The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed.
.
var parentElement = $(".jarviswidget");
if ($('.select2').length) {
$('.select2').select2({
"dropdownParent": parentElement,
"allowClear": !0,
"width": "100%"
});
}
https://oisteinhaugland.github.io/cabinProject/pages/order.html
On this page of the website, and on this page only, i get a weird whitespace beneath all my content. I've tried margin, padding zero etc. I use normalize.css to begin with, and the problem only occurred in on of my last commits, and i don't know whats causing it.
If you inspect it, it just targets the html element, which is above the whitespace.
The html haven't changed, and the css shouldn't affect it.
Styling for the footer is the same for all pages.
Any suggestions?
Anything is appreciated.
full repository https://github.com/oisteinhaugland/cabinProject
remove the height:400px from the captcha iframe.
this style is coming from main.scss so you will either need to remove it, or add an overriding style after the main.scss file is included in the page
iframe {height:inherit;}
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
Pretty new to this coding stuff so forgive the ignorance :)
I'm trying to remove some inline styling from this Wordpress theme which I understand overwrites any external CSS files.
When I 'inspect element' I get the following, and changing hidden to visible on the right does work. But usually it would say like style.css:202 or whatever line of the CSS I need to change and that's how I usually do it. This time though obviously it says element.style { and I can see that style="overflow: hidden; on the left hand side (highlighted).
http://i.imgur.com/qkKHsy0.jpg
How would I go about essentially making that overflow visible?
I've added the following custom css but it just crosses out the overflow and doesn't change anything:
.slides_container[style] {overflow:visible !important;}
Thanks a lot!
For me overflow:auto!important and overflow:visible!important both working nicely.
See live here: http://jsfiddle.net/mayankcpdixit/h7JmT/
This is because there is a javascript which is adding these styles on document load. And I believe this is some kind of slider where usually the overflow is hidden. If you need a slider where overflow is visible, then select your desired slider and use it. Make sure you remove the present slider before doing so.
putting
overflow: visible !important
will allow you to give preference over styles inheriting from other style sources. But will not stop a javascript changing the styles.
I believe this one below created by roXon will give you some idea of overflow : visible sliders
http://jsfiddle.net/roXon/tMxp5/1/