I am trying to reduce the spacing between the images and the paragraphs of my website. I have tried to remove the space through the draft version, but it appears differently on the actual browser version. Here is the link to the website for reference:
https://pprggw.wordpress.com/partisian-views/
Your CSS is showing both a margin-bottom of 27px and of 24px on your p tags. Remove both of those in your css and you'll see much less space between the images and the text.
If you can access css for p and .alignnone you can modify it directly
or if you cant Add following css
#primary .alignnone {
margin-top: 0;
margin-bottom: 0;
}
body #primary p {
margin-bottom: 0;
}
if it's working you can try to remove #primary and check if it works.
or if you want is not limited to #primary div make these styles important
for example
.alignnone {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body p {
margin-bottom: 0 !important;
}
Related
I am working on a report automation tool that will print out a monthly report with charts and graphs. The problem I'm having is with one component that may take more than 1 page to print. When I make the headers and footers appear on every page they cover part of the graphs instead of forcing the graph down below the header/above the footer.
So far I have tried several #media print options in CSS like the below code. Is there a better way to do this? Perhaps programmatically in Javascript? I would also like to keep a page count in the footers dynamically without relying on the default print option footers from the browser if anyone has some advice on that as well.
.kpi_wrapper {
break-inside: avoid;
margin: 10px 10px 10px 10px;
}
#media print {
#page {
margin: 0px;
margin-top: 5px;
}
html {
margin-top: 50px;
}
.menu {
display: none;
}
.upload {
display: none;
}
}
I've manage to hide the top bar and menu on wordpress page but white space is being displayed on mobile devices at the top of the page.
https://iroae.com/test
I'm using this CSS
.page .site-header {
display: none;
}
.page .site-top-bar {
display: none;
}
How can I hide this white space on mobile devices?
Edit your style.css link : [https://iroae.com/wp-content/themes/shopkeeper/css/styles.css][css file]
so in your file directory path will be : wp-content/themes/shopkeeper/css/ and file will be style.css
find this:
#page_wrapper.sticky_header {
padding-top: 50px; }
and set padding-top: 0 ;
#page_wrapper.sticky_header {
padding-top: 0; }
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…
When using the jsTree plugin, I need to have a node which displays its full content. Right now, the nodes only display approximately one line of text each. How can I get the nodes in a jsTree to display all of the text in the node without truncating the node's content?
The following CSS code will do the trick:
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
This is a modification of the solutions here (height changed to auto) and here, neither of which worked for me on their own.
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.