White Spacing Woocommerce Single Product Page - css

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.

Related

Elementor Widget Sepparation problems

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.

Reducing the space on wordpress

I couldn't get the rid of the spacing at the top of every page in my wordpress site.
Where can I see the px on my theme? So I can adjust it to be applied to all the pages on the theme instead of applying a piece of code to every single page.
Click here to see the white spacing at the top
Click here to see the page demo
go into wordpress dashboard, click appearance and click editor. Find the CSS file with the body declaration and put in:
padding: 0;
margin: 0;
This is liable to break all manner of things but will sort the first place that the padding/margin could be.
But you really need to post the CSS for us to have a clue
Add the following to the bottom of your css file:
article.enl-page {
padding: 0 !important;
}
It should achieve what you want. It would be better to find out where the original rule is being set though.

Why some black empty space in my drupal site bottom

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;
}

remove spacing on both sides of webpage, wordpress

I've been trying to figure out how to remove the side spacing (on both left and right) of a page. For instance, I'll have a photo that should span the width of the page, but for some reason wordpress automatically adds in a buffer.
Thank you.
Add this css-
#wrapper div.centered-wrapper {
width: 95% !important; // reduce the % to increase the spacing.
}
This will effect only the content on the page not the menu. The menu wil take style from what you have changed in style.css.

second image in footer and styling

I have my wordpress theme built but there are 2 problems, the first the twitter feed I have in my footer (not a widget) is taking the styling for something else instead of the styling I gave it. I styled the links etc for the feed but it's not styling properly. Also I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like, any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
download addon fire bug
Right click on image and click on inspect eliment with fire bug then chang the css of your image
in your case
.art-footer img
{
border-width: 1px;
}
and make it
border-width: 0px;
n here is the screen shot of your site

Resources