I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
Related
The link below is where to find my website that I am making for a university project and for a client.
https://homepages.shu.ac.uk/~b7009049/wordpress/
Once the webpage loads up, you will be introduced with a page title populated with an image and two buttons. One will lead you to the About us and the other will take you to services. Click on the services button as that's where the problem is please.
Basically there is a white gap and I want the image below to completely fill up the page. Like a full screen except that you are not pressing F11 .
I don't know where the issue is. If I remove the header page, it does not do anything to clear the gap. So I don't think the header is the problem.
I am using fusion slider + a plugin called layerslider. If that helps.
I can provide a screenshot of what I am editing upon request if needed.
Thank you very much.
You have two things producing white space at the top of https://homepages.shu.ac.uk/~b7009049/wordpress/services/
One is padding applied to the "main" element. You can get rid of that with CSS:
/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
padding-top: 0;
}
You might also want to get rid of the padding at the bottom of #main element on this page - padding-bottom: 0, of course
That will still leave a 20px white bar at the very top, produced by a stray 'p' element that has a bottom margin of 20px. Though this paragraph happens to contain a jQuery script (which probably shouldn't be there), there's another stray p element further down the page - also contained within "ls-" elements - also producing a 20px white separation between two full-width image elements, that happens to be empty.
I don't know exactly where these p's came from. You might have to dig into the applications involved - both Layer Slider and, I think, the Fusion Page Builder - and how they were deployed here, to remove the unwanted separation where it originates.
If they can't practically be cleaned up, you might have to correct via CSS again. Just to get rid of the effect on display on this page, you might try
/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
margin: 0;
}
You could also try something like the following, if you were concerned about affecting other ".post-content" ps outside of Layer Slider.
/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
margin: 0;
}
Another approach would be to apply a negative margin to .ls-fullscreen-wrapper:
/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
margin-top: -20px;
}
Without actually working on the installation or examining it more thoroughly, I couldn't say for sure that the code I've provided would be sufficient and also wouldn't produce undesirable consequences, but it might be a start. You could add the snippets to the Customizer Additional CSS box, and see how things turned out.
ADDITIONAL NOTE AFTER COMMENTS
I've gone back to the page and it seems that you have successfully added code eliminating the 20px post-content p margin, but I don't see anything applied or applied and overruled regarding the 90px top (and bottom) padding on #main.
I don't know how exactly you're trying to address that problem. I previously recommended utilizing the Wordpress Customizer (assuming you're in Wordpess 4.7 or later) - see https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.
From inspection I can see that the unwanted padding in question is added via the theme/Fusion stylesheet. The Customizer will add your new CSS to the underlying html, after other stylesheets have been loaded, so should override duplicated selectors. If it's still not taking, you could try, adding !important to the new styles. I think most coders would view this method as a kludge, but all of this after-the-fact correction effort is kludge-y.
/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE */
.page-id-2546 #main {
padding-top: 0 !important;
}
If that doesn't work - if inspection of the element doesn't show the code being applied at all, for instance - then I'd look to caching issues and peculiar theme characteristics, not to mention typos...
What worked for me was adding this code to my css
.ls-overflow-visible {
overflow: hidden !important;
}
in my case the white piece above my menu was not caused by the padding but by an overflow that was only there when I switched to full width modus. You could of course delete this code:
.ls-overflow-visible {
overflow: visible !important;
}
from the plugin css, but it will return when you perform an update.
I am attempting to style the horizontal rule elements on my site (or separators, as Wordpress likes to call them). I have added the CSS to my style sheet, but for some reason, the styling is not applying to all instances of horizontal rule.
I am very new to web development and this is my first time amending style.css. I feel I may be missing something obvious.
I have added the following to the top of style.css:
hr {
background-color:#06185F !important;
height:0.5px !important;
}
I expected that styling to apply across all horizontal rule elements on my site. However, it appears to be applying inconsistently, as seen here: https://emotionallyhealthyschools.org/whole-school-approach/
The middle of the three separators I have used in the body of this page is showing with a different style to the other 2. Please advise?
The css seems to be fine - However, it's actually the middle hr that is displayed correctly with a height of 0.5px.
I would actuall refrain from dimensioning below 1px because of potential unintended renderings due to rounding errors. If you add
min-height: 1px;
the hrs are rendered with the same height.
add the CSS in bottom of the style.css
bootstrap is adding some styling, including a border-top value to your hr.
add border-top: none or border-top: unset and it should work as expected.
Also change your px-value to a full px.
with pixels you either have one or not, there aren't half-values.
I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.
I do not want to have any margin on the print page, since otherwise the background image looks messed up:
https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0
However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages):
https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0
body {
margin: 30px 0;
}
That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?
Edit: sorry for the hideous example, but this is basically the code:
http://jsfiddle.net/yugv84qw/
If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include
#page {
margin: 1cm 0;
}
You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.
You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:
#page:first {
margin: 0
}
Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.
Sadly, the control of printing from the web, even in this day and age, is not an easy process.
I'm having an issue with text overflowing within a column when an inline image is aligned left or right. Its hard to describe so I created an example page at http://alaskalegion.com/dev/test.php
This only occurs in IE6 and IE7. Any thoughts on how to fix this?
I'm using fckeditor on the backend which is generating these.
You need to make sure the p tag wraps around the image so that other paragraphs are above and below it. I can´t test it right now, but I usually use overflow:hidden on the surrounding block (the paragraph) and I think for IE you need something like zoom:1.
By the way, can´t you get rid of the inline 'align:left' and replace it by css in an external style sheet like:
#center-column p img {
float: none; // if still necessary...
}
#wide_column p img { // I don´t know what the id of the wide column is...
float: left;
}
(I don´t know if you need the p selector, I'm only trying to target the right images without seeing your code)