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? ;)
Related
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!
My limited CSS knowledge is starting to catch up with me now and I'm not sure how to handle this particular situation, despite grappling over it in various forms for months.
So I was having this problem awhile back with my solid-color Bootstrap navbar where it didn't fully extend to the right side of the browser by a handful of pixels. I could never figure out why but I did figure out a while back that overriding .row with a margin-right attribute of 0, fixed this problem. Fast forward a few weeks, I just noticed that my grey content boxes are now off-centered, as in, the margins between the left side and content and the right side and content were not the same, clearly because of this change I had previously made.
Now I can offset this problem by overriding .row with a margin-left attribute of 0 (and then messing with padding in comparison to those values to get the desired effect) but I'm really just not sure if this is bad practice or not? As .row is one of the most used classes of all in Bootstrap, I feel like I'm hacking away when there must be a elegant solution (where one problem I can't figure out is how to apply the margin-right styling to certain outer rows and not in certain rows - which would be a nightmare to try and figure out where at this stage of my project). I did try for a little while to apply this margin-right: 0 attribute just to the specific rows I thought were the culprit for the navbar issue but in the end, I wasn't able to figure it out.
Any help is appreciated, thanks!
you should not change the css properties of a Bootstrap class, for many reasons: above all
you could create regression somewhere else in your site (as already happened to you)
you can't be sure what will happen to your site if you upgrade the bootstrap css to a new release
You should
add a specific ID or a specific custom class to the originary navbar that had that issue
then create a custom css file (that you will import in you web pages after importing all bootstrap css files)
add in this new custom css file a rule to the previous new ID/class for the navbar that fix the original problem
It sounds like you might be nesting a container within a container, or a similar nesting issue. I cannot tell without a code sample.
You shouldn't need to use a row on your navbar, bootstrap has its own classes for a navbar.
See http://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some snippets on how to do this.
Also you should never edit the bootstrap file, create an override file and put any changes you make into there. Make sure you link to the override file after the bootstrap file so that it cascades correctly. Like so:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.