I'm using elementor for the first time and I can't remove the space between widgets, you can see the small line of 8px in gray colour with a gradient inside (thats my picture). When I put this picture Elementor adds the white space above and below the line, I thought this is added only at desing time but when I update and see in the browser the whites spaces continues here. Of course the picture in the media gallery don't have this white spaces... I don't know what to try, the only trick is to force the margins but then when the screen changes it's overlapped (this is not a solution). I think Elementor should place the picture without nay margin, only the picture. I have the next properties set:
Content: Full Width
Elementor Widgets Space: 0px
Columns Gap: no gap
All margins and paddings: none (0px)
Tried height to default and forced to 8px
I have two ideas that might help you:
check for a border, maybe you set it on accident or it got imported
take a look at your custom css. Sometimes plugins like envato elements add their custom css without you noticing
It's also a good idea to use your browser and inspect the element to find out if there is any gap. You can also try that on the elements next to the widget you are using.
Related
I am configuring the widgets for my wordpress site but I would like that these start to be visible after 1200px (for example). It is like to have a margin between the first widget and the top menu of 1200px but I do not find the way to achieve this behaviour.
If you wanna see a real example you can go to this post:
https://www.thetravelerlens.com/tutorial/photoshop/enfocar-photoshop
The widgets must appear right after the black and thin line divider (where the social icons are).
Thanks a lot for all your help in advance.
I'm not sure which widget you are referring to. If you're talking about the "ENFOCAR IMAGEN EN PHOTOSHOP" and "Lo más destacado de este artículo" sections, then the correct way to achieve this would either be to check in your theme documentation if there are other widget areas you can use, or move the widget area where you want it to be displayed via php and a child theme (which I think you're already using) or use CSS, but not just with margins.
Find other widget area
By the look of it, you're using this theme. It's no longer available so I couldn't check a working demo, but by looking at the screenshots on the page, there may be other widget areas you can use. See screenshot below:
See red rectangles in the screenshot
I suggest you read your theme documentation to see if you can use those, but generally speaking, you can:
Go on a single post, and click on Customize in the top admin bar.
Click on Widgets and you should see a list of all the available widget locations on this page. Add the widget in different locations and check if another one fits your needs better. If you can't find anything, then check the solution below.
Move widget area
Locate a file called single.php or single-post.php in your parent theme and duplicate it into your child theme.
In this child theme file, locate the widget area in the code, it should look like this dynamic_sidebar( 'some_identifier' );. Take this code, and move it to the desired location in the page template.
Reload your page and check if it is placed correctly. You'll likely need to remove additional elements on the page to remove the top section and add CSS in the style.css file of your child theme to add some styling to the new widget section
Please note that this is just general instructions and each theme is different so it may differ for yours.
Moving the whole widget area using CSS
You could also move the whole widget area using CSS. If there aren't any better widget locations and you're not too comfortable playing around in php, this may be the best solution.
With flexbox:
This is a more modern approach but has less cross-browser support. You should also add vendor prefixes for better support.
First, we'll apply flexbox to the parent container:
.single-post #tve_editor {
display: flex;
flex-direction: column;
}
Then we'll change the order of the section with the social media icons to place it first, before all the other elements:
.single-post .thrv_symbol_72533 {
order: -1;
top: -49px; //Little fix for the CSS Thrive builder applies
}
With absolute positioning:
This solution has a bit more cross-browser support but will require more CSS tweaking on your end, mostly for responsive behavior with media-queries (which I'm not going to get into details here).
First, we will add a margin at the top of the widget section that is exactly the height of the section with the social media icons:
.single-post #tve_editor > .thrv-page-section.tcb-window-width {
margin-top: 115px !important;
}
Then we'll move the section with the social media icons at the top of the page using absolute positioning:
.single-post .thrv_symbol_72533 {
position: absolute;
top: -114px;
}
Once done, you need to check the responsive behavior and apply CSS tweaks using media queries to adjust the layout for all cases.
Adding margins to current widget:
Again, I'm not sure if you're really referring to the top section with the dark backgound image, but if that is the case, here are the reasons why it's not a good idea to simply add CSS margins to this section:
1200px high is not a fixed distance you can move your widget and that will work on all screens. Your theme is responsive, therefore this height will change depending on the device. For example, it will be much taller on a mobile device.
The height of the widget also depends on its content. If you have more text on another post, it will be taller so you can't just apply a margin of a specific height and hope it to work in all cases.
You would still need to create an empty space below the section with the social media icons that is tall enough to receive the widget section. However, since the height is dynamic, you can't just set a value for its height.
I need a small change on my single product page. https://www.narwal.shop/product/bonsai/
I need a small vertical white spacing between the size selection and the quantity box.
You will need css, add bottom margin to the size selection. For example:
.size-selection { margin-bottom: 5px }
To do this, you need to know the class of the element. Open Dev Tools in your browser with F12 and find the element in the source code.
Here you can see how to add custom css to your WordPress site.
in my Drupal site, some black, empty space is being displayed at the bottom of the page, like in the image below..
By googling, I understood, it is because not enough minimum content in the page. but did not get proper solution to fix it, except min-width setting in global (style.css) file, but it is displaying unnecessary scroll bars even a page has one row of data when you set that property.
Could any body suggest me a solution to this problem
Surely just add the right background colour to your body tag in your css?
in your style.css add
body {
background: #f4f5e5;
}
I know I can't get much help here because I'm using a premium theme, bu their forums aren't that good. Anyways, I'm having problems with my site Humblesolutions4u.com I'm using elegant estate. I'm sure it's very easy, im just having a brain fart.
Problem 1: I disabled the sidebar, but there is still a faint line running down the main listing area on the homepage. I'm guessing it's an image?
Problem 2: The first 2 listings are the same height, while the third is a bit shorter! I've attached an image so you can see what I'm talking about.
Yes, it's a background image, referenced in #content (style.css line 105) - try replace it with a solid colour such as #FBFBFB. You'll also need to replace the background on #content-top (style.css line 100) with the same colour. I suggest you also add border-radius:5px 5px 0 0; to #content-top to round your corners in a similar way to how they were when using the background image.
The reason for your third box being shortert is because the first two posts have the .first class (see #main-area .first style.css line 108) which is pushing them down more than the third item. You could probably just remove this style altogether.
To answer Problem 1, you are correct in that it is a background image. Both #content-top and #content have a background image. I'd suggest replacing them with your own modified version, or changing it to an actual background color.
For Problem 2, there is the following CSS rule at line 108 of style.css that is affecting the first two listings:
#main-area .first {
padding-top: 28px !important;
}
This is overriding the normal top padding of 35px, which is making the first two listings higher than the third one. I'm sure there's a reason for it to exist in the theme, but typically CSS rules that use !important, which gives it precedence over other CSS rules, are a bad idea when used without good reason.
I hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?